본문 바로가기

JavaScript/Behind the Scenes

HTML에 자바스크립트 파일 로드하기

-웹 브라우저는 HTML를 파싱하는 과정에서 <script> 요소를 만나면 HTML 해석을 잠시 멈추고 스크립트 파일을 불러오고 실행시킨다.

-<script> 태그는 <head>와 <body> 요소에 추가할 수 있는데, 일반적으로 </body> 바로 위에 작성한다.

-<head>에 삽입하면 화면이 멈추는 현상이 발생함

 

-스크립트 요소의 속성

  1. async: 비동기적으로 스크립트를 내려 받는다. 위 그림처럼 스크립트를 불러오는 중에 html 파싱은 중단되지 않는다. 외부 스크립트 파일을 불러올 때만 유효하다. 

  2. defer: 스크립트 태그의 위치에 상관없이 html을 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연한다.

  3. src: 외부 파일의 위치를 지정한다.

  4. type: 스크립트 언어의 컨텐츠 타입을 지정한다. 기본값은 text/javascript이다.

 

'JavaScript > Behind the Scenes' 카테고리의 다른 글

Hoisting  (0) 2022.07.30
Event Loop  (0) 2022.07.28
Execution Context & Scoping  (0) 2022.07.11
-JavaScript-  (0) 2022.07.11