자바스크립트를 활성화 해주세요

자바스크립트 script 동적으로 로드하기

· ☕ 3 min read
🏷️
  • #javascript
  • 기존 script 로드방식의 문제점

    자바스크립트를 로드하는 기본적인 방법은 다음과 같다.

    1
    
    <script src="script.js">
    

    이 방식은 문제가 있는데, 스크립트가 로드되고 실행되는 동안 브라우저가 DOM을 그리지 못하게 블럭하기 때문에, 스크립트가 0.5초 정도의 비중을 차지해도 사용자는 화면을 보지못해 답답함을 느낄 수 있다.

    async와 defer의 등장

    기존 스크립트 로드방식의 문제점을 해결하기 위해 async와 defer 키워드가 등장했다. 다음과 같이 쓸 수 있다.

    1
    2
    
    <script async src="script.js">
    <script defer src="script.js">
    

    async와 defer는 둘 다 브라우저가 DOM을 먼저 그리게 하여 사용자가 답답함을 느끼지 않게끔 하기 위해 등장했다. 이 둘의 차이점을 알기 위해서는 브라우저가 자바스크립트를 해석하는 방식을 간단하게 알 필요가 있다.

    브라우저가 자바스크립트를 해석하는 방식

    자바스크립트는 변수와 함수 등으로 이루어진 코드일 것이다. 브라우저는 이 코드를 다운로드 받는 국면(phase)과 실행하는 국면(phase)으로 나눈다.

    예를들어 다음과 같은 함수가 있다고 할 때, 스크립트 전체를 다운로드(fetch) 하는게 다운로드 국면, myFunc()로 함수를 호출하는걸 실행 국면으로 볼 수 있다.

    1
    2
    3
    4
    
    var myFunc = function() {
      console.log('good');
    }
    myFunc();
    

    스크립트 로드 방식별 비교

    • 기존의 스크립트 로드 방식에서는 브라우저가 해당 스크립트를 만나면 스크립트를 다운받고난 후 실행까지 해버린다. 이 동안에 브라우저는 DOM을 그리지 않는다.
    • async 스크립트 로드 방식에서는 브라우저가 해당 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 다운받고 난 후 바로 스크립트를 실행하는데, 실행 국면에서는 DOM을 그리지 않는다.
    • defer 스크립트 로드 방식에서는 브라우저가 해당 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 이 때, 스크립트를 전부 다운로드 받더라도 스크립트를 바로 실행하지 않고 DOM이 전부 그려질 때 까지 기다렸다가 스크립트가 실행된다.

    따라서 가장 사용자 친화적인 스크립트 로드방식은 defer고 그다음이 async다.

    자바스크립트로 스크립트 로드하기

    스크립트를 로드할 때, 좀 더 동적으로 스크립트를 로드할 수 있다. 물론 기본적인 흐름은 위에서 언급한 것과 같지만, 그 흐름 내에서 좀 더 정교하게 스크립트를 로드할 필요가 있을 때 쓸 수 있는 방법이다. 방식은 다음과 같다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    var myScript = document.createElement('script');
    myScript.setAttribute('src', 'script.js');
    myScript.setAttribute('crossorigin', 'anonymous');
    myScript.setAttribute('async', '');
    
    myScript.onload = function() {
    }
    
    document.getElementById('root').appendChild(myScript);
    

    위의 코드는 script 태그를 만든 후, 그 태그에 src, crossorigin, async 속성을 부여하고 root element에 해당 스크립트를 붙여넣는 코드다.

    나의 경우 블로그를 만들 때, utterances 댓글을 블로그에 적용하면서 테마를 동적으로 로드해야 했는데, 이 방식으로 문제를 해결했다.


    최성환
    글쓴이
    최성환
    📚Learner🤓Nerd🌐Web Developer

    목차