질문자 :mipadi
HTML 문서에 JavaScript를 포함할 때 <script> 태그와 포함된 JavaScript를 어디에 넣어야 합니까? <head> 섹션에 배치하면 안 된다는 것을 기억하는 것 같지만, 페이지가 완전히 렌더링되기 전에 JavaScript를 구문 분석해야 하기 때문에 <body> 섹션의 시작 부분에 배치하는 것도 좋지 않습니다( 또는 이와 유사한 것). <body> 섹션의 끝 <script> 태그의 논리적 위치로 남겨두는 것 같습니다.
그렇다면 <script> 태그를 넣을 적절한 위치 는 어디일까요?
(이 질문에 참조 이 질문 은 자바 스크립트 함수 호출에서 이동해야한다고 제안되었던, <a> 태그 <script> 태그. 내가 특별히 jQuery를 사용하고 있지만,보다 일반적인 답변도 적합합니다.)
<script> 태그가 있는 웹사이트를 로드할 때 발생하는 일입니다.
<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, ie 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 속성을 사용하는 것입니다. 이렇게 하면 브라우저를 차단하지 않고 스크립트를 최대한 빨리 다운로드할 수 있습니다.
좋은 점은 이러한 속성을 지원하지 않는 2%의 브라우저에서 웹사이트가 여전히 올바르게 로드되고 나머지 98%는 속도가 빨라진다는 것입니다.
에 명시된 대로 닫기 본문 태그 바로 앞에
http://developer.yahoo.com/performance/rules.html#js_bottom
스크립트를 맨 아래에 두기
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP/1.1 사양은 브라우저가 호스트 이름당 병렬로 2개 이하의 구성 요소를 다운로드할 것을 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드가 동시에 발생할 수 있습니다. 그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.
비차단 스크립트 태그는 거의 모든 위치에 배치할 수 있습니다.
<script src="script.js" async></script> <script src="script.js" defer></script> <script src="script.js" async defer></script>async 스크립트는 사용 가능한 즉시 비동기식으로 실행됩니다.deferasync defer 스크립트는 async가 지원되지 않는 경우 defer 동작으로 대체됩니다.이러한 스크립트는 문서가 준비된 후에 비동기적으로 실행됩니다. 즉, 다음을 수행할 수 없습니다.
<script src="jquery.js" async></script> <script>jQuery(something);</script> <!-- * might throw "jQuery is not defined" error * defer will not work either -->아니면 이거:
<script src="document.write(something).js" async></script> <!-- * might issue "cannot write into document from an asynchronous script" warning * defer will not work either -->아니면 이거:
<script src="jquery.js" async></script> <script src="jQuery(something).js" async></script> <!-- * might throw "jQuery is not defined" error (no guarantee which script runs first) * defer will work in sane browsers -->아니면 이거:
<script src="document.getElementById(header).js" async></script> <div id="header"></div> <!-- * might not locate #header (script could fire before parser looks at the next line) * defer will work in sane browsers -->하지만 비동기 스크립트는 다음과 같은 이점을 제공합니다.
콜백을 지원하는 외부 스크립트를 사용하여 실행 순서 문제를 우회할 수 있습니다. 많은 타사 JavaScript API가 이제 비차단 실행을 지원합니다. 다음은 Google Maps API를 비동기적 으로 로드하는 예입니다.
Yahoo!가 홍보하는 표준 조언! Exceptional Performance 팀은 페이지 렌더링을 차단하지 않도록 문서 본문 끝에 <script>
그러나 Google Analytics JavaScript 파일의 로드 시간에 대한 이 답변 에 설명된 대로 더 나은 성능을 제공하는 몇 가지 새로운 접근 방식이 있습니다.
Steve Souders(클라이언트 측 성능 전문가)의 다음과 같은 훌륭한 슬라이드가 있습니다.
- 외부 JavaScript 파일을 병렬로 로드하는 다양한 기술
- 로딩 시간 및 페이지 렌더링에 미치는 영향
- 브라우저가 표시하는 "진행 중" 표시기의 종류(예: 상태 표시줄의 '로드 중', 모래시계 마우스 커서).
JQuery를 사용하는 경우 자바스크립트를 가장 잘 찾을 수 있는 위치에 놓고 $(document).ready() 를 사용하여 함수를 실행하기 전에 제대로 로드되었는지 확인합니다.
<head> 섹션에 있는 모든 스크립트 태그를 가장 좋아합니다.
2019년의 현대적인 접근 방식은 ES6 모듈 유형 스크립트를 사용하는 것 입니다.
<script type="module" src="..."></script>기본적으로 모듈은 비동기식으로 로드되고 지연됩니다. 즉, 아무 곳에나 배치할 수 있으며 병렬로 로드되고 페이지 로드가 완료되면 실행됩니다.
스크립트와 모듈의 차이점은 다음과 같습니다.
https://stackoverflow.com/a/53821485/731548
스크립트와 비교한 모듈 실행은 다음과 같습니다.
https://developers.google.com/web/fundamentals/primers/modules#defer
지원은 다음과 같습니다.
<script src="myjs.js"></script> </body>스크립트 태그는 HTML 파일의 본문 닫기 또는 하단 전에 항상 사용해야 합니다.
페이지는 html 및 css로 로드되고 나중에 js가 로드됩니다.
필요한 경우 이것을 확인하십시오 : http://stevesouders.com/hpws/rule-js-bottom.php
XHTML은 스크립트가 head 요소가 아닌 다른 곳에 있으면 유효성을 검사하지 않습니다. 어디에서나 가능하다는 것이 밝혀졌습니다.
jQuery와 같은 것으로 실행을 연기할 수 있으므로 배치 위치는 중요하지 않습니다(파싱 중 약간의 성능 저하 제외).
<script> 태그를 두는 가장 좋은 위치 </body> 태그를 닫기 전 이므로 다운로드하고 실행해도 브라우저가 문서의 html을 구문 분석하는 것을 차단하지 않습니다.
또한 js 파일을 외부에서 로드하면 브라우저에 캐시되고 페이지 로드 시간이 빨라지고 HTML과 JavaScript 코드를 분리 하고 코드 기반을 더 잘 관리할 수 있다는 장점이 있습니다.
async 및 외부 javascript defer 과 같은 다른 최적의 방법도 지원합니다.
일반적으로 HTML 페이지 실행은 한 줄씩 시작됩니다. 외부 JavaScript 요소가 발견되면 JavaScript가 다운로드되어 실행할 준비가 될 때까지 HTML 구문 분석이 중지됩니다. 이 일반 페이지 실행은 defer 및 async 속성을 사용하여 변경할 수 있습니다.
Deferdefer 속성을 사용하면 JavaScript는 HTML 파싱과 병렬로 다운로드되지만 전체 HTML 파싱이 완료된 후에만 실행됩니다.
<script src="/local-js-path/myScript.js" defer></script>Asyncasync 속성을 사용하면 스크립트를 만나는 즉시 JavaScript가 다운로드되고 다운로드 후에는 HTML 파싱과 함께 비동기(병렬)로 실행됩니다.
<script src="/local-js-path/myScript.js" async></script>async 사용하십시오.async 하여 script1 및 script2를 로드하는 경우 둘 다 실행됩니다.deferdefer 하여 script1과 script2가 순서대로 로드되면 script1이 먼저 실행되고,async 유형의 다른 스크립트에 종속되는 경우 속성이 없는 스크립트를 사용하고 모든 async 스크립트 위에 배치합니다.일반적인(그리고 널리 받아 들여지는) 대답은 "하단에"입니다. 그러면 실행을 시작하기 전에 전체 DOM이 로드되기 때문입니다.
페이지 onload 이벤트로 의도적으로 실행을 시작하는 사용 가능한 관행으로 시작하여 다양한 이유로 반대자가 있습니다.
페이지 스타일을 지정하는 데 필요한 스크립트를 로드하는 경우/페이지의 작업(예: 버튼 클릭)을 사용하는 경우에 따라 상단에 배치하는 것이 좋습니다. 스타일이 100% CSS이고 버튼 동작에 대한 모든 대체 옵션이 있는 경우 하단에 배치할 수 있습니다.
또는 가장 좋은 방법(문제가 되지 않는 경우)은 모달 로딩 상자를 만들고 페이지 하단에 자바스크립트를 배치하고 스크립트의 마지막 줄이 로드될 때 사라지게 할 수 있다는 것입니다. 이렇게 하면 스크립트가 로드되기 전에 페이지에서 사용자가 작업을 사용하는 것을 방지할 수 있습니다. 또한 부적절한 스타일링을 피하십시오.
마지막에 스크립트를 포함하는 것은 주로 웹사이트의 콘텐츠/스타일이 가장 먼저 보여지는 곳에 사용됩니다.
헤드에 스크립트를 포함하면 스크립트를 일찍 로드하고 전체 웹 사이트를 로드하기 전에 사용할 수 있습니다.
마지막으로 스크립트를 입력하면 빠른 반응형 웹사이트에 적합하지 않은 전체 스타일과 디자인을 로드한 후에야 유효성 검사가 수행됩니다.
스크립트와 그 사용법에 따라(페이지 로드 및 렌더링 시간 측면에서) 가장 좋은 방법은 기존의 <script> 태그 자체를 사용하지 않고 스크립트 로드를 비동기식으로 동적으로 트리거하는 것일 수 있습니다.
몇 가지 다른 기술이 있지만 가장 간단한 방법은 window.onload 이벤트가 트리거될 때 document.createElement("script")를 사용하는 것입니다. 그런 다음 페이지 자체가 렌더링될 때 스크립트가 먼저 로드되므로 사용자가 페이지가 나타날 때까지 기다려야 하는 시간에 영향을 주지 않습니다.
이것은 당연히 페이지의 렌더링에 스크립트 자체가 필요하지 않다는 것을 요구합니다.
자세한 내용은 Steve Souders(YSlow의 창시자이지만 현재 Google에 있음)의 Coupling async scripts 게시물을 참조하세요.
스크립트는 로드되고 실행될 때까지 DOM 로드를 차단합니다.
<body> 끝에 스크립트를 배치하면 모든 DOM이 로드 및 렌더링할 수 있습니다(페이지가 더 빨리 "표시"됨). <script> 는 이러한 모든 DOM 요소에 액세스할 수 있습니다.
반면에 <body> 시작 또는 그 위에 배치하면 스크립트가 실행됩니다(아직 DOM 요소가 없는 경우).
jQuery를 포함하고 있습니다. 즉, 원하는 곳에 배치하고 .ready()를 사용할 수 있습니다.
IE<10의 지원과 성능에 대해 여전히 많은 관심을 갖고 있다면 항상 스크립트 태그를 HTML 본문의 마지막 태그로 만드는 것이 가장 좋습니다. 그렇게 하면 DOM의 나머지 부분이 로드되고 차단 및 렌더링되지 않을 것임을 확신할 수 있습니다.
IE<10에 대해 더 이상 신경 쓰지 않는다면 문서의 헤드에 스크립트를 넣고 defer 를 사용하여 DOM이 로드된 후에만 실행되도록 할 수 있습니다( <script type="text/javascript" src="path/to/script1.js" defer></script> ). 코드가 IE<10에서 작동하도록 하려면 window.onload 에서도 코드를 래핑하는 것을 잊지 마십시오!
나는 그것이 웹 페이지 실행에 달려 있다고 생각합니다. 표시하고자 하는 페이지가 자바스크립트를 먼저 로드하지 않으면 제대로 표시되지 않는 경우 자바스크립트 파일을 먼저 포함해야 합니다. 그러나 JavaScript 파일을 처음 다운로드하지 않고 웹 페이지를 표시/렌더링할 수 있다면 페이지 하단에 JavaScript 코드를 넣어야 합니다. 빠른 페이지 로드를 에뮬레이트하고 사용자의 관점에서 볼 때 해당 페이지가 더 빨리 로드되는 것처럼 보이기 때문입니다.
<body> <script> 참조를 배치할 수 있습니다.
그러나 페이지에 외부 스크립트를 사용하는 활성 구성 요소가 있는 경우
그런 다음 종속성(js 파일)이 그 앞에 와야 합니다(이상적으로는 head 태그에 있음).
JavaScript 코드를 작성하기 가장 좋은 위치는 문서의 끝 부분에 있는 </body> 태그 바로 앞이나 뒤에서 먼저 문서를 로드한 다음 js 코드를 실행하는 것입니다.
<script> ... your code here ... </script> </body> 그리고 JQuery 하면 다음이 헤드 문서에 있을 수 있으며 문서가 로드된 후에 실행됩니다.
<script> $(document).ready(function(){ //your code here... }); </script>JavaScript 코드를 감싸는 <script> 를 사용하여 HTML 문서에 JavaScript 코드를 추가할 수 있습니다.
<script> 태그는 JavaScript를 로드하려는 시기에 따라 <head> 섹션, <body> 섹션 또는 </body>
일반적으로 JavaScript 코드는 HTML 문서의 주요 내용에서 제외되도록 유지하기 위해 <head>
document.write 를 사용하여 콘텐츠를 생성할 때와 같이 페이지 레이아웃 내의 특정 지점에서 스크립트를 실행해야 하는 경우 <body> 섹션 내에서 호출되어야 하는 지점에 스크립트를 배치해야 합니다.
출처 : http:www.stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
| 예쁜 Git 분기 그래프 (0) | 2022.02.07 |
|---|---|
| 유형 검사: typeof, GetType 또는 is? (0) | 2022.02.07 |
| 0.1f를 0으로 변경하면 성능이 10배 느려지는 이유는 무엇입니까? (0) | 2022.01.25 |
| 0과 9 사이의 임의의 정수 생성 (0) | 2022.01.25 |
| enctype='multipart/form-data'는 무엇을 의미합니까? (0) | 2022.01.25 |