반응형
기존에 내가 봤던 강의들을 보면 자바스크립트 파일을 가져올 때 <script src=”경로”> 문장을 body 맨 밑에 넣으라고 가이드했었다.
그렇게 하는 이유는 위에서부터 파일을 읽어오는데 자바스크립트 파일에서 DOM에 접근하는 코드가 존재하는 경우
body가 불러와지기 전에 DOM에 접근하게 되어 에러가 발생하기 때문이다.
하지만 defer 속성을 사용하는 경우 body가 다 렌더링된 다음에 해당 js 파일이 로드되어 에러가 발생하지 않는다.
장점
- script를 head에 작성할 수 있다.
- body가 렌더링된 후에 로드되어 에러가 나지 않는다.
<!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>자바스크립트</title>
<script src="./hellow.js" defer></script>
</head>
<body>
</body>
</html>
반응형
'프론트엔드 > 웹' 카테고리의 다른 글
| 웹에서 IP 카메라 스트리밍 하기 (13) | 2021.12.09 |
|---|---|
| 글자색/배경색 자동 선택 하기 (0) | 2021.03.21 |
| 주석을 작성하고 코드를 작성한다 (0) | 2021.03.06 |
| Carriage Return(\r) (0) | 2021.03.06 |
| NBSP(No-break space) (0) | 2021.03.06 |
댓글