HTML 스크립트 로딩 순서의 중요성(#티스토리 HTML에 script 적용이 안 될 때)

🛠️ Tool/FE

HTML 스크립트 로딩 순서의 중요성(#티스토리 HTML에 script 적용이 안 될 때)

seungineer = seungwoo + engineer 2024. 5. 23. 05:02

정글 동기들의 피드백을 받아서 블로그를 수정하고자 HTML 편집을 해보았다. 기존에는 사이드바 HTML 박스에 있던 github contribution graph를 블로그 상단으로 올리는 게 목적!

사이드바의 요소를 단순히 블로그 상단의 Header Div에 위치시키면 되겠거니 간단하게 생각했는데, 제대로 되지 않았다.

버그

사이드바에 있던 <script> ... </script>를 그대로 가져와서 <head> 내 위치시켰으나 스크립트가 제대로 작동하지 않았다. 위 이미지처럼 요소에 기본 문구로 넣어둔 'Loading data...'만 표시되었고, script가 작동되어 요소를 알맞은 형태로 수정해줘야 하는데 그러지 못 하고 있었다.

디버그

이 문제의 원인은 스크립트 로딩 순서의 문제였다.

HTML 문서는 브라우저에 의해서 파싱되어 DOM트리로 변환된다. HTML 문서는 위에서 아래로 순차적으로 파싱 되며, <script>를 만나게 되면 파싱을 일시 중지하고, 해당 스크립트를 실행한다. 이 순서를 몰랐어서 무지성(?)으로 Head 내 위치시켰었다.

<script>
    GitHubCalendar(".calendar", "seungineer", { responsive: true, tooltips: false, global_stats: false}).then(function() {
    });
</script>

입력하고자 했던 스크립트는 'calendar' class를 갖는 요소를 조작하는 것이다. 즉, Head 내 스크립트가 위치되었을 때는 파싱이 되지 않은 상태에서 스크립트가 실행되어 어떤 변화도 없이 넘어갔으며 파싱이 완료된 후에는 스크립트 태그가 실행되지 않아서 기본 문구로 넣어둔 문자만 표시된 것이다.

실제로 위 이미지처럼 </body> 태그 바로 앞에 <script> 태그를 위치시키자 정상적으로 calendar class를 수정하는 것을 확인할 수 있었다.

Script 태그 로딩 순서 관련 개념

스크립트 태그에 대해 찾아본 김에 스크립트 로딩 순서가 중요한 이유에 대해 좀 더 찾아보았다.

의존성 문제 : B 스크립트에서 A 스크립트에 의해 정의된 변수나 함수를 필요로 할 수 있다. 이때, A 스크립트가 로드되지 않은 상태에서 실행된다면, 에러가 발생하거나 오작동할 수 있다.
DOM 요소 : 오늘 겪었던 문제로, HTML 문서의 특정 요소에 조작을 시도하거나, 스크립트가 문서 상단에 위치해 있을 때 자주 발생할 수 있는 문제이다.
동기식(Synchronous), 비동기식(Asynchronous)로딩 : 동기식 로딩은 위 사례처럼 스크립트가 순서대로 하나씩 실행되며, 스크립트 로딩 중에는 HTML 문서의 나머지 부분이 로딩되지 않는다. 비동기식 로딩은 스크립트가 background에서 로드되며, 페이지의 다른 부분이 로딩되는 것을 방해하지 않는다. 그렇다고 의존성 문제가 완벽히 처리되지는 않는다.

이를 해결하기 위해서

스크립트 태그 위치 조정 : </body> 태그 바로 앞에 두어서 HTML 문서가 파싱이 모두 완료된 후에 스크립트가 실행되도록 하여 DOM 요소가 모두 로드된 후에 실행시킨다.
async, defer 속성 사용 : 스크립트가 비동기적으로 로드되도록 한다.
- async 속성: HTML 문서의 파싱 과정과 동시에 스크립트가 로드되지만 파싱 완료 후 스크립트가 실행된다. 다만 스크립트 실행 순서는 보장되지 않는다. 주로 분석 툴과 같이 문서 파싱과 순서에 크게 영향을 받지 않는 태그에 사용한다.
- defer 속성: HTML 문서의 파싱 완료 후에 스크립트 태그가 실행된 순서대로 실행된다. 그래서 실행 순서가 중요한 스크립트에 적합하다.
모듈 로더 또는 번들러 사용하기 : 웹팩(webpack)이나 RequireJS 같은 모듈을 사용하여 스크립트의 의존성을 관리(의도된 순서대로 로드)할 수 있다.

async, defer 사용 예시

<script async src="analytics.js"></script>

<script defer src="script1.js"></script>
<script defer src="script2.js"></script>

'🛠️ Tool > FE' 카테고리의 다른 글

[PS] 스택 자료 구조를 사용하는 게 효과적인 상황 (1)	2024.08.21
[LeetCode-JS 30 days] #3.Function Transformations - 1(#함수객체) (1)	2024.08.09
[LeetCode-JS 30 days] #2. Array Transformation - 1(#순회) (0)	2024.08.06
[LeetCode-JS 30 days] #1. Closures 개념 - 1(#은닉 #보존) (1)	2024.08.03

현재글HTML 스크립트 로딩 순서의 중요성(#티스토리 HTML에 script 적용이 안 될 때)

seungineer