자바스크립트를 처음공부할 때 단순히 놓치고 지나갔던 부분이 였던것 같아서, 이번에 복습을 하며 어떻게 HTML 코드에 자바스크립트를 포함해야 할지에 대해서 다시 정리를 해보았다. HTML을 처음 배우고 실습할 때 단순이 head에 스크립트 코드를 입력했었는데, 제대로 실행되지 않을 때도 있었고, 그래서 body 태그 맨 뒤에 스크립트를 넣었는데, 유일한 해결법이 아니라 더 효율적인 해결법이 있다는 것을 알았을 때는 매우 놀랐었다. HTML에 스크립트 코드를 삽입하는 방법을 크게 4가지로 나누어 알아보도록 하자.
1. <head> 안에 <script>
자바스크립트는 parser blocking resource(파서 차단 리소스)이다.
asynce, defer 모두 사용하지 않은 기본 모드로 브라우저는 문서를 파싱해 읽다가 자바스크립트를 만나면 진행하고 있었던 파싱을 멈추고 스크립트를 다운-> 파싱 -> 실행한 후 다시 문서를 파싱하게 된다. 자바스크립트파일의 사이즈가 큰 경우에는 페이지가 로드 되는데 많은 시간이 소요되어 그냥 script를 head에 포함하는것은 좋지않다.
2. <body> 끝 부분 <script>
HTML을 쭉 파싱해서 페이지가 준비된 다음에 script를 만나서 서버에서 받아오고 실행하게된다. 사용자가 기본적인 HTML컨텐츠를 빨리 본다는 장점은 있지만 자바스크립트 의존성이 큰 페이지인 경우, 사용자가 정상적으로 작동하는 웹 페이지를 보지는 못한다.
3. <script + async>
브라우저가 HTML을 파싱하다가 async을 확인하고 병렬로 다운로드를 명령만 해놓고 다시 파싱을 하고 JS 파일이 다운로드되면 그때 파싱을 멈추고 다운로드된 JS 파일을 실행하게된다. 이후 실행을 다하고나서 나머지 HTML을 파싱하게된다.
4. <script + defer>
브라우저가 defer 스크립트를 만났을 때 스크립트를 다운로드하지만 문서 파싱을 멈추지 않고 끝까지 수행하고 스크립트는 </httml> 태그를 만났을 때 실행한다. 일반 스크립트를 <body> 태그의 맨 마지막 줄에 위치시켜 작성하는 것과 비슷한 효과를 준다.
결론적으로 defer 를 추가한 script 태그를 사용하는 것이 제일 효율적이니, 왜! 효율적인지 알고 사용하는 개발자가 되도록 하자!
'개발 > Java Script' 카테고리의 다른 글
| [Java Script] 변수 호이스팅 (feat. var, let, const) (0) | 2022.11.13 |
|---|---|
| [Java Script] 자바스크립트 엔진, 렌더링 엔진 무슨 차이일까? (0) | 2022.11.11 |
| [Java Script] DOM, BOM 이란? (0) | 2022.11.09 |
| [Java Script] ECMAScript 브라우저 환경 vs node.js 환경 (0) | 2022.11.07 |
| [Java Script] 자바스크립트의 특징 (0) | 2022.10.31 |