<script> 태그는 실행 가능한 코드나 데이터를 웹페이지에 넣기 위해서 사용됩니다. 보통은 자바스크립트 코드를 웹페이지에 포함시키거나 참조하기 위해서 사용됩니다. 브라우저는 <script> 태그를 만나면, 해당 자바스크립트 코드를 실행하는 동안 DOM 생성을 잠시 멈춥니다. <script> 태그는 <html> 태그 내부에만 있으면 적용이 되지만, 위치에 따라서 속도에 차이가 발생합니다.
<script> 태그의 가장 보편적인 위치는 <body> 태그의 마지막, 즉 </body> 태그의 앞입니다. 왜 이 위치가 가장 보편적인지와, 다른 곳에 위치하게 되면 어떤 차이가 있는지에 대해서 정리하도록 하겠습니다.
1. <head> 태그 내부
1-1. 기본 설정 (옵션 없음)
먼저 <head> 태그 내부에 아무 옵션 없이 <script> 태그를 위치시킬 수 있습니다. 이 방법은 크게 2가지 문제점이 있습니다. 먼저 자바스크립트 코드를 읽고 실행하는 동안 HTML 파싱이 중지됩니다. 만약 자바스크립트 코드의 양이 많고 실행하는데 시간이 오래 걸린다면, 지연되는 시간만큼 웹페이지의 로딩이 느려집니다. 또한, 아직 로딩이 되지 않은 DOM의 부분을 건드리면 오류가 발생합니다.
1-2. async 속성 추가
<!-- async script in <head> tag -->
<script async src="./app.js"></script>
async 속성을 추가한다면, 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 자바스크립트 코드가 모두 읽혔다면, HTML 파싱을 멈추고 자바스크립트 코드를 실행합니다. 기본 설정에 비해 코드를 읽는 시간은 절약이 되지만, 실행하는 동안은 똑같이 시간이 지연된다는 점에서 유사한 문제점을 가지고 있습니다.
1-3. defer 속성 추가
<!-- defer script in <head> tag -->
<script defer src="./app.js"></script>
defer 속성을 추가한다면, async 옵션과 유사하게 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 하지만 코드가 모두 로딩된 다음에 바로 실행하는 것이 아니라, HTML 파싱이 완료될 때까지 기다리다가 페이지가 모두 로딩이되면 실행됩니다.
2. <body> 태그 내부
2-1. inline 방식
<!-- inline script -->
<script>
console.log("Hello, World!");
</script>
코드가 짧다면 직접적으로 HTML 코드에 자바스크립트 코드를 삽입할 수도 있습니다. 코드의 가독성이나 유지보수 면에서는 불리하기 때문에 자주 사용되지는 않습니다.
2-2. <body> 태그 끝 (즉, </body> 태그 앞)
이 방식은 HTML 코드를 모두 파싱한 다음에 자바스크립트 파일을 읽고 실행합니다. 따라서 사용자 입장에서는 화면을 빨리 볼 수 있다는 장점을 가집니다. 하지만 만약 웹페이지의 내용이 자바스크립트 코드에 많이 의존적이라면, 자바스크립트 코드가 완전히 실행될 때까지 기다려야 한다는 단점이 있습니다.
* defer 속성은 HTML 코드와 함께 자바스크립트 코드를 읽기 때문에 웹페이지를 로딩하는데 가장 빠른 방법입니다. 예전에는 defer 속성을 지원하지 않는 브라우저가 많았기 때문에 </body> 태그 앞에 <script> 태그를 위치하는 것이 가장 좋은 코딩 컨벤션으로 여겨졌습니다. 현재는 많은 브라우저들이 defer 속성을 지원하기 때문에, defer 속성과 함께 <head> 태그 내부에 위치시키는 것으로 변하는 추세입니다.
'Frontend > Javascript' 카테고리의 다른 글
| [JavaScript] toggle() 메서드 (0) | 2024.02.04 |
|---|---|
| [JavaScript] addEventListener() 메서드 (0) | 2024.02.02 |
| [JavaScript] console.dir() 메서드 (0) | 2024.01.31 |
| [JavaScript] getElement* 와 querySelector (0) | 2024.01.31 |
| [JavaScript] every(), some() 메서드 (0) | 2023.09.11 |
