Javascript를 HTML에 링크하는 방법
parsing HTML : 브라우저가 HTML을 한줄 한줄 읽으며 CSS와 병합해서 DOM요소로 변환
fetching.js : JS 파일 다운
executing.js : JS 파일 실행
<head>
별다른 예약어 없이 <head></head> 에 script 태그 기업
html 파일을 한줄 한줄 읽다가 -> <script>태그에서 parsing을 멈추고, Js 파일을 다운하고 실행-> 다시 나머지 html parsing
단점 : JS 파일의 크기가 크고, 인터넷의 속도가 느린 경우 사용자가 웹사이트를 보는데까지 많은시간까지 소요
<body>
html parsing을 다 마친 후에 -> JS 다운, 실행
장점: 사용자가 기본적인 HTML 컨텐츠를 빨리 볼 수 있다.
단점: 웹사이트가 JS에 의존적인 경우, 정상적인 페이지를 보려면 fetching부터 execting까지 전부 기다려야한다는 단점이 있음
<head+async>
1. 파싱 html과 함께 2. js를 동시에 패치 3. js 패치후에 바로 실행 4.나머지 html다시 파싱
async를 읽으면 js를 다운 받으라는 명령을 하고 다시 Parsing
다 다운을 받고 실행시킬때 Parsing 멈추고 js 실행
장점 : html파싱과 동시에 js 패치를 병렬하기 때문에 <body> 맨끝에 적을때보다 다운로드 시간을 더 절약할 수 있음
단점: JS가 html이 parsing 되기도 전에 실행되기 때문에, 만약 js파일에서 쿼리셀렉터로 DOM요소를 조작하는 경우
조작시점에 우리가 조작을 원하는 html의 요소가 아직 정의되어있지 않을 수도 있다
html을 pasing하는 과정에서 언제든지 html을 멈출 수 있기 때문에 사용자가 페이지를 볼때 여전히 시간이 좀 걸릴 수 있는 그런 단점이 있음
<head+defer>
async와 다르게 html을 읽어들이는 중간에 js를 실행시키는게 아니라 파싱이 끝나고 실행시킴
<head async+defer> 다수 스크립트 다운의 경우
<head+async>
정의가 된 스크립트 순서 상관없이 다운로드가 먼저 된 아이를 실행
만약 본인이 세운 js가 순서에 의존적이라면, b스크립트를 실행하는데 있어서 a가 먼저 선행이 되어야한다면 조금 문제가 생길 수 있음
<head+defer>
parsing하는 동안 필요한 js를 다 다운받아놓은 다음에
순서대로 js 실행
우리가 원하는대로 스크립트 선언 순서대로 실행가능
defer을 사용하는게 여러모로 훨씬 효율적이고 안전하다고 생각될 수 있음