Bruce Kim

ML Engineer

[JS] Javascript #1 Summary

2 minute read

Javascript #1 Summary


  • Parsing HTML: (Line by Line 으로 HTML 분석 및 이해 + CSS 병합) --> DOM 요소로 변환

  • Parsing 도중 <script> tag 를 만나게되면 parsing 이 blocked 되고
    <script> tag 의 src 를 fetching + executing 하게된다.

    • fetcing: script 파일을 서버에서 다운받는 과정
    • executing: script 파일을 실행



적합한 script Tag 의 위치

  • Recommended: header Tag + defer


body Tag

<!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>
    <div></div>
    <script src="a.js"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
</body>
</html>
  • 웹사이트가 script 에 의존적일 경우 client 가 제대로된 기능을 이용하기 위해
    script 를 fetching 후 executing 하는 시간을 기다려야 하는 단점이 존재한다.


head Tag

<!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="a.js"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
</head>
<body>
    
</body>
</html>
  • script 가 너무 클 경우 client 가 웹사이트를 확인하는 것에 너무 많은 시간이 걸리는 단점이 존재한다.


header Tag + 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 src="a.js" async></script>
    <script src="b.js" async></script>
    <script src="c.js" async></script>
</head>
<body>
    
</body>
</html>

  • script file fetching 이 비동기적으로 진행 (defer 와 동일한 특징)

  • fetching 이 완료되면 parsing 은 blocked 되고, script file 이 executing 된다.
    executing 완료 후 parsing 이 다시 진행된다.
    (fetcing --> executing 우선)

  • parsing 이 완료 되기도 전에 script 가 executing 되기 때문에
    script 가 query selector 를 통해 DOM 요소를 조작할 경우 parsing 이 완료되지 않아 필요한 요소가
    정의되어 있지 않을 수 있어 위험할 수 있다.

  • blocked 되는 부분이 있어 client 가 페이지를 보는데 여전히 시간이 더 걸릴 수 있다.

  • sciprt 가 여러개일 경우 정의된 script 순서가 아니라
    fetching 이 완료된 스크립트 부터 executing 하기 때문에 script 사이에서
    순서에 따른 의존성이 있을 경우 위험하다.


header Tag + defer (Recommended)

<!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="a.js" defer></script>
    <script src="b.js" defer></script>
    <script src="c.js" defer></script>
</head>
<body>
    
</body>
</html>

  • script file fetching 이 비동기적으로 진행 (async 와 동일한 특징)

  • fetching 완료 후 parsing 이 끝날 때 까지 대기한 뒤, executing 이 진행된다.

  • script executing 순서는 정의된 script 순으로 진행된다.
    (순서에 따른 의존성을 해결할 수 있다.)



Strict mode

Script 최상단에 아래와 같은 코드를 작성한다.

'use strict';

  • flexible 한 Javascript 의 특성을 strict 하게 해준다.
    ex) 정의되지 않은 변수에 값을 할당하는 것을 기존에는 허용하지만,
    ‘use strict` 를 사용할 경우 에러를 반환해준다.

  • Javascript 엔진이 효율적으로 더 빠르게 코드를 분석 가능

Leave a comment

Related posts