JS_basic2_(async_vs_defer)
본 내용은 Dream Coding Academy의 강의 내용입니다 Go to Dream Coding
2. 콘솔에 출력, script async와 defer의 차이점/공부방향
- 개발자 도구 또는 Node.js 에서 콘솔 출력이 가능한 이유!
- Console API를 지원하기 때문!!
- API(Application Programming Interface)란?
- WEB API는 브라우저가 제공하는 함수들!!
async vs defer
- head태그안에 script를 포함하게되면 사용자가 html파일을 다운 받을 때 브라우저가 한줄 한줄 분석(파싱)해서 css와 병합해 DOM요소로 변환함.
- 따라서 중간에 script태그가 있으면 파싱중에 js파일을 다운로드 받고 다시 파싱을 이어나간다
- 단점: js파일이 크거나 인터넷이 느릴경우 웹사이트를 보기까지 많은 시간이 걸린다.
- 흐름: parsing HTML -> blocked(fetching.js,executing.js) -> parsing HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="main.js"></script> </head> <body> </body> </html>
- body안에 script를 포함하는 방법
- 브라우저가 html을 쭉 다운받아 페이지 로딩을 하고 그 후에 js파일을 다운받아 페이지 컨텐츠를 빠르게 볼 수 있다.
- 단점: 자바스크립트에 의존적인 웹사이트일 경우 많은 대기시간 필요
- 흐름: parsing HTML (page is ready) -> fetching.js,executing.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div></div> <script src="main.js"></script> </body> </html>
- asyn 사용하는 방법 (default : true)
- 브라우저가 파싱중에 asyn를 만나면 병렬로 js를 다운받게 명령을 한다 다시 파싱을 하다가 js파일이 다운로드가 완료되면 파싱을 멈추고 js를 실행하고 파싱을 다시 시작한다.
- 장점: 병렬로 실행되어 다운로드 시간을 절약하는 장점이 있다.
- 단점1 : 셀렉터로 돔 요소를 선택하는 시점에 파싱이 되어있지 않을 수 있다.(병렬이기 때문에 순서가 안맞게 될 경우가 생긴다)
- 단점2 : 중간에 js실행시간이 있기 때문에 페이지 컨텐츠를 전부보는데 시간이 걸린다.
- 흐름: parsing HTML (동시:fetching.js) -> blocked (executing.js)->parsing HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script asyn src="main.js"></script> </head> <body> <div></div> </body> </html>
- defer
- 파싱중 defer를 만나면 다운로드 명령을 실행하고 전부 파싱을 한 후에 js를 실행 가장 효율적인 방법
- 흐름: parsing HTML (동시:fetching.js) -> executing.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script defer src="main.js"></script> </head> <body> <div></div> </body> </html>
- async 문제(다수의 async의 경우)
- 다운로드가 완료되는시점에 실행되기때문에 코드 작성순서와 상관없이 실행됨.(순서를 정할 수 없다)
- 따라서 필요한 js가 실행되지 않았을때 필요로하는 js파일에서 오류가 발생한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script> </head> <body> <div></div> </body> </html>
- 파싱하는동안 다 다운받고 작성 순서대로 실행한다. (순서정하기 가능!)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script defer src="a.js"></script> <script defer src="b.js"></script> <script defer src="c.js"></script> </head> <body> <div></div> </body> </html> - 순수 바닐라 스크립트 작성팁(use strict)
- 선언되지 않은 변수에 할당을 하거나, 기존의 프로토타입을 변경하는 등의 유연함이 위험성이 높다 따라서 아래처럼 사용을 하는것을 추천
- 상식범위에서 사용가능하며, JS 엔진이 더욱빠르게 분석해 성능도 향상!
'use strict'; console.log('Hello World!') let a; a = 6;