HTML에서 JavaScript를 링크하는 방법 비교

Jho·2022년 11월 24일
0

JavaScript

목록 보기
1/1
post-thumbnail

html 파일에 script태그로 JS파일을 링크할때 가장 효율적인 방법

1. head 태그안에 script를 추가하는 방식 vs body 태그의 끝에 script를 추가하는 방식

1-1. head태그 안에 script를 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

이 경우에는 사용자가 html 파일을 다운받았을때, 브라우저가 한줄씩 내려가며 코드를 파싱(분석)한다. 이렇게 파싱한 코드들을 css와 병합하여 DOM요소로 변환한다.

한줄씩 내려가며 파싱하다가, JS파일을 링크한 script 태그가 보이면, 파싱을 멈추고 필요한 JS파일을 서버에서 다운받고, 서버에서 실행한 다음에, 다시 파싱하는 부분으로 넘어간다.

  • 단점
    만약 JS파일이 매우 크거나, 사용자의 인터넷 환경이 느리다면, 사용자가 웹사이트를 보기위해 많은 시간이 소요되게 된다.

1-2. body태그의 끝에 script를 추가

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
			<!--  
				html 내용 
					-->
    <script src="main.js"></script>
  </body>
</html>

이 경우에는 브라우저가 html을 다운받고 파싱을 마쳐 페이지가 준비가 된 다음에 script를 링크하는 코드를 처리하게 되므로, 페이지가 나타난 이후에 script 파일을 서버에서 받아오고 실행하게 된다.

  • 장점
    사용자들에게 JS파일을 받아오기 전에도 이미 준비가 되므로 사용자가 페이지 컨텐츠를 미리 볼 수 있다.

  • 단점
    사용자가 기본적인 html의 컨텐츠를 빠르게 확인할 수는 있지만, 만약 JS에 의존적인 웹사이트라면 (ex :JS를 이용해 서버에서 데이터를 받아온다던지, DOM요소에 다양한 event를 설정한다던지 ) 의미있는 컨텐츠를 보기 위해서는 패칭과 실행을 기다려야 한다.



2. async vs defer

-async와 defer는 boolean 속성값이므로, 선언하는것 만으로도 true를 default값으로 갖는다.

2-2 head + async 방식

 <!DOCTYPE html>
<html lang="en">
  <head>
    <script async src="a.js"></script>
    <script async src="b.js"></script>
    <script async src="c.js"></script>
  </head>
  <body></body>
</html>

async를 속성을 사용하게 되면, 브라우저가 파싱을 하다가 병렬로 JS 파일을 다운받게된다. 이후 JS파일이 다운되면 파싱을 멈추고 JS파일을 실행한다. 그리고 실행이 끝난 이후에 다시 HTML파일을 파싱한다.

-장점
파싱하는동안 fetching이 진행되므로 다운받는 시간을 절약할수 있다.

-단점
JS파일이 HTML파싱전에 실행되므로, 만약 JS에서 HTML을 조작한다면, 그 시점에 HTML의 요소가 아직 정의되지 않을 수 있어 위험하다.


2-2 head + defer 방식

1)

 <!DOCTYPE html>
<html lang="en">
  <head>
    <script defer src="main.js"></script>
  </head>
  <body></body>
</html>

2)

 <!DOCTYPE html>
<html lang="en">
  <head>
    <script defer src="a.js"></script>
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
  </head>
  <body></body>
</html>


defer 속성을 사용하게 되면, 브라우저가 파싱을 하다가 script defer를 보면 JS 파일을 다운을 명령한다. 이후 HTML 파싱을 끝까지 진행하고, 다운된 JS를 실행한다.

-장점
async와 마찬가지로 파싱하는동안 fetching이 진행되므로 다운받는 시간을 절약할수 있다.


결론

async의 파싱이 끝나기 이전에 JS파일을 실행하는 방식은 위험할 수 있다. 또한 순서에 의존적인 JS 파일들이라면, async 속성은 문제가 된다.
반면 defer은 필요한 JS를 파싱하는동안 다운로드 받아놓은 다음에, 순서대로 실행하기 때문에, 우리가 원하는대로 script가 실행될것이라고 예측할 수 있다.

그러므로 head안에 defer 옵션을 쓰는것이 가장 효율적이고 안전하다고 할 수 있다.

참고: https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2

0개의 댓글