[Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?

분석을 하게 된 배경⬇

사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서

기존의 제품을 script 태그 한줄로 외부 페이지에 import 시킬 수 있어야 했다.

 

하지만 현재 프로젝트의 구조는 모듈화가 전혀 진행되지 않은 상태이고 하나의 JS 파일에 모든 함수가 다 들어있는 구조적으로 안좋은.. 상황이었기 때문에 프로젝트 일정을 고려할 때, 모듈화 보다는 스크립트 태그로 제품을 불러올 수 있도록 하고 리액트 컴포넌트에서 렌더링 할 수 있도록 하는 방식을 채택했어야 했다.

 

그렇게 프로젝트 개선을 시작하고 보니 현재 HTML 페이지에서 자바스크립트 태그들을 어떻게 불러오는지에 대한 이해도가 필요하다고 생각해 분석을 시작하게 됐다.

---

 

이제 HTML페이지에서 스크립트 태그들을 어떻게 실행하는지와 비동기와 동기로 실행할 수 있는 방법에 대해서 알아보자.

 

HTML 페이지에서는 아래와 같이 태그들을 실행시키고 있다.

 

 1. HTML 파일을 브라우저에서 접근

 2. HTML 페이지의 태그를 위에서부터 순차적으로 파싱

 3. 스크립트(script) 태그를 발견하면 자바스크립트 코드 블록을 읽기
 -> 외부 자바스크립트 파일이라면 파일을 요청하기 위해 HTML 태그 파싱을 멈춤

 4. 스크립트 태그의 자바스크립트 코드, 또는 외부 자바스크립트 파일의 코드를 인터프러리팅(interpreting)해서 실행

인터프리팅 이란?
인터프리터(Interpreter): 코드를 한 줄 한 줄 읽어내려가며 한 줄씩 중간 단계의 Bytecode로 변환한다. 
(이 과정을 '인터프리팅'이라고 한다)* 자바스크립트는 기본적으로 인터프리터 언어이다

 5. 종료 태그(</script> 이후의 HTML 태그를 파싱 시작

 

 

자바스크립트에 대한 파싱이 오래 걸릴 경우 생기는 안좋은 예 (아래)

외부 자바스크립트에 대한 파일을 요청하면서 HTML 태그 파싱을 멈추게 되면 자바스크립트 파일의 크기에 따라서 렌더링이 오래 걸릴 수 있기 때문에 SEO에 안좋다.

브라우저가 HTML 페이지에서 태그를 파싱할 때, 태그 파싱을 멈추는 이유 (아래)

브라우저가 HTML 태그 파싱을 멈추는 이유는 자바스크립트 코드로 dom 핸들링을 할 수 있기 때문에 dom이 바뀌게 되면 HTML 태그 파싱을 다시 진행해야 하기 때문.

 

스크립트 태그 파싱 과정

 

스크립트 태그를 핸들링 하는 방법

 

- async

비동기로 로딩될 수 있도록 자바스크립트를 제어한다. 하지만 뒤에 존재하는 자바스크립트 파일이 먼저 로딩될 수 있기 때문에 상호 의존적이거나 연관 관계가 있을 경우 사용하면 안된다.

스크립트 태그 async 과정

 

- defer

async의 문제를 해결하기 위해 만들어진 속성, "async" 와 비동기로 처리된다는 점은 같지만 "순서대로" 처리된다.

defer 속성으로 정의한 자바스크립트는 DOM이 생성된 후에 실행된다.

스크립트 태그 defer 과정

 

 

이미지 출처 - JavaScript의 비동기 대 지연: 어느 것이 더 낫습니까? 🤔 - DEV 커뮤니티

---

 

이 외에 DOM 이벤트를 이용하여서 동적으로 추가하는 방식이 있지만 지금 내 상황에서는 어울리지 않는 방법이라

추가적으로 학습을 진행하지는 않았다.

 

이번에 리액트를 사용하게 되면서 레거시에 익숙한 내 코드 스타일과 마음가짐을 다시 잡을 수 있지 않을까 생각한다.