[html] 스크립트 삽입 위치와 async, defer 속성
html에 자바스크립트를 사용할 때,
<head></head> 사이에 삽입할 수 도 있고,
<body></body> 사이에 삽입할 수 도 있다.
<body>의 첫 부분에 <script></script> 태그를 넣을 수도 있고,
<body>의 끝부분에 넣을 수 도 있다.
위의 위치들과 전혀 상관없이 스크립트를 작성할 수 도 있다.
다만 html이 로드되고 실행돼야 하는 스크립트의 경우에는 <body>의 끝부분에 작성을 했다.
이런 방식의 스크립트 작성은,
규모가 큰 사이트의 대규모 스크립트나 스타일시트가 있을 경우,
필요한 화면 로딩이 느려질 수 도 있다.
이때 필요한 속성이 "async", "defer" 속성인데 아래와 같이 사용할 수 있다.
<script src="test.js" async></script>
<script src="test.js" defer></script>
async와 defer는 스크립트 로딩을 html과 같이 동기로 실행시켜준다.
그래서 <head>에 선언되더라도 <body> 가장 아래에 선언된 것처럼 사용할 수 있다.
defer는 같은 defer로 선언된 스크립트가 있을 경우에, 먼저 작성된 스크립트를 먼저 실행한다.
예를 들어서 아래와 같은 html(async-defer.html)과 스크립트(async-defer1.js)가 있을 때,
async 속성과 defer 속성을 제거하면 아래 스크립트는 버튼을 클릭해도 alert()이 뜨지 않을 것이다.
실행되지 않는 것은 1번 스크립트만 실행되지 않고, 2,3번은 다른 방식으로 해서 alert() 실행된다.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="./async-defer1.js" async></script>
<script src="./async-defer2.js" defer></script>
<script src="./async-defer3.js" ></script>
</head>
<body>
<button id="test">test</button>
</body>
</html>$("#test").click(function(){
alert("async-defer1");
});
작성된 소스는 아래에서 확인할 수 있다.
https://github.com/devdevdev09/htmlJsJquery/tree/master/example/html/async-defer
devdevdev09/htmlJsJquery
Contribute to devdevdev09/htmlJsJquery development by creating an account on GitHub.
github.com
*틀린 정보가 있을 경우 알려주시면 수정하겠습니다.*