티스토리 뷰
<script>
<script> 태그를 이용하여 .html 문서에 js 파일을 포함(?)시킨다.
<script>의 위치나 속성 값에 따라 실행 순서 및 속도가 차이가 있으므로 이를 고려하여 작성해야 한다.
① <head> 에 선언
아래 코드의 단점은 js 파일의 사이즈가 크거나 인터넷 속도가 느린 겨우 사용자가 해당 사이트의 기본 HTML구조를 보는데 오랜 시간이 걸릴 수도 있다는 것이다.
<head>
<script src="main.js"></script>
</head>| parsing HTML | blocked | parsing HTML | |
| feching js | execuring js | ||
② <body> 에 선언
사용자가 기본적인 HTML 컨텐츠를 빨리 본다는 장점이 있지만, 만약 해당 사이트가 자바스크립트에 굉장히 의존적인 사이트라면 js가 정상적으로 실행될 때까지 기다려야 하는 단점이 있다.
<head>
</head>
<body>
<script src="main.js"></script>
</body>| HTML parsing | feching js | executing js |
③ <head> 에 선언 + asyn 속성
html parsing 과 js 다운로드가 병렬적으로 이루어져, <body>에 태그 안에 넣는거보다 시간 단축이된다. 하지만 자바스크립트 실행될 때 해당 요소가 아직 parsing 되지 않았을 수도 있어서 해당 js 코드가 정상적으로 실행되지 않을 수도 있다..
또한, 여러 js 파일을 링크거는 경우, 선언된 순서대로 실행되는 것이 아니라 다운로드된 순서대로 실행되므로 혹시라도 순서대로 실행되어야 하는 경우 defer 속성을 이용한 것이 좋다.
<head>
<script asyn src="main.js"></script>
</head>
| parsing HTML | blocked | parsing HTML | |
| fetching js | executing js | ||
④ <head> 에 선언 + defer 속성 ✨
html 파싱과 js 다운로드가 병렬적으로 진행되며, 모든 js 파일 다운로드 후 실행된다.
여러 js 파일인 경우 다운로드 순서가 아니라 작성된 순서대로 실행된다.
이 조합이 제일 좋음..
<head>
<script defer src="main.js"></script>
</head>| paring html | executing js |
| fetching js |
use strict
JavaScript 의 제한된 버전을 선택하여 암묵적인 sloppy mode 를 해제하기 위한 방법입니다.
'Javascript' 카테고리의 다른 글
| Javascript - Callback function, First-Class function (0) | 2021.09.01 |
|---|---|
| Javascript - function, parameter (0) | 2021.09.01 |
| Javascript - 논리연산자 (0) | 2021.08.28 |
| Javascript - 자료형 (0) | 2021.08.28 |
| Javascript - 변수 선언 (0) | 2021.08.27 |