오늘은 웹 페이지에서 자바스크립트를 파싱하는 순서와 코드 위치에 대해 알아보았습니다.
HTML 파일에서 자바스크립트 코드는 아무곳에 위치할 수 있습니다. (<html></html> 태그 바깥에도 위치할 수 있습니다.)
자바스크립트 코드 삽입 방법은 <script></script> 태그를 사용하며,
<script></script> 태그에 직접 자바스크립트 코드를 입력 하는 방법과 <script src='파일 경로'></script>로 파일 링크를 입력하여 연결하는 방법이 있습니다.
보통 <head></head> 태그에 자바스크립트 코드 태그를 삽입하며, 이는 권장 사항이나 필수 사항은 아닙니다.
필요에 따라 문서 중간에 위치하거나, 맨 끝에 위치할 수 있습니다.
자바스크립트를 파싱하는 순서는 다음과 같습니다.
- HTML 파일 오픈
- HTML 페이지 태그를 위에서부터 아래로 순차적으로 파싱
- <script>태그를 발견하면 자바스크립트 코드 블록을 읽고, 외부 파일 링크이면 파일을 요청. HTML 태그 파싱은 멈춤.
- <script> 태그의 자바스크립트 코드, 또는 외부 파일을 인터프리팅하여 실행.
- 종료 태그(</script>) 이후 HTML 태그 파싱 재개
3번 확인 시 자바스크립트 코드를 읽어 실행하는 동안 HTML 파싱이 일시정지 됩니다.
만약 다운로드 하는데 오랜 시간이 걸리는 큰 파일을 가진 자바스크립트 라이브러리나, 실행 시간이 오래 걸리는 코드를 HTML 페이지 중간에 삽입 시 웹 페이지 로딩 및 랜더링 완료까지 오래 걸리게 됩니다.
웹 브라우저가 자바스크립트 코드 실행 완료 시점까지 파싱을 멈추고 기다리는 이유는 자바스크립트 코드로 HTML 태그를 생성할 수 있기 때문입니다. "document.write()" 함수로 HTML 태그를 생성하게 되면, 자바스크립트 코드 실행 위치에 새로운 HTML 태그가 생겨나게 되고, 만약 웹 브라우저가 자바스크립트 코드 이후의 HTML 태그 파싱을 진행한 경우 다시 되돌아와서 자바스크립트 코드 위치부터 다시 파싱을 시작해야 합니다.
따라서, 자바스크립트 코드가 HTML 파싱 후 DOM이 생성된 이후 실행되도록 하는 여러 방법을 사용합니다.
FYI. DOM이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
1. HTML 페이지 맨 끝에 자바스크립트 코드 적용
<script> 태그는 어느 위치에 있어도 되기 때문에, </html> 태그 뒤에 자바스크립트 코드가 위치하면 HTML DOM이 생성된 후 자바스크립트 코드가 실행되므로, 확실한 방법으로 간주됩니다. 하지만 HTML 페이지 작성 시 권장하지 않는 방법이라고 합니다.
2. DOM 생성 완료 되었는지 체크
HTML DOM이 생성되었는지 체크하는 기본 이벤트 리스터 코드이며, 표준 사용방법입니다. "DOMContentLoaded" 이벤트는 DOM 생성이 완료된 후 웹 브라우저가 발생시키는 이벤트입니다. 이벤트가 발생하면 이벤트 리스너 함수의 두 번째 인자로 정의한 콜백 함수 "function(){}"을 실행하는 이벤트 리스너를 등록하는 코드입니다.
document.addEventListner("DOMContentLoaded", function() {
// DOM 생성 완료된 후 실행되는 코드
});3. async
자바스크립트 파일을 링크해서 불러올 때, 태그 속성으로 "async"를 추가해 줍니다. "async"속성이 추가된 자바스크립트 파일은 HTML 파싱과 비동기로 로딩되고 실행 됩니다. 해당 속성으로 인해 HTML 페이지 파싱이 script 태그 파싱으로 인해 멈추지 않고 계속 진행됩니다.
<script src="file_path/process01.js" async></script>
<script src="file_path/process02.js" async></script>"async" 사용 시 주의할 점은 다음과 같습니다.
비동기로 로딩되기 때문에, 자바스크립트 파일 링크 순서에 상관 없이 로딩되며, 뒤에 있는 파일이 먼저 로딩되어 실행될 수 있습니다. 상호 의존적이거나 연관 관계가 있는 파일이나 코드들은 "async"를 사용하면 문제가 발생할 수 있습니다. 위와 같은 이유로 HTML 웹 페이지 로드 할 때마다 잘 실행 될 때도 있고, 에러가 날 때도 있습니다.
비동기로 가져오는 코드는 2번의 DOM 생성 여부를 체크하는 코드가 필수적이며, 실행 순서에 주의해서 연관 관계가 있는 코드들은 하나의 파일에 모아서 가져와서 사용해야 합니다.
4. defer
"async"의 문제를 해결하기 위해 만들어진 속성입니다. 비동기로 자바스크립트 코드를 로딩 및 실행 하지만, 순서대로 처리됩니다.
"async"와 가장 큰 차이점이 "순서대로"입니다. 즉, 스크립트 태그가 위치하는 순서로 실행됩니다.
또한, "defer" 속성의 자바스크립트는 DOM이 생성된 후 실행됩니다. 따라서 2번의 DOM 생성 여부 체크가 필요 없습니다.
"defer"는 가장 최신의 자바스크립트 코드 실행과 관련된 기술이고, 최신 웹 브라우저에서는 모두 지원하고 있습니다.
<script src="file_path/process01.js" defer></script>
<script src="file_path/process02.js" defer></script>'Projects > Camping Info' 카테고리의 다른 글
| [Camping info] 캠핑 정보 서비스 개발 (0) | 2022.05.19 |
|---|---|
| [Camping info] Folium과 Leaflet.js의 차이점과 용도 파악 (0) | 2022.05.19 |