[javascript] async vs defer

async vs defer

  • 브라우저는 html파일을 한줄 한줄 읽어 내려가며 읽는다.
  • 자바스크립트 파일을 head 또는 body의 제일 맡에 놓는 것은 둘 다 단점이 있다.
  • head 태그 내에 위치할 경우 js파일의 크기가 클 경우 html을 읽는 것이 느려져 웹화면 로드가 느려진다.
  • body 태그의 가장 밑에 위치하면 자바스크립트에 의존적일 경우 좋지 않음
  • async 옵션
  • 기본값이 true
  • js파일을 만나면 다운로드 하면서 html을 읽어 들이다가 다운로드가 완료되면 js파일을 실행함
  • 여러 개의 js 파일이 있을 경우 작성순서가 아니라 다운로드가 완료된 순서부터 실행됨
  • 장점
    • 파싱을 병렬적으로 이루어지도록 함

  • 단점

    • js파일이 다 다운로드가 완료되기 전에 html에 원하는 요소가 정의되지 않을 수 있음
    • 언제든지 js파일을 다운로드되면서 멈출 수 있음

  • defer 옵션

  • js파일을 만나면 다운로드를 시작, html을 다 읽어 들이고나서 js파일을 실행
  • 제일 좋은 옵션
  • 여러 개의 js 파일이 있을 경우 작성순서대로 실행됨
  • js파일이 순서에 의존적일 경우 defer 옵션 방식이 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script>
    <script defer src="sub1.js"></script>
    <script defer src="sub2.js"></script>
</head>
<body>

</body>
</html>

links

social