728x90
알로하~ javascript 배워봅시다~!
1. <head> 안에 옵션없는 일반 스크립포함
<!DOCTYPE html>
<html lang="ko">
<head>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
</head>
<body>
</body>
</html>로드순서
HTML 파싱 → <head>에서 JS파일 발견 → HTML 파싱 멈춤 → JS 패칭 → JS 실행 → 다시 HTML파싱
장단점
단점 : 위의 로드 순서대로 JS파일이 크거나 , 인터넷이 느리면 사용자가 웹사이트를 보기까지 오래 걸림.
2. body 끝에 일반 스크립트 포함
<!DOCTYPE html>
<html lang="ko">
<head>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
</head>
<body>
<script src="main.js"></script>
</body>
</html>로드순서
BODY태그 끝까지 HTML 파싱 → JS파일 발견 → JS 패칭 → JS 실행
장단점
장점 : HTML 컨텐츠를 빠르게 본다는 장점
단점 : 의미있는 컨텐츠가 JS파일에 의존적이면 사용자가 기다려야 한다.
3. <head> 안의 <script async...> </script>
<!DOCTYPE html>
<html lang="ko">
<head>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="mainA.js"></script>
<script async src="mainB.js"></script>
<script async src="mainC.js"></script>
</head>
</head>
<body>
</body>
</html>로드 순서
HTML 파싱 → HTML파싱 멈춤 → 다시 HTML 파싱
JS파일패칭 → JS파일실행
위의 방법으로 여러개의 JS파일을 수행 할 경우. 패칭은 병렬로 수행되지만. 실행은 패칭 완료된 순서대로 실행 되므로 수행의 파악의 어려움이 있다.
장단점
장점 : JS 패칭과 HTML 파싱이 병렬적으로 일어나서 다운로드 시간을 줄인다
단점 : JS가 HTML이 파싱되기도 전에 실행되기에 JS파일과 관련된 HTML의 요소가 파싱되지 않아 정의 되지 않았을경우 페이지 로드의 위험이 있다.
4. <head> 안의 <script defer...> </script> (기본적으로 가장좋은방법)
<!DOCTYPE html>
<html lang="ko">
<head>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="mainA.js"></script>
<script defer src="mainB.js"></script>
<script defer src="mainC.js"></script>
</head>
</head>
<body>
</body>
</html>로드순서
HTML 모두다 파싱 → 패칭된 JS파일 실행
JS 패칭 →
HTML파싱과 JS패칭이 병렬로 수행됨.
위의 방법으로 여러JS파일을 수행 할 경우. 패칭은 병렬로 동시에 일어나고. 실행의 순서는 절차적으로 위에서부터 아래로 수행된다.
장단점
장점 : HTML파싱과 JS패칭을 병렬로 수행한 후 마지막에 JS파일 실행
'공부 > JAVASCRIPT' 카테고리의 다른 글
| [javascript] 클래스(class) (0) | 2021.03.08 |
|---|---|
| [javascript] 함수 (function) (0) | 2021.03.08 |
| [javascript] 조건문, 반복문 (0) | 2021.03.07 |
| [javascript] 연산자, 할당연산자, 비교연산자, 동등연산자, 논리연산자, 삼항연산자 (0) | 2021.02.28 |
| [javasciprt] 데이터 타입 및 기본 코딩법 (0) | 2021.02.28 |