자바스크립트를 효율성있게 포함하는 방법을 알아보자!
head에 스크립트를 포함하는 방법
- parsingHTML => 스크립트 불러옴 => parsingHTML
단점
js파일이 너무크면 웹사이트를 로딩하는데 많은 시간이 걸림
body에 스크립트를 포함하는 방법
- parsingHTML 다 불러온다음 => 스크립트불러옴
단점
기본적인 html을 볼 수 있는 장점이 있지만 웹사이트가 스크립트에 의존적이라면 dom요소들이 늦게 반응됨
head에 asyn옵션을 써서 스크립트를 포함하는 방법[<script async src=".js">]
- parsingHTML => 스크립트 =>parsingHTML
장점
html 불러오다가 병렬로 js파일을 다운받아서
다시 html불러오면서 js가 다 되면parsing을 멈추고 js를 실행해줌 그리고 html을 다시 parsing해줘서 좋음
다운받는 시간을 절약해줌!
단점
하지만 html parsing되기 전에 실행되기 때문에 조작하기 전에 html이 정리되지 않아 위험할 수 있고
parsing중에 js를 실행하기 위해서 언제든지 멈출 수 있어서 사용자가 페이지 전체를 보는데 시간이 걸릴 수 있음..
head에 defer옵션을 써서 스크립트를 포함하는 방법[<script defer src=".js">]
- parsingHTMl => 스크립트
장점
parsing중 defer js를 다운로드 받자고 명령해놓고 나머지 html을 끝까지 parsing한다 끝난 후 다운된 js를 실행해준다
가장 좋은 옵션!
async와 defer의 차이점
async로 다수의 js를 다운받게되면 a,b,c,d js파일이 있을때 b가 먼저 다운되다면 b를먼저 그 다음 다운된 순서대로 실행을 해주게 된다
즉 정리된 스크립트 순서대로가 아닌 다운로드 순서대로 실행해주게 된다
defer로 다수의 js를 받게되면 다 다운 받은 다음 실행이 되기 때문에 정리된 순서대로 js를 실행해주게 된다
defer 옵션으로 쓰게되는게 제일 안정적!!
실행 순서가 상관없다면 async를 써줘도 되고 순서가 필요하다면 defer로 써주면 된다
댓글