TIL 7. JS(async&defer)
📌 <script> tag가 head안에 있는 경우
☝🏻 보통 JavaScript와 HTML을 연결시킬 때, HTML과 CSS처럼 HTML의 파일 안에 script tag를 사용한다.(CSS는 link tag)
다만, 웹 페이지에 HTML을 열때 JavaScript는 script tag의 위치에 따라 전체적으로 실행되는 순서가 달라진다.
보통 <head>안에 <script> tag를 넣는 경우,
HTML을 parsing하다 <script>를 다운받고, 먼저 JavaScript를 실행한다. 그 후, 나머지 HTML을 다운받는다.
parsing HTML -> parsing HTML stop -> fetching JS
-> executing JS -> parsing HTML이 방식의 단점은 웹페이지 다운 속도가 상대적으로 느리다는 것이다.
📌 <script> tag가 body끝에 있는 경우
☝🏻 HTML을 빠르게 다운받고 마지막에 Script를 다운받아 적용시킨다.
parsing HTML -> fetching JS -> executing JS이 방법의 단점은 웹페이지가 한가지의 작업을 완료하고 다음 작업을 순처적으로 진행하기 때문에 시간의 소요가 상대적으로 크다.
📌 <script> tag안에 async attribute를 사용하는 경우
☝🏻 이 방법은 HTML을 parsing함과 동시에 script를 fetching해서 페이지를 다운받는데 시간을 줄일 수 있지만, 여전히 js fetching이후 실행할 때 HTML parsing이 멈추므로 시간이 약간 걸린다.
또한, HTML보다 js가 먼저 완료되는 것은 js를 적용할 HTML이 아직 없을 수 있어 오류가 날 가능성도 있다.
parsing HTML, fetching js ->
parsing HTML stop, executing js -> parsing HTML📌 <script> tag안에 defer attribute를 사용하는 경우
☝🏻 이 방법은 parsing HTML과 fetching js가 동시에 이루어지며, fetching js가 완료된 이후에도 HTML을 끝까지 parsing한다.
HTML이 parsing된 이후 바로 js를 실행하기 때문에 시간과 효율이 뛰어나다.
parsing HTML, fetching js -> executing jsAuthor And Source
이 문제에 관하여(TIL 7. JS(async&defer)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@syeon02/JavaScript-asyncdefer저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
