본문 바로가기
Front-End/JavaScript & TypeScript

async vs defer

by 두두리안 2022. 5. 30.
728x90

 

<head> 안에 js 다운 받을때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
</body>
</html>
  • 만약 js 파일이 크다면?
  • 사용자가 웹사이트를 보기까지 시간이 많이 걸린다
  • 스크립트는 head에 포함하는것은 좋지 않은방법

 

 

<body> 안에 js 다운받을때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
</head>
<body>
  <div></div>
  <script src="main.js"></script>
</body>
</html>
  • 사용자가 HTML 빨리보는 장점은 있다
  • 자바스크립트 이용해서 의미있는 데이터를 받아오거나 DOM 요소를 이쁘게 꾸며줄때 
  • 사용자가 정상적인 웹페이지를 받기까지 시간이 걸린다

 

<head> 안에 asyn 이용해서 js 다운받을때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
    <script async src="main.js"></script>
</head>
<body>
  <div></div>
</body>
</html>
  • asyn 은 boolean 속성값 선언하는것 만으로도 True 설정
  • 병렬로 js 파일을 다운로드하고 다운로드 완료되면 HTML 파싱을 멈추고 다운로드된 js 파일을 실행
  • <body> 에서 병렬적으로 다운받기 때문에 다운받는시간을 절약할수 있다
  • HTML이 파싱되기전에 실행되기 때문에 QuerySelector() 이용해서 DOM 요소조작할때
  • 원하는요소의 HTML이 아직정의가 안되있을수 있다

 

<head> 안에 defer 이용해서 js 다운받을때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body>
  <div></div>
</body>
</html>
  • js 다운 명령만 시키고 끝까지 HTML을 끝까지 파싱한 이후 js 파일을 실행한다
  • 사용자에게 페이지를 보여주고나서 js 파일을 실행

 

여러 js 파일을 다운받을때 (async)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
    <script async src="a.js"></script>
    <script async src="b.js"></script>
    <script async src="c.js"></script>
</head>
<body>
  <div></div>
</body>
</html>
  • 다운로드가 끝난 js파일부터 실행하고 나서 HTML을 파싱한다

 

여러 js 파일을 다운받을때 (defer)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Document</title>
    <script defer src="a.js"></script>
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
</head>
<body>
  <div></div>
</body>
</html>
  • js 파일을 병렬적으로 다운받고 HTML파싱이 끝나고 순서대로 실행된다

 

참고자료

https://youtu.be/tJieVCgGzhs

728x90
저작자표시

'Front-End > JavaScript & TypeScript' 카테고리의 다른 글

Web_components with Lit  (0) 2023.11.08
JavaScript 와 ECMAScript 의 탄생  (0) 2023.10.21
자바스크립트 메모리 관리  (1) 2023.10.03
data type, let vs var vs const, hoisting  (0) 2022.06.11

관련글

티스토리툴바