728x90
Javascript async 와 defer
자바스크립트의 실행을
페이지 로드 이후로 늦출수 있는 키워드는 defer이다.
[Sample Code :Javscript]
<!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>Async Defer Code Sample</title>
</head>
<body>
<!--Html 페이지 파싱이 끝난 이후 실행-->
<script src="외부스크립트주소" defer></script>
<!--Html 페이지 파싱과 동시에 실행-->
<script src="외부스크립트주소" async></script>
<!--Html 페이지 파싱과 무관하게 순차실행-->
<script src="외부스크립트주소"></script>
</body>
</html>
※사용 주의※
defer은 <script> 태그 내 src를 통한 외부 스크립트 소스를
참조하는 경우에만 사용할수 있다.
(script내 소스코드가 있는 경우에는 사용불가)
비슷한 키워드로 async도 있는데,
async는 페이지 로드중에 함께 스크립트를 실행하는 것으로
페이지 로드 이후에 실행되는 defer와 는 다르다.
또한 아무 키워드도 명시하지 않았을 경우에는
코드에 순서에 따라 순차적으로 실행이 된다.
[정리]
async : 페이지 로드중에 함께 해당 스크립트 실행
<script src="외부스크립트주소" async></script>
defer : 페이지 로드 이후 해당 스크립트 실행
<script src="외부스크립트주소" defer></script>
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 배열 (Array) - map() (0) | 2021.02.23 |
|---|---|
| [Javascript] JSON string object 변환 JSON.stringify() / JSON.parse() (0) | 2021.02.22 |
| [Javascript] 배열 Array API - splice() (0) | 2021.02.16 |
| [Javascript] 배열 Array API - sort() (0) | 2021.02.15 |
| [Javascript] 배열 Array API - reverse() (0) | 2021.02.14 |
댓글