드림코딩 엘리님 유튜브 강의 참조~!
1. head+async
<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 async src="main.js"></script>
</head>async 는 boolean 타입의 속성값. 선언하는 것만으로도 true.
브라우저가 html 을 파싱 하다가 병렬로 js를 다운로드 받자~! 라고 명령만 해놓고 다시 파싱. js가 다운로드 완료되면 파싱을 멈추고 js를 실행 후 다시 html을 파싱.
장점은 다운로드 받는 시간을 절약할 수 있다. 하지만 html이 전부 파싱되기도 전에 js가 실행 되기 때문에 위험! 그리고 js가 실행되는 동안 html 파싱을 멈추기 때문에 사용자가 페이지를 보는데 시간이 좀 더 걸릴 수도 있다.
2. head+defer
<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>브라우저가 html 을 파싱 하다가 병렬로 js를 다운로드 받자~! 라고 명령만 해놓고 다시 파싱. 그리고 파싱이 끝나면 js가 실행!
아무래도 defer가 안전😊
아 응애에요🐥