#html에서 자바스크립트를 포함할 때 어떻게 포함하는것이 효율적인지
1. script가 <head>안에 있을 때
<head>안에 스크립트가 포함 되어 있을 때는 순차적으로 실행하기 때문에
parsing HTML - block(fetching js - executing js) - parsing HTML
HTML을 읽다가 head태그에서 스크립트 파일을 서버에서 다운받아서(fetching) 이것을 실행(executing)한 다음 다시 나머지 HTML을 읽게 된다.
이에 대한 단점은 JS파일이 크고 인터넷이 느리면 웹사이트를 보는데 많은 시간이 소모되기 때문에 좋은 방법은 아니다.
2. script가 <body>맨 끝에 있을 때
parsing HTML - featching js - executing js
브라우저가 HTML을 다운받아서 끝까지 다 읽은 후 페이지가 준비되면 스크립트 파일을 서버에서 다운받아서(fetching) 실행(executing)한다.
단점 : 사용자가 기본적인 HTML의 컨텐츠를 빨리 볼 수 있지만, 자바스크립트에 의존적인 사이트이거나 사용자가 의미있는 컨텐츠를 보기 위해서 자바스크립트를 이용해 서버에서 받아온다던지 DOM요소를 꾸미는 웹사이트라면 정상적인 페이지를 보기 전까지 기다려야 하는 시간이 생긴다.
3.script가 <head>태그 안에 있지만 async(에이씽크라고 부름) 속성값을 사용할 때
브라우저가 HTML을 다운받아서 읽다가(parsing) async스크립트문을 만나면 병렬로 js를 다운로드 받자고 하고 계속 HTML 파싱을 진행한다. 병렬로 처리된 js가 다운로드가 완료되면 HTML 파싱하던것을 멈추고 js파일을 실행시킨 후 나머지 HTML을 파싱한다.
장점 : JS파일을 다운로드 받는 시간을 절약할 수 있다.
단점 : 나머지 HTML이 파싱되기전에 자바스크립트 파일이 실행되기 때문에 쿼리셀렉트를 이용해 DOM요소를 조작할 경우 조작하려고 하는 시점에 HTML요소가 정의되지 않을 때의 위험할 요소가 있다. / 자바스크립트가 실행하는동안 HTML파싱이 멈추기 때문에 사용자가 완전한 페이지를 보기 까지 시간이 소요될 수 있다.
4. script가 태그 안에 있지만 defer(디퍼 부름) 속성값을 사용할 때(가장 좋은 옵션)
브라우저가 HTML을 다운받아서 읽다가(parsing) defer 스크립트문을 만나면 JS파일을 다운받자(fetching)라고 명령만 시켜놓고 HTML파싱을 끝까지 하고 다 끝낸 후에 JS파일을 실행(executing)시킨다.
5. 다수의 async사용과 defer 사용
1)다수의 async를 사용
script문의 순서에 상관없이 문저 다운로드 된 스크립트를 사용한다. 순서의존적 코드의 경우 문제가 된다.
2)다수의 defer사용
HTML 파싱하는 동안 JS파일을 모두 다운받아 놓은 다음에 파싱이 끝난 후 순서대로 실행하기 때문에 정리한 순서가 지켜진다. 원하는대로 실행시킬 수 있음
해당 글은 youtube 드림코딩 앨리의 자바스크립트 강좌 2번 영상을 보고 정리한 글 입니다.
'Javascript > JavaScript_스터디' 카테고리의 다른 글
| Geolocation / openweathermap.org 이용방법 (0) | 2022.08.14 |
|---|---|
| JSON.stringify()와 JSON.parse() (0) | 2022.08.12 |
| [JavaScript_DeepDive] 19. 프로토타입(1) (0) | 2022.03.31 |
| [JavaScript_DeepDive] 18. 함수와 일급 객체 (0) | 2022.03.28 |
| [JavaScript_DeepDive] 17. 생성자 함수에 의한 객체 생성 (0) | 2022.03.20 |
댓글