반응형
<head> / <body> 태그 안에 직접 작성하기
- <head> 태그 안에 <script> 태그 작성
- <body> 태그 안에 <script> 태그 작성
→ <body> 태그 맨 아래에 <script>를 위치하면 display 속도가 향상됩니다.
HTML parser는 <script>태그를 만나면 JS 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고, JS 엔진으로 제어 권한을 넘깁니다. 그리고 JS 실행이 완료되면 다시 HTML parser로 제어 권한을 넘겨서 DOM 생성을 재개합니다. 때문에 스크립트 파일을 <body> 태그 가장 아래 두지 않으면 스크립트 파일이 많거나 크기가 큰 경우 DOM 생성이 지연됩니다.
<body> 태그 맨 아래에 <script>를 위치하지 않아도 되는 여러 방법이 다음과 같이 있습니다. 이는 다음에 자세히 다루도록 하겠습니다.
- <script async src = "test.js">
- <script defer src = "test.js">
- DOMContentLoaded 등
외부 JS
<script src = "test.js"></script>
반응형
'Front-End > JS' 카테고리의 다른 글
| JS 문자열 메서드 (0) | 2023.04.25 |
|---|---|
| JS 자료형과 타입 변환 모음 (0) | 2023.04.25 |
| JS 호이스팅과 var, let, const 차이점 (0) | 2023.04.25 |
| JS 현재 창 인쇄하기: window.print() (0) | 2023.04.25 |
| JS 데이터 표시하는 방법(innerHTML, write(), console.log(), alert()) (0) | 2023.04.25 |