본문 바로가기
관리자

Programming-[Frontend]/Javascript

[링크] 자바스크립트 파일 로딩 원리, 주의점

728x90
반응형

요약

HTML에서 DOM 구조를 파싱하고 있는데 script 파일들이 loading 되면 DOM 구조 파싱 이후 사용자에게 UI들이 표시되지 못한다. 다시말해 DOM 구조 파싱과 script는 동기적으로만 일어난다.

따라서 보통은 <body> 태그의 맨 마지막에 script 파일을 넣어준다.

 

HTML의 DOM 구조 생성과 script 파일 다운로드를 비동기적으로 처리하기 위해 async, defer를 사용하며

async는 다운로드가 완료되는대로 실행되고 script 태그간 순서가 지켜지지 않는다.

defer의 경우 순서대로 다운로드 되며, HTML DOM 구조가 완전히 파싱되고 나서야 실행된다.

 

 


 

링크

 

1) 웹클럽 - 브라우저의 역할과 스크립트의 로드 시점

 

브라우저의 역할과 스크립트의 로드 시점

브라우저는 어떻게 동작하는가? 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를

webclub.tistory.com

 

728x90
반응형