Java developer


<script> async와 defer의 차이점


1. <head> 안에 <script> 작성 시

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
        <script src="main.js"></script>
    </head>
    <body>
        <div></div>
    </body>
</html>

브라우저는 HTML을 읽다가 <script>…</script>를 만나면 DOM 생성을 멈추고
스크립트를 다운 받고 실행한 후에 남은 페이지를 처리한다.

이러한 브라우저의 동작으로

  1. 스크립트에서는 스크립트 아래의 요소에 접근할 수 없게 됨.
  2. 스크립트를 다운받고 실행할 때까지 스크립트 아래 내용을 볼 수 없게 됨.



2. <body> 끝에 <script> 작성 시

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>
        <div></div>
    	<script src="main.js"></script>
    </body>
</html>

js 파일을 받기 전에 페이지가 준비되기에 사용자가 페이지 컨텐츠를 볼 수 있음.
하지만 웹사이트가 JS에 의존적이라면 정상적인 페이지를 보기 위한 기다림이 또 필요해짐.



3. <head>에 async 속성 부여

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
        <script async src="main.js"></script>
    </head>
    <body>
        <div></div>
    </body>
</html>

async는 boolean 타입의 속성으로 선언만 해도 true로 사용함.
parsing하다가 해당 async 속성을 가진 <script> 태그를 만나면 parsing과 병렬로 js파일 다운함.
다운이 끝나면 parsing을 멈추고 다운된 js파일을 실행하며 실행이 끝나면 마저 HTML을 parsing함.

body 끝에서보단 다운로드 시간을 줄일 수 있음.
하지만, 실행할 때 필요한 DOM 요소가 아직 parsing되지 않았거나 js파일 실행을 위한 멈추는 시간이 있으므로
사용자가 페이지를 보는데에 시간이 걸릴 수 있는 단점이 있음.


<head>
        <meta charset="UTF-8"/>
        <title>Document</title>
        <script asyn src="a.js"></script>
    	<script asyn src="b.js"></script>
    	<script asyn src="c.js"></script>
 </head>

정의된 스크립트 순서와는 상관없이 다운이 되는 순서대로 실행됨.
스크립트의 순서에 의존적(선행되어야한다면)이라면 문제가 될 수 있음.


4. <head>에 defer 속성 부여

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
        <script defer src="main.js"></script>
    </head>
    <body>
        <div></div>
    </body>
</html>

fetching과 parsing을 병렬로 같이 진행 후 parsing이 끝나게 되면 js를 실행함.


<head>
        <meta charset="UTF-8"/>
        <title>Document</title>
        <script defer src="a.js"></script>
    	<script defer src="b.js"></script>
    	<script defer src="c.js"></script>
 </head>

parsing하는 동안 다 다운 받아 순서대로 실행.


정의한 순서가 지켜지므로 원하는대로 스크립트 실행이 가능함.
→ 가장 효율적! 안전!



5. 흐름 한 눈에 보기

Async-Defer-8

(출처 : https://javascriptanswers.com/defer-or-async/)



use stirct

// whole-script strict mode syntax
// Javascript is very flexible
// flexible === dangerous
// added ECMAScript 5
'use strict';

선언되지 않은 변수에 값을 할당한다던지,
기존에 존재하는 프로토타입을 변경한다던지, 등이 가능함.

유연함 === 개발자의 실수↑

‘use strict’을 선언하게 되면 비상식적인 것을 쓸 수 없게 됨.

strict 모드로 개발 시 js엔진이 js를 더 효율적, 더 빠르게 분석할 수 있으므로 성능 개선까지 기대할 수 있음.






댓글남기기