질문 : 어디에 넣어야하나요 <script> tags in HTML markup?
HTML 문서에 JavaScript를 포함 할 때 <script> 태그와 포함 된 JavaScript를 배치 할 적절한 위치는 어디입니까? <head> 섹션에 배치해서는 안된다는 것을 기억하는 것 같지만, 페이지가 완전히 렌더링되기 전에 JavaScript가 파싱되어야하기 때문에 <body> 섹션의 시작 부분에 배치하는 것도 나쁘다. 또는 그런 것). <script> 태그의 논리적 위치로 <body> 섹션의 끝 을 남겨 두는 것 같습니다.
그렇다면 <script> 태그를 넣을 올바른 위치 는 어디입니까?
(이 질문은 JavaScript 함수 호출을 <a> 태그에서 <script> 태그로 이동해야한다는 제안이있는 이 질문을 참조합니다. 특히 jQuery를 사용하고 있지만보다 일반적인 답변도 적절합니다.)
답변
<script> 태그가있는 웹 사이트를로드하면 다음과 같은 일이 발생합니다.
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가 다운로드 및 실행될 때까지 문서를 수정하지 않을 것이라는 것을 모르기 때문에 파서는 파싱을 중지합니다.
이 문제를 해결하기위한 이전 접근 방식은 <body> 맨 아래에 <script> 태그를 넣는 것이 었습니다. 이렇게하면 파서가 끝까지 차단되지 않기 때문입니다.
이 방법에는 고유 한 문제가 있습니다. 브라우저는 전체 문서가 구문 분석 될 때까지 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트와 스타일 시트가있는 대규모 웹 사이트의 경우 가능한 한 빨리 스크립트를 다운로드 할 수있는 것이 성능에 매우 중요합니다. 웹 사이트가 2 초 이내에로드되지 않으면 사람들은 다른 웹 사이트로 이동합니다.
최적의 솔루션에서 브라우저는 가능한 한 빨리 스크립트 다운로드를 시작하는 동시에 나머지 문서를 구문 분석합니다.
오늘날 브라우저는 스크립트 async 및 defer 이러한 속성은 스크립트가 다운로드되는 동안 계속 구문 분석을 수행하는 것이 안전하다는 것을 브라우저에 알려줍니다.
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>async 속성이있는 스크립트는 비동기 적으로 실행됩니다. 즉, 그 동안 브라우저를 차단하지 않고 스크립트가 다운로드되는 즉시 실행됩니다.
이는 스크립트 2가 스크립트 1보다 먼저 다운로드 및 실행될 수 있음을 의미합니다.
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는 지연된 스크립트를 순서없이 실행할 수 있습니다. 당신이 그 브라우저를 지원해야하는 경우, 읽어 보시기 바랍니다 이 처음!
(자세히 알아보고 비동기, 지연 및 일반 스크립트의 차이점에 대한 유용한 시각적 표현을 보려면이 답변의 참조 섹션에서 처음 2 개의 링크를 확인하십시오)
현재 최신 기술은 <head> async 또는 defer 속성을 사용하는 것입니다. 이렇게하면 브라우저를 차단하지 않고도 스크립트를 최대한 빨리 다운로드 할 수 있습니다.
좋은 점은 다른 98 %의 속도를 높이면서 이러한 속성을 지원하지 않는 브라우저의 2 %에서는 웹 사이트가 올바르게로드되어야한다는 것입니다.
출처 : https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| node.js에서 파일을 한 번에 한 줄씩 읽는 방법 (0) | 2021.07.29 |
|---|---|
| JavaScript에서 변수가 배열인지 확인 하는 방법 (0) | 2021.07.29 |
| JavaScript에서 큰 따옴표 또는 작은 따옴표 사용 시기 (0) | 2021.07.28 |
| HTML에서 ID와 name 속성의 차이점 (0) | 2021.07.28 |
| HTML5 section/header/aside/article 를 사용하는 모범 사례 (0) | 2021.07.28 |