Script defer vs Script async

welcome·2021년 10월 19일
0

1. 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>
  </head> 
  <body></body>
</html>

defer의 경우
처음 자바스크립트 파일을 다운로드 시작한 후 html을 출력이 완료되면 자바스크립트를 실행한다.
일반적으로 defer를 사용하는 것이 효율적이다.

2. async


<!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 asyne src="main.js"></script>
  </head> 
  <body></body>
</html>

async의 경우
처음 자바스크립트 파일을 다운로드 시작한후 다운이 완료 되면 HTML출력을 멈추고 자바스크립트 파일을 실행한다 완료되면 다시 HTML출력
여러개의 자바스크립트 파일을 실행할 경우 다운로드 완료순으로 실행되기 때문에(비동기적) 처음의도와는 다른 순서로 자바스크립트가 실행 될수 있다는 단점이 있다.

3. 'use strict'


선언되지 않은 변수에 값을 할당하지 못하게 한다.

0개의 댓글