코드를 정리하는 작업 중에 script태그 위치를 어디로 하는 게 좋을 지 몰라서 검색해봤더니
정리를 너무 잘해준 블로그 글이 있어서 내용을 담아왔다. 내가 숙지가 안된 내용이라 그냥 그대로 퍼 오는 게 더 정확한 정보를 습득할 수 있을 것 같아서 원문을 거의 그대로 옮겨왔다.
출처: https://epthffh.tistory.com/entry/html-안에-script-태그를-어느-위치에-삽입하는것이-가장-좋을까 [물고기 개발자의 블로그]
html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?
html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? 문득 궁금해서 찾아보았습니다. 다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다. 발번역이므로 오역은 댓글로 지적
epthffh.tistory.com
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> 태그를 두는 것이 었습니다.
이렇게하면 파서가 맨 끝까지 차단되지 않기 때문입니다.
BUT 이 접근 방식에는 자체적인 문제가 있습니다.
브라우저는 전체 문서가 구문 분석 될 때까지 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트 및 스타일 시트가있는 더 큰 웹 사이트의 경우 가능한 한 빨리 스크립트를 다운로드 할 수있는 것이 성능 향상에 매우 중요합니다. 웹 사이트가 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 %는 속도가 빨라진다는 것입니다.
'웹 > Front-end' 카테고리의 다른 글
| [React] ReactJS로 영화 웹 서비스 만들기 - ② JSX & PROPS (0) | 2021.06.19 |
|---|---|
| [React] ReactJS로 영화 웹 서비스 만들기 - ① 환경셋팅 (0) | 2021.06.19 |
| [HTML/CSS] 포트폴리오 페이지 - JS 소스코드 (1) | 2021.06.07 |
| [HTML/CSS] 포트폴리오 페이지 - CSS 소스코드 (0) | 2021.06.07 |
| [HTML/CSS] 포트폴리오 페이지 - HTML 소스코드 (0) | 2021.06.07 |
