script의 async와 defer 옵션의 차이
일반적으로 위와 같은 html이 있을 경우 브라우저는 한줄 한줄 읽다가 <script>태그를 만나면 DOM 생성을 멈추고 <script>를 먼저 실행한다. 따라서 src속성이 있는 외부 스크립트를 다운받고 실행 한 후에 남은 html을 읽게 된다.
문제점
->인터넷이 느린경우 스크립트를 받느라 지연될 수가 있다.
이러한 문제점을 해결하기 위해 <script>태그에는 async(비동기), defer 옵션이 있는데
async 옵션
<script async src='json.js'></script>의 경우 html을 읽으면서 병렬로 동시에 처리하는 방식이다.
때문에 script를 처리하는 도중에 DOM생성이 멈추지 않아 속도가 빠르다.
문제점으로는
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='json1.js'></script>
<script src='json2.js'></script>
<script src='json3.js'></script>
</head>
<body>
</body>
</html>위와 같이 스크립트가 여러개 있을 경우 순서에 상관없이 병렬로 동시에 처리되지만,
json1.js, json2.js, json3.js간에 의존경우가 있을 경우에는 이상이 생길 수 있다.
ex) json2.js에서 json1.js를 참조하는게 있어 json1.js가 먼저 실행 되어야 하는 경우.
defer 옵션
defer 옵션은 html문을 읽고 마지막에 <script>태그를 실행하는 방식으로 html을 먼저 그려주고 스크립트를 호출한다.
때문에 화면에 그려지는 속도도 빠르며 async은 순서에 상관없이 스크립트가 병렬로 실행되서 생기는 문제가 있지만, defer은 html을 그려주고 마지막에 순차적으로 스크립트를 실행한다.
문제점으로는
스크립트가 실행되기 전에 페이지가 화면에 출력이 되므로 이를 유념해야 한다.
정리하자면,
async : 방문자 수 카운터나 별도의 스크립트 같이 독립적이거나 실행 순서에 의존하지 않는 경우 사용
defer : DOM 전체가 필요한 스크립트나 스크립트 간에 실행 순서가 중요한 경우 사용
'Development > JSP, JS, JQUERY' 카테고리의 다른 글
| jsp 내장객체(참고 링크) (0) | 2021.08.16 |
|---|---|
| SPA와 여러 방식 (0) | 2021.04.29 |
| use strict(바닐라 js) (0) | 2021.04.19 |
| JSON 개념 및 활용법(with Visual Studio Code) (0) | 2021.04.18 |
| ajax로 받아온 데이터 jstl에서 사용하고 싶을때 (4) | 2021.04.10 |
