2021. 6. 28. 23:50ㆍ프로그래밍/웹관련
🌟드림코딩 엘리님의 youtube강의를 보고 공부한 내용을 정리한 포스팅입니다🌟
👉youtube강의 https://www.youtube.com/watch?v=tJieVCgGzhs
💡 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는게 효율적인가
1. <head>안에 script 포함하는 방법
🅰 ⬇ <head>
⬇ <meta charset="UTF-8" />
⬇ <title>Document</title>
🅱 ➡ <script src="app.js"></script>
⬇ </head>🅰 브라우저가 한줄씩 HTML parsing
🅱 script태그가 나오면 HTML parsing 하는 것을 잠시 멈추고, 필요한 자바스크립트(app.js)를 다운받고 실행한다.
그 다음 다시 HTML parsing
단점 💩
만약 자바스크립트 파일용량이 크고, 인터넷도 느리면 웹사이트를 보기까지 많은 시간이 소요된다.
2. <body>안에 script 포함하는 방법
🅰 ⬇ <body>
⬇ <div></div>
🅱 ➡ <script src="app.js"></script>
⬇ </body>페이지가 준비가 된 다음에 자바스크립트를 다운받고 실행한다.
장점 😀
사용자가 기본적인 HTML 컨텐츠를 빨리 볼 수 있다.
단점 💩
자바스크립트 의존적이라면, 사용자가 의미있는 컨텐츠를 보기 위해서 자바스크립트가 다 다운받아질 때까지 기다려야한다.
3. <head>안에 script 포함하는 방법 + async
🅰 ⬇ <head>
⬇ <meta charset="UTF-8" />
⬇ <title>Document</title>
🅱 ➡ <script async src="app.js"></script>
⬇ </head>🅰 브라우저가 한줄씩 HTML parsing
🅱 async가 있으면 병렬로 자바스크립트를 다운받게 된다
장점 😀
fetching이 HTML parsing하는 동안 병렬적으로 일어나기 때문에 자바스크립트를 다운 받는 시간을 절약할 수 있다.
단점 💩
HTML이 parsing이 되기 전에 자바스크립트가 실행될 수 있기 때문에 자바스크립트에서 HTML태그를 사용하는 조작하려는 시점에 원하는 HTML요소가 정의되지 않았을 수 있다.
4. <head>안에 script 포함하는 방법 + defer (✔)
🅰 ⬇ <head>
⬇ <meta charset="UTF-8" />
⬇ <title>Document</title>
🅱 ➡ <script defer src="app.js"></script>
⬇ </head>🅰 브라우저가 한줄씩 HTML parsing
🅱 defer 옵션이 있으면 자바스크립트를 다운로드 받는 것을 명령 후 HTML parsing이 끝난 다음에 자바스크립트를 실행시킨다.
장점 😀
fetching이 HTML parsing하는 동안 병렬적으로 일어나기 때문에 자바스크립트를 다운 받는 시간을 절약할 수 있다.
단점 💩
HTML이 parsing이 되기 전에 자바스크립트가 실행될 수 있기 때문에 자바스크립트에서 HTML태그를 사용하는 조작하려는 시점에 원하는 HTML요소가 정의되지 않았을 수 있다.
📌 async vs defer
<head>
// ...
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>async 옵션은 정의된 스크립트 순서와 상관없이 다운로드가 먼저 된 자바스크립트를 실행한다.
만약 자바스크립트가 순서에 의존적이라면 문제가 될 수 있다.
defer 옵션은 정의한 순서대로 다운받아 실행한다.
'프로그래밍 > 웹관련' 카테고리의 다른 글
| [node] setInterval, setTimeout, nextTick (0) | 2021.07.30 |
|---|---|
| [Web APIs] scrollBy, scrollTo, scrollIntoView (0) | 2021.06.29 |
| [Web APIs] 브라우저 좌표 - client X,Y 와 page X,Y 비교 (0) | 2021.06.28 |
| [Web APIs] 브라우저 좌표 - Element.getBoundingClientRect() (0) | 2021.06.28 |
| [Web APIs] Window 사이즈 (0) | 2021.06.28 |