- 들여쓰기는 2칸이 최근 국룰
- alt키+방향키와 함께 코드블럭 이동 가능
script의 선언 위치
script태그를 이용해 js를 불러올 때, body맨 끝에 script를 삽입한다면 사용자가 기본적인 HTML컨텐츠를 빨리 본다는 장점은 있지만
자바스크립트 의존성이 큰 페이지인 경우, 사용자가 정상적으로 작동하는 웹 페이지를 보지는 못한다.(스크립트를 다운로드하고 실행하는 데에 시간이 걸리기 때문)
따라서 주로 head태그 안에 script를 삽입한다.
그래서 head안에 script를 넣었는데 오류가 난다?
js는 html과 동시 다발적으로 파싱이 된다.
(파싱 : 웹페이지의 밑그림을 그리는 작업, 우리 눈에 무언가가 보여주는 파싱 이후 진행되는 painting과는 다르다.)
하지만, js가 파싱이 되는 순간 html의 파싱을 막고, js가 파싱된 내용이 실행 된 후 다시 html의 파싱이 시작된다.
하지만 그러면 html의 파싱 속도가 현저히 느려지기 때문에, 이를 막기 위해 async, defer를 이용함!
async는 언제 쓰는데?
async은 html해석을 멈추지 않고 스크립트 다운을 시작한다. 이후 다운로드가 완료되면 바로 js를 실행하기 때문에 defer보다는 빨리 js를 사용할 수 있다.
단, 실행 단계에서 html의 파싱을 blocking하기 때문에, 만약 이후 js 내에서 쿼리셀렉터 등 html을 조작해야하는 내용이 담겨있다면 오류가 발생할 수 있다.
=> html 내부 요소를 조작하는 코드가 없고, 미리 다운받아야 하는 것들이 있다면(ex-라이브러리) async를 쓰자
defer는?
defer의 경우 html 파싱이 완료된 후, js 다운로드를 시작하고 맨 마지막에 실행을 한다.
(defer = 나중에 이 js를 활용해달라는 의미)
....
<head>
.....
<script defer src="/js/index.js"></script>
</head>=> html 내부 요소를 조작하는 코드가 없다면 async를 쓰자
엥? defer랑 <script/><body>랑 차이가 없지않음?
그러면 defer는 나중에 다운받고 실행되는건데 body끝에 script선언하는거랑 뭔 차이지 싶다.
다시 정리해보자.
한 줄로 말하면 'defer가 훨씬 먼저 다운로드받을 수 있다'임
defer은 head태그(html 앞부분)부터 js 다운로드가 시작되는데,
후자의 경우는 body의 파싱이 끝나고나서 js 다운로드가 시작됨=> 더 오래걸림
