HTML 파일에 JavaScript 파일을 연결하는 방법은 아래와 같이 head 요소 내에 script 요소를 작성하는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Linked JavaScript in HTML</title>
<script src="main.js">
console.log('Hello World!');
</script>
</head>
<body>
</body>
</html>script요소의 소스코드로 main.js를 넣은 것을 확인할 수 있다.
잠깐! 이렇게 작성한 경우 어떻게 브라우저는 이 파일을 렌더링할까??
STEP1) 브라우저가 html 파일을 다운받고, html 선언(DOCTYPE html)에서부터 한 줄씩 내려가며 동작하게 된다.
STEP2) script요소를 만나면, js파일이 있어야함을 확인하고 html 파일을 읽어나가는 작업을 일시중지하게 된다.
STEP3) js 파일을 브라우저 상에 fetching한 뒤에 js 파일을 실행한다.
STEP4) js 파일을 모두 실행한 뒤에 다시 일시정지하였던 html 파일을 읽어나가면서 한 줄씩 실행하며 내려간다.
여기서 만일 js 파일이 극단적으로 너무 큰 파일이거나 처리해야하는 작업이 많은 경우에는 브라우저 상에 웹 페이지가 렌더링되는 과정에서 너무나도 많은 시간을 소요하게 된다.
이 문제점을 해결하기 위해서는 어떻게 해야할까?
이에 대한 해결책은 바로 "defer"을 이용하는 것이다.
defer를 script 요소에 넣은 경우에는 다음과 같이 동작하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Linked JavaScript in HTML</title>
<script src="main.js" defer>
console.log('Hello World!');
</script>
</head>
<body>
</body>
</html>STEP1) 브라우저가 html 파일을 다운받고, html 선언(DOCTYPE html)에서부터 한 줄씩 내려가며 동작하게 된다.
STEP2) script요소를 만나면, js파일이 있어야함을 확인하고 js 파일을 fetching(다운로드) 시킨 상태에서 중단 없이 html 파일을 읽어나가는 작업하게 된다.
STEP3) html 파일을 모두 읽고 실행한 뒤에, 웹 페이지가 완성되면 js 파일을 실행하게 된다.
defer 방식을 이용하게 되면 브라우저가 js파일을 다운로드 받는 시간동안 html 파일의 작업을 계속 수행한다는 장점이 이기 때문에 대부분의 웹 페이지는 defer 방식을 사용하고 있다.
NOTE: async 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Linked JavaScript in HTML</title>
<script src="main.js" async>
console.log('Hello World!');
</script>
</head>
<body>
</body>
</html>defer 외에 async 방식을 사용하는 경우도 있는데 async 방식의 동작은 다음과 같이 이루어진다.
STEP1) 브라우저가 html 파일을 다운받고, html 선언(DOCTYPE html)에서부터 한 줄씩 내려가며 동작하게 된다.
STEP2) script요소를 만나면, js파일이 있어야함을 확인하고 js 파일을 fetching(다운로드) 시킨 상태에서 중단 없이 html 파일을 읽어나가는 작업하게 된다.
STEP3) js 파일의 fetching 작업이 끝나게 되면 바로 이어서 해당 js파일을 실행하기 위해 html 파일 parsing 작업을 중단하게 된다.
STEP4) js 파일 실행이 완료되었다면, 다시 중단되었던 html parsing 작업을 재개한다.
위의 단계에서 살펴본 바와 같이 async는 js파일의 실행을 fetching이 끝나고 그때 그때 실행한다는 점을 확인할 수 있다. 이는 js파일이 가벼운 경우 웹페이지의 완성과 동시에 모든 js 파일의 실행이 가능하다는 장점이 있다.
[참고자료]
1. 드림코딩 - 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) : 8분34초부터
'Study > JavaScript' 카테고리의 다른 글
| [자스 한스푼 ep.0] 시작하기에 앞서 (0) | 2022.11.28 |
|---|---|
| [JavaScript] var vs. let vs. const - (3) (0) | 2022.11.07 |
| [JavaScript] var vs. let vs. const - (2) (0) | 2022.11.07 |
| [JavaScript] var vs. let vs. const - (1) (0) | 2022.11.07 |
| [JavaScript] Hello World! 출력하기 (0) | 2022.03.15 |