async & defer

asyn & defer

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body></body>

코드는 위에서 아래로 한줄씩 읽어나갑니다. 위에서 <script src="main.js"></script>은 자바스크립트를 로드하는 법인데요.
script가 <head>안에 있으면 단점이 있습니다.

script의 양이 너무 많으면 스크립트 다운시간 길어져서 다음에 나올 <body> 부분이 늦게 화면에 표출됩니다.

그래서 다음과 같은 해결법을 사용하게 됩니다.

<head></head>
<body>
    <div></div>
    <script src="main.js"></script>
</body>

<body> 제일 끝부분에다가 스크립트를 넣는 것이죠.
이렇게 되면 <body>부분이 먼저 화면에 표출되고 그 다음에 스크립트를 다운받고 실행합니다.
하지만 이 역시 단점이 있습니다.

자바스크립트에 의존적인 웹사이트라면 치명적입니다.

다음으로는 <script> 속성값에 async를 사용하는 것입니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script async src="main.js"></script>
</head>
<body></body>

async를 사용하게 되면 <body>를 출력하면서 동시에 스크립트를 다운받습니다.
다운이 다 되면 html 파싱을 멈추고 스크립트를 실행합니다. 다 실행되고 나면 나머지 html을 파싱합니다. 이 역시 단점이 있습니다.

사용자가 페이지를 보는데 여전히 길어질 수 있습니다.
만약 스크립트가 a, b, c가 있다면 async는 다운로드가 끝나는 대로 수행하기 때문에 b가 먼저 수행될 수 있습니다. 이처럼 순서에 지장이 있습니다.

다음으로는 <script> 속성값에 defer를 사용하는 것입니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body></body>

defer를 사용하게되면 html 파싱을 시작하는 동시에 스크립트를 다운받습니다. 그리고 스크립트 다운이 다 끝나도 html 파싱을 끝까지 다 수행합니다. 그 다음에 자바스크립트를 수행합니다.
이는 가장 인상적인 속성값입니다.
defer 같은 경우 순서에 영향이 전혀 없습니다.

저작자표시

'공부 기록' 카테고리의 다른 글

JavaScript에서 Getter와 Setter (0)	2020.10.21
자바스크립트 기본2 (0)	2020.10.21
CSS 레이아웃 (0)	2020.10.21
자바스크립트 기본 (0)	2020.10.20
화면에 php 에러 로그 보기 (0)	2020.10.04