👀 JavaScript의 연동
웹 브라우저는 HTML을 렌더링하는 과정에서 CSS 또는 JS를 만나면 동기적으로 처리. 이 말은 해당 내용이 해석되고 실행되기 전에는 뒤에 나오는 내용을 처리하지 않는다는 것. CSS는 화면을 랜더링하는데 필요한 정보이므로 웹페이지가 출력되기 전에 해석되는 것이 유리. JavaScript는 기능적 처리에 관련된 경우가 많으므로 처리를 지연하는것이 유리. 따라서 대부분 CSS는 <head> 영역에, JS는 </body> 바로 앞에 선언하는 것을 추천. async와 defer라는 속성도 사용 가능하며, defer이 대부분의 경우에 효율적
✔ <head> 영역
parse HTML -> fetch JS / execute JS -> parse HTML -> page loaded
*JS 파일의 용량이 크거나 인터넷이 느리면 페이지 로드 시간이 오래 걸린다
✔ <body> 영역
parse HTML -> page loaded -> fetch JS / execute JS
*기본적인 HTML의 컨텐츠를 빨리 로딩가능, 페이지가 JS 의존적이라면 의미가 없음
✔ head + async
<script async src="script.js">parse HTML -> found defer / start fetching / still parsing -> done fetching -> block parsing / execute js -> parse HTML -> page loaded
* parse HTML과 fetch JS를 병렬적으로 진행하므로 시간 절약 가능, parse HTML이 완성되기 전에 JS가 실행된다면 원하는 HTML 요소가 정의되지 않을 가능성, 여러개의 JS파일이 존재할 경우 원하는 순서대로 실행 불가
✔ head + defer
<script defer src="script.js">parse HTML -> found defer / start downloading / still parsing -> page loaded -> execute js
* 가장 효율적, parse HTML을 진행하면서 JS파일을 다운로드 받고, parse가 완료되면 JS파일을 순서대로 실행
✔ use strict
유연하다는 말은 위험하다는 말과 같다. 선언되지 않은 변수에 값을 할당하는 것과 같은 실수가 용인되는 것. use strict를 사용해 예상하지 못한 에러를 필터링하고 자바스크립트 엔진이 해당 코드를 효율적으로 분석할 수 있도록 도와줘 성능개선까지 가능. 제일 처음에 use strict를 정의할 것!
👍 참고 사이트
'- > js' 카테고리의 다른 글
| [JS] 자바스크립트 메모리 누수 (0) | 2021.06.19 |
|---|---|
| [JS] 비교 연산자 (0) | 2021.01.15 |
| [JS] self vs this (0) | 2021.01.15 |
| [JS] DOM (0) | 2021.01.15 |
| [JS] Hoisting (0) | 2021.01.14 |