TIL day4 html script tag 위치

Winney·2020년 8월 13일

Script tag

The HTML script element is used to embed executable code or data. This is typically used to embed or refer to JavaScript code. The script element can also be used with other languages, such as WebGL's GLSL shaer programming language and JSON.

1. Browser 동작과정

Web에서 사용자가 html file을 받을 때 browser가 html을 한 줄씩 읽는다. (parsing)
html 구조와 CSS 스타일을 rendering 한다.
Browser가 parsing 중 script tag을 확인하고 script을 받아야 함을 인지한다.
Parsing을 멈추고 필요한 script을 sever에 요청한다. (Fetching)
Fetching 후 실행한다.
script tag 다음 줄부터 다시 parsing한다.

2. script tag 위치

1. head>script

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>

script용량이 클 경우 page가 보이기까지 오래걸린다.
가벼운 script에 적합하다.

2. body>script

: body 끝에 script 삽입

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    
    <script src="main.js"></script>
  </body>
</html>

Browser가 script을 받기 전 사용자는 페이지를 볼 수 없다.
Web site이 script에 의존적이라면 사용자는 fetching 및 executing 시간을 기다려야 한다.

3. Async vs Defer

1) Async

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="main.js"></script>
  </head>
  <body>
  </body>
</html>

Async는 Boolean type attribute이다.
Parsing과 Fetching을 병렬로 처리한다.
Fetching이 html의 parsing 전에 완료되기 때문에 html의 원하는 요소가 정의되지 않을 수 있다.
Parsing 전 script 실행이 완료되기 때문에 사용자는 기다려야한다.
Script가 여러개이고 순서에 의존적인 script라면 script 실행이 순차적이지 않고 완료순으로 실행되기 때문에 문제가 될 수 있다.
ex) script가 A, B, C 3개가 있고 A→B→C 순서로 실행되어야 할 경우 완료순서에 따라 B→C→A 순서가 될 수 있으므로 사용에 주의해야 한다.

2) Defer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>

Parsing 하면서 필요 script를 병렬로 다운 후 page를 보이고 난 후 script를 실행한다.
사용자가 빠르게 page 사용을 할 수 있다.
여러개의 script가 있을 경우 parsing과 함께 여러개의 script가 동시에 fetching이 이루어 진다. parsing 후에 executing이 이루어지기 때문에 순차적인 script 실행이 가능하다.

출처 https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
이미지 출처: https://velog.io/@ko12ztwe/HTML-script-태그의-위치

Winney

프론트엔드 엔지니어

이전 포스트

TIL day3 Iterators (methods)

다음 포스트