html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?

2016. 11. 29. 09:10

html안에서 자바스크립트의 위치

html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?
문득 궁금해서 찾아보았습니다.
다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다.
발번역이므로 오역은 댓글로 지적받겠습니다 :)

HTML 문서에 자바 스크립트를 삽입 할 때 `<script>` 태그와 자바 스크립트를 넣을 수있는 가장 좋은 곳은 어디일까?

사람들은 자바스크립트를 <head> 섹션에 삽입하면 좋지 않다고 하지만, <body> 섹션의 시작 부분에 놓는 것 또한 나쁘다고 합니다.
왜냐하면 자바 스크립트는 페이지가 완전히 렌더링되기 전에 파싱되어야하기 때문입니다.
그럼 <body> 섹션의 끝에 <script> 태그를 놓는 방법만이 남은것 같아 보입니다.
그렇다면 <script> 태그를 넣을 수있는 가장 적합한 곳은 어디일까요?

브라우저가 웹 사이트를 로드 할 때 일어나는 일

HTML 페이지 가져 오기 (예 : index.html)
HTML 구문 분석을 시작합니다
파서는 외부 스크립트 파일을 참조하는 <script> 태그를 발견합니다.
브라우저가 스크립트 파일을 요청합니다. 한편 파서는 페이지의 다른 HTML을 구문 분석하는 것을 차단합니다.
잠시 후 스크립트가 다운로드 된 후 실행됩니다.
파서는 나머지 HTML 문서를 계속 파싱합니다.

4번은 좋지 않은 사용자 환경을 유발합니다.
웹 사이트는 기본적으로 모든 스크립트를 다운로드 할 때까지 로드를 중지합니다.
사용자는 웹 사이트가 로드 될 때까지 기다리는 것을 싫어합니다.

왜 이런 일이 일어날까요?

모든 스크립트는 document.write () 또는 다른 DOM 조작을 통해 자체 HTML을 삽입 할 수 있습니다.
이는 구문 분석기가 나머지 문서를 안전하게 구문 분석하기 전에 스크립트가 다운로드되고 실행될 때까지 기다려야 함을 의미합니다. 결국 스크립트는 자체 HTML을 문서에 삽입 할 수 있습니다.

그러나 대부분의 개발자는 문서가 로드되는 동안 더 이상 DOM을 조작하지 않습니다. 대신 문서를 수정하기 전에 문서가 로드 될 때까지 대기합니다.

예를 들면:

<!-- index.html -->
<html>
    <head>
        <title>매일매일 커밋하나씩</title>
        <script type="text/javascript" src="my-script.js"></script> 
    </head>
    <body>
        <div id="user-greeting">환영합니다!</div>
    </body>
</html>

Javascript:

// my-script.js 
document.addEventListener("DOMContentLoaded", function() {
    // this function runs when the DOM is ready, i.e. when the document has been parsed 
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

브라우저가 my-script.js가 다운로드되고 실행될 때까지 문서를 수정하지 않는다는 것을 브라우저가 알지 못하기 때문에 파서가 구문 분석을 중단합니다.

고전적인 방법

이 문제를 해결하기위한 이전 접근법은 <body> 맨 아래에 <script> 태그를 두는 것이 었습니다. 이렇게하면 파서가 맨 끝까지 차단되지 않기 때문입니다.

이 접근 방식에는 자체적 인 문제가 있습니다. 브라우저는 전체 문서가 구문 분석 될 때까지 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트 및 스타일 시트가있는 더 큰 웹 사이트의 경우 가능한 한 빨리 스크립트를 다운로드 할 수있는 것이 성능 향상에 매우 중요합니다. 웹 사이트가 2초 내에 로드되지 않으면 사람들은 다른 웹 사이트로 이동할 것 입니다.

최적의 솔루션에서 브라우저는 가능한 한 빨리 스크립트 다운로드를 시작하는 동시에 문서의 나머지 부분을 파싱합니다.

현대적인 접근법

오늘날 브라우저는 스크립트의 비동기 및 지연 특성을 지원합니다. 이러한 속성은 스크립트가 다운로드되는 동안 계속 구문 분석을하는 것이 안전하다는 것을 브라우저에 알려줍니다.

async

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

async 속성이있는 스크립트는 비동기 적으로 실행됩니다. 즉, 스크립트가 다운로드되는 즉시 브라우저가 차단되지 않고 실행됩니다.
이는 스크립트 2가 스크립트 1 이전에 다운로드 및 실행될 수 있음을 의미합니다.

http://caniuse.com/#feat=script-async 에 따르면 모든 브라우저의 90 %가이를 지원합니다.

defer

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

defer 속성을 가진 스크립트는 순서대로 (즉, 첫 번째 스크립트 1 다음에 스크립트 2) 실행됩니다. 이것은 또한 브라우저를 차단하지 않습니다.

defer는 비동기 스크립트와는 다르게 지연 스크립트는 전체 문서가 로드된 후에만 실행됩니다.

http://caniuse.com/#feat=script-defer 에 따르면 모든 브라우저 중 90 %가이를 지원합니다. 92 %는 적어도 부분적으로 그것을 지원합니다.

브라우저 호환성에 대한 중요한 참고 사항 : 일부 경우 IE <= 9는 지연된 스크립트를 순서대로 실행하지 않을 수 있습니다. 해당 브라우저를 지원해야하는 경우 먼저 읽으십시오!

결론

현재의 최신 기술은 스크립트를 <head> 태그에 넣고 async 또는 defer 속성을 사용하는 것입니다. 이렇게하면 브라우저를 차단하지 않고도 스크립트를 최대한 빨리 다운로드 할 수 있습니다.

좋은 점은 이 속성을 지원하지 않는 브라우저의 20%에서도 웹 사이트가 여전히 올바르게 로드 되며 나머지 80 %는 속도가 빨라진다는 것입니다.

매일매일 커밋하나씩