브라우저가 <script>태그가 있는 웹 사이트를로드하면 어떻게됩니까 ?
- HTML 페이지를 가져옵니다 (예 : index.html)
- HTML 파싱 시작
- 파서가
<script>외부 스크립트 파일을 참조하는 태그를 발견했습니다 .
- 브라우저가 스크립트 파일을 요청합니다. 그 동안 파서는 페이지의 다른 HTML 파싱을 차단하고 중지합니다.
- 얼마 후 스크립트가 다운로드되어 실행됩니다.
- 구문 분석기는 나머지 HTML 문서를 계속 구문 분석합니다.
4 단계는 사용자 경험을 저하시킵니다. 웹 사이트는 기본적으로 모든 스크립트를 다운로드 할 때까지로드를 중지합니다. 사용자가 싫어하는 것이 있다면 웹 사이트가로드되기를 기다리는 것입니다.
왜 이런 일이 발생합니까?
모든 스크립트는 document.write()다른 DOM 조작을 통해 자체 HTML을 삽입 할 수 있습니다 . 이는 파서가 스크립트가 다운로드되어 실행될 때까지 기다려야 문서의 나머지 부분을 안전하게 파싱 할 수 있습니다. 결국, 스크립트 는 문서에 자체 HTML을 삽입했을 수 있습니다.
그러나 대부분의 JavaScript 개발자 는 문서가로드 되는 동안 더 이상 DOM 을 조작하지 않습니다 . 대신 문서를로드하기 전에 문서를 수정하기 전에 기다립니다. 예를 들면 다음과 같습니다.
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
자바 스크립트 :
// 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가 문서를 다운로드하여 실행할 때까지 문서를 수정하지 않는다는 것을 모르기 때문에 파서는 구문 분석을 중지합니다.
낡은 추천
이 문제를 해결하는 기존의 접근 방식 <script>은의 맨 아래에 태그 를 넣는 <body>것이 었습니다. 이는 파서가 끝날 때까지 차단되지 않기 때문입니다.
이 방법에는 자체 문제가 있습니다. 전체 문서를 파싱 할 때까지 브라우저에서 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트 및 스타일 시트가있는 더 큰 웹 사이트의 경우 가능한 빨리 스크립트를 다운로드 할 수 있어야 성능이 매우 중요합니다. 웹 사이트가 2 초 이내에로드되지 않으면 사람들은 다른 웹 사이트로 이동합니다.
최적의 솔루션에서 브라우저는 가능한 한 빨리 스크립트를 다운로드하기 시작하면서 동시에 나머지 문서를 구문 분석합니다.
현대적인 접근
오늘날 브라우저 는 스크립트 에서 async및 defer속성을 지원합니다 . 이러한 속성은 스크립트가 다운로드되는 동안 브라우저를 구문 분석하는 것이 안전하다는 것을 브라우저에 알려줍니다.
비동기
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
async 속성을 가진 스크립트는 비동기 적으로 실행됩니다. 즉, 스크립트는 다운로드하는 즉시 브라우저를 차단하지 않고 실행됩니다.
이는 스크립트 1보다 먼저 스크립트 2를 다운로드하여 실행할 수 있음을 의미합니다.
http://caniuse.com/#feat=script-async 에 따르면 모든 브라우저의 97.78 %가이를 지원합니다.
연기하다
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
defer 속성을 가진 스크립트가 순서대로 실행됩니다 (즉, 첫 번째 스크립트 1, 그런 다음 스크립트 2). 또한 브라우저를 차단하지 않습니다.
비동기 스크립트와 달리 지연 스크립트는 전체 문서가로드 된 후에 만 실행됩니다.
http://caniuse.com/#feat=script-defer 에 따르면 모든 브라우저의 97.79 %가이를 지원합니다. 98.06 %가 최소한 부분적으로 지원합니다.
브라우저 호환성에 대한 중요한 참고 사항 : 일부 상황에서 IE <= 9는 지연된 스크립트를 순서대로 실행할 수 있습니다. 당신이 그 브라우저를 지원해야하는 경우, 읽어 보시기 바랍니다 이 처음!
결론
현재의 최신 기술은 <head>태그 에 스크립트를 넣고 async또는 defer속성을 사용하는 것입니다. 이를 통해 브라우저를 차단하지 않고도 스크립트를 최대한 빨리 다운로드 할 수 있습니다.
좋은 점은 웹 사이트가 이러한 속성을 지원하지 않는 다른 2 %의 브라우저에서 여전히 98 %의 속도를 유지하면서 올바르게로드되어야한다는 것입니다.