2022. 3. 12.ㆍ공부/JavaScript
- <head></head> 안에 넣기
js 파일이 크고, 인터넷이 느릴 시 웹사이트를 노출하기까지 많은 시간이 걸린다.
- <body></body> 안에 넣기
js에 의존적인 컨텐츠라면 사용자가 정상적인 페이지를 보기 전까지, 서버에서 자바스크립트를 보내고 받아오는 시간을 오래 기다려야 한다.
- <head></head> 안에 넣고 asyn라는 속성 이용하기
asyn(boolean, default:true)를 사용하게 되면 html 다운로드 전에 js 파일이 실행되게 된다. html 파싱과 js의 다운로드를 병렬로 처리하기 때문에 바디 끝에 사용하는 것보다는 다운로드 받는 시간을 절약할수 있지만, html 다운 전에 js가 실행되기 때문에 dom 조작 시점에 html이 정의되어있지 않을 수 있다.
[실행 순서]
1) 브라우저가 html을 순차적으로 파싱
2) 순차적으로 파싱하다가 asyn를 만나면 병렬로 js파일 다운로드 받자고 명령해놓고 동시에 html 순차적으로 파싱
3) js가 다운로드 되면, 파싱을 멈추고 다운로드된 js 파일을 실행 (이때 실행을 위해 멈출 수 있음)
4) 실행 다 한 후 나머지 html을 파싱
5) 사용자가 완전히 파싱된 페이지를 보게됨
- <head></head> 안에 넣고 defer라는 속성 이용하기
defer를 사용하게 되면 asyn와 같이 html과 js의 다운로드가 병렬처리되나, html 파싱을 마친 후 js 파일이 실행되게 된다.
[실행 순서]
1) 브라우저가 html을 순차적으로 파싱
2) 순차적으로 파싱하다가 defer를 만나면 병렬로 js파일 다운로드 받자고 명령해놓고 동시에 html 순차적으로 파싱
3) html을 끝까지 파싱한 후 html 파싱이 끝나면 사용자에게 페이지를 보여주고 다운받아놓은 js를 실행
| asyn 속성 | defer 속성 | |
| 공통점 | html과 js파일의 다운이 병렬적으로 처리됨 | |
| 차이점 | js파일 실행 후 html 다운로드 | html 다운로드 마친 후 js파일 실행 |
| 사용법 | html 의존성이 없는 코드에 권장 | DOM 조작하여 html 의존성이 있는 코드일 경우 권장 |
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] Arrow Function (0) | 2022.03.15 |
|---|---|
| [JavaScript] 이벤트 핸들러 이용한 아코디언 메뉴 구현 (jQuery) (0) | 2022.03.14 |
| [JavaScript] 이미지 슬라이더 구현 (0) | 2022.03.12 |
| [JavaScript] DOM Elements 조작 (0) | 2022.03.10 |
| [JavaScript] DOM (문서 객체 모델 : Document Object Model) (0) | 2022.03.08 |