-
[html] 스크립트 삽입 위치와 async, defer 속성programming/HTML&CSS 2019. 10. 26. 00:00반응형
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
*틀린 정보가 있을 경우 알려주시면 수정하겠습니다.*
반응형'programming > HTML&CSS' 카테고리의 다른 글
[HTML&CSS] 마우스 커서 변경하기(물음표, 금지, 손가락 등) (0) 2019.11.11 [HTML&CSS] CSS 우선순위 적용 (!important) (0) 2019.11.10 탭인덱스 거꾸로 이동하기 (0) 2019.10.14 [HTML&CSS] 자식&자손 선택자, 선택자 여러개 선택하기 (0) 2019.09.30 [HTML&CSS] 아이폰에서 display:none이 안될때 (0) 2019.09.26