스크립트 선언 위치
2022. 9. 27. 15:38ㆍJavascript
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형
자바스크립트 선언 위치에 대해서 알아보겠습니다.
head 태그 안에 스크립트 선언할 경우
DOM이 읽혀지기 전에 스크립트가 먼저 읽히므로 common.js에서 따로 후처리 해줘야 합니다.
<!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>Document</title>
<script src="./js/common.js"></script><!-- DOM이 읽혀지기 전에 스크립트가 먼저 읽히므로 common.js에서 따로 후처리 해줘야 함 -->
</head>
<body>
</body>
</html>load
이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.
/* common.js */
'use strict';
function setLayout(){
}
window.addEventListener('load', setLayout); //리소스들이 다 로드될 때까지 기다렸다가 실행됨DOMContentLoaded
이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
/* common.js */
'use strict';
function setLayout(){
}
window.addEventListener('DOMContentLoaded', setLayout); //리소스들이 로드가 안되도 HTML DOM구조만 랜더링 되도 실행됨
body 태그 닫기 전에 스크립트 선언할 경우
HTML DOM 구조가 랜더링 된 이후, 실행됩니다.
<!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>Document</title>
</head>
<body>
<script src="./js/common.js"></script> <!-- HTML DOM구조가 랜더링된 이후, 실행됨 -->
</body>
</html>
자바스크립트 선언 위치에 대해서 알아보았습니다.
🏷 출처
MDN
반응형
'Javascript' 카테고리의 다른 글
| Array APIs - indexOf(), lastIndexOf(), includes() (1) | 2022.10.05 |
|---|---|
| Array APIs - splice(), slice(), concat() (0) | 2022.10.05 |
| Array APIs - push(), pop(), unshift(), shift() (0) | 2022.10.03 |
| Array APIs - forEach() (0) | 2022.10.02 |
| 현재 스크롤Y값 구하기 (0) | 2022.09.28 |