지수의 블로그

2 분 소요

[TIL]

WEB - 브라우저

브라우저 렌더링 과정

자바스크립트 파싱과 실행

DOM API

DOM을 변경할 수 있는 API를 제공하는 것.

렌더링 엔진이 HTML 문서를 파싱한 결과물로서 DOM을 생성한다.

그리고 이 DOM은 문서의 구조와 정보뿐만 아니라 HTML 요소와 스타일을 변경할 수 있는 DOM API를 제공한다.

자바스크립트 코드에서 DOM API를 사용하면(가져다 쓰면) 이미 생성된 DOM을 동적으로 조작할 수 있다.


자바스크립트 파싱

렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가

자바스크립트 파일을 로드하거나 자바스크립트 코드를 가지는 script 태그를 만나면 DOM 생성을 일시 중지한다.

그러고 자바스크립트 파일을 서버에 요청해서 로드한 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.

이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘기고, HTML 파싱이 중단된 지점부터 다시 HTML 파싱을 시작하여 DOM 생성을 재개한다.


자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 low-level language로 변환하고 실행하는 역할을 한다.

자바스크립트 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

자바스크립트 엔진 종류
-> 크롬의 V8, 파이어폭스의 SpiderMongkey, 사파리의 JavaScriptCore 등

렌더링 엔진이 DOM과 CSSOM을 생성하듯 자바스크립트 엔진은 자바스크립트를 해석해서 AST(Abstract Syntax Tree/추상적 구문 트리)를 생성한다.


리플로우와 리페인트

리플로우와 리페인트란?

자바스크립트 코드에서 DOM API를 사용하여 DOM / CSSOM을 변경한 경우, 변경된 DOM / CSSOM이 다시 렌더 트리로 결합되는데,
이 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저 화면에 다시 렌더링하는 것.

리플로우: 레이아웃 계산을 다시 하는 것. 노드 추가/삭제, 요소 크기/위치 변경 등 레이아웃에 영향을 주는 변경이 발생한 경우 실행

리페인트: 재결합된 렌더 트리를 기반으로 다시 브라우저 화면에 나타내는 것.

-> 레이아웃에 영향이 없는 변경일 경우 리플로우 없이 리페인트만 될 수도 있다.


async와 defer

  • HTML 파싱 중단

    브라우저는 동기적으로 HTML, CSS, JS를 파싱하고 실행한다.
    따라서, script 태그나 link 태그 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다.

    위의 상황에서 만약 script 태그에서 HTML DOM 요소를 사용하는 코드가 있다면 실행되지 않는다.
    왜냐하면 script가 파싱되고 실행이 되면서, HTML 파싱 즉, DOM 생성이 중단되기 때문에 script에서 없는 노드를 참조하고 있기 때문이다.

    -> 그래서 자바스크립트 코드의 위치는 body 요소 가장 아래에 배치하는 것이 좋다.

    (DOM을 모두 생성한 후에 script 파싱/실행할 수 있도록 하면 페이지 로딩 시간도 단축 된다.)

  • async / defer

    HTML5부터 DOM 생성 blocking 방지를 해결하기위해 script 태그에 async와 defer 어트리뷰트가 도입되었다.

    * src로 script 코드를 불러오는 경우에만 사용 가능, 직접 script 안에 코드를 작성한 경우에는 동작하지 않음

    async와 defer를 사용하면 HTML 파싱과 자바스크립트 파일의 로드가 비동기적으로 진행된다. 차이점은 아래와 같다.

    - async: 자바스크립트 파일의 로드가 완료된 직후 진행된다. 자바스크립트 파일이 실행되면 HTML 파싱은 중단된다. 또한, 여러 개의 자바스크립트 파일이 있을 때 로드 시작은 순서대로지만, 로드가 완료되는 시점은 모두가 다 다르므로 어떤 스크립트가 먼저 실행이 될지 모른다.

    - defer: 자바스크립트 파일의 로드는 똑같이 비동기적으로 script 태그를 만나면 진행이 되지만, 자바스크립트 파싱과 실행은 HTML 파싱이 완료(DOM 생성이 완료)된 후에 진행된다.

댓글남기기

참고