2. async와 defer의 차이점은?

console 함수 : API(Node.js와 WebAPI에 인터페이스가 동일하게 존재)

  - WebAPI : 브라우저가 제공하는, 이해할 수 있는 함수

 

 

async와 defer의 사용

 : html에 Javascript를 포함할 때 사용

---

Html에 JavaScript 포함하는 법

 

1) head + <script src="자바스크립트 파일명.js"></script>

parsing HTML

blocked

parsing HTML

  - blocked 상태

fetching js

executing js

  - 브라우저가 html 파일을 한줄 한줄 분석하며 CSS 요소와 병합하여 DOM 요소로 변환

  - script 태그가 보이면 parsing을 멈추고, 필요한 자바스크립트 파일을 서버에서 다운받아 다시 parsing

 

 단점)

    - js 파일 크기가 크고, 인터넷이 느린 경우 사용자가 웹사이트 보는데 시간이 많이 걸림

 

2) body + <script src="자바스크립트 파일명.js></script>

parsing HTML

fetching js

executing js

 장점)

  - js 파일을 받기 전에도 기본적인 html 페이지가 준비되어 사용자가 볼 수 있음

 

 단점)

  - 웹사이트가 JavaScript에 의존적일 시 사용자가 fetching과 executing 시간을 기다려야 함

 

3) head + <script async src="자바스크립트 파일명.js"></script>

  + async은 Bool 타입의 속성값으로 true

parsing HTML

blocked

parsing HTML

   - blocked 상태

executing js

  - async script 태그를 만날 시 병렬로 자바스크립트 파일을 fetching

  - fetcing이 완료될 시에 parsing을 멈추고 executing 한 후에 나머지를 parsing

 

 장점)

   - body 끝에 선언하는 것보다 다운로드 시간을 절약할 수 있음

 

 단점)

   - 만약 JavaScript 파일에서 Query selector를 이용해 DOM 요소를 조작할 시

     HTML 파일이 전부 parshing 되지 않았기 때문에 원하는 요소가 정의되어 있지 않을 수 있음

   - parsing 중 자바스크립트 execute를 위해 멈출 수 있기에 사용자가 페이지를 보는데 시간이 여전히 걸림

 

반응형

 

4) head + <script defer src="자바스크립트 파일명.js"></script>

parsing HTML

executing js

 - parsing을 하다가 defer script 태그를 만날 시 병렬로 자바스크립트 파일을 fetching

 - parsing이 끝난 후 자바스크립트 파일을 executing

 - 가장 Best!!

---

async와 defer의 차이점 더 알아보기!

 - 다수의 스크립트를 다운받는 경우

 

1) head + async

parsing HTML

blocked

blocked

blocked

parsing HTML

 - 정의된 스크립트 순서에 상관없이 먼저 fetching 되는 파일을 execute

    -> 순서에 의존적이라면 문제 발생!

 

2) head + defer

parsing HTML

executing 1.js

executing 2.js

executing 3.js

 - parsing하는 동안 필요한 파일을 fetching 후 순서대로 execute

---

바닐라 JS를 사용하는 경우 

 - 'use strict'; 작성하기!

    - 선언되지 않은 변수 값 할당, 기존의 프로토타입 변경이 가능

    - ECMAScript 5에서 추가됨

    - strict 모드로 개발 시 자바스크립트 엔진이 효율적이고 빠르게 분석 -> 성능개선

 

---

async를 이용해서 했던 프로젝트에서 순서가 엉망으로 나타나서 골머리를 썩었던 기억이 있는데 이런 이유 때문이었다니.,,, 앞으로는 무조건 defer를 사용해야겠다. 

 

+ Visual Studio Code를 이용해 실습 중인데

확장 기능인 Open Live Server 통해 바로 브라우저를 열 수 있다는 걸 알게 되었다.. 충격!

단축키는 : ALT + L, ALT + O

 

++ html:5를 치면 자동으로 html에서 기본적으로 작성해야하는 코드가 생성되는거 나만 몰랐나,,, 충격!!

 

+++ 블로그에서 표 사용하기가 넘 어렵다,,ㅠ 쉽게 바꿔주세요,,,