개발에 AtoZ까지

안녕하세요 😀 한동안 웹 최적화에 대해서 관심이 있었는데 그 분야와 연관성이 있는 defer와 async에 대해서 알아보겠습니다. 글은 크게 아래와 같은 소주제로 진행하겠습니다. JS는 언제 다운로드 받을까? defer / async 의 정의와 어떤 차이가 있을까? 각 속성을 적절하게 사용하는 방법은 뭘까? 마무리 JS는 언제 다운로드 받을까? 일전에 브라우저 렌더링 하는 과정에 대해서 공유해 드린 적이 있는데 그 부분에서 HTML이나 CSS에 대해서는 언급이 있었지만, JS에 대한 언급은 없었습니다. 그래서 JS는 언제 다운로드 받고 어떻게 적용되는지 궁금하실 수도 있을거 같아요. 보통 HTML을 다운로드 받고 HTML에서 import 한 JS를 다운로드 받습니다. 그런데 JS는 항상 같은 순서로 다운..

◆목표 JS Import 하는 방법과 차이점 HTML에 Import 하는 방법 1) Head 태그에 JS를 import 하는 방법 2) Body 태그에 JS를 import 하는 방법 3) Head 태그에 async를 붙여서 JS를 import 하는 방법 4) Head 태그에 defer를 붙여서 JS를 import 하는 방법 Import 방법별 브라우저 파싱 단계 및 특징 Head 태그에 JS를 import 하는 방법 html 파일을 위에서부터 순차적으로 파싱하다가 head 부분에 있는 script 태그를 만나면 해당 src에 있는 파일을 다운로드 한다. parsing HTML. => blocked (fetching js / executing js 파일 다운) => parsing HTML 단점: 만약 다운..