[자바스크립트] 브라우저 렌더링

주민콩·2023년 1월 4일
0
post-thumbnail

자바스크립트 렌더링에 알아보던 중 DOM요소 조작을 많이하면 웹 성능이 떨어진다고 한다.
그래서 브라우저의 렌더링에 대해 알아보았다.

1. HTML 문서 파싱 및 DOM tree 생성

클라이언트가 서버에 HTML을 요청하면 바이트 형태로 HTML 문서를 응답받는다.
이 때 해당 문서에 정의한 인코딩 방식(UTF-8과 같은)에 따라 기존의 HTML문서처럼 문자열 형태로 변환한다. 이후 문자열로 된 HTML을 문서를 문법적 최소 단위인 토큰으로 분해한다.

토큰으로 분해된 HTML 문서들이 문서의 객체로 변환하여 각각 노드를 생성한다.
노드가 생성되면 노드들의 관계에 따라 DOM tree가 생성된다.
그래서 아래처럼 최상위 객체인 document를 시작으로 관계에 따라 DOM이 생성된다.

여기서 잠깐 DOM이란 🤔❓

💡 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(데이터)를 생성한다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 contents를 렌더링한다.

DOM의 목적 🌳

DOM은 자바스크립트를 이용하여 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공하는 것이다.

2. CSS 파싱과 CSSOM 생성

DOM tree를 생성하다가 link태그나 style태그를 만나면 HTML의 DOM생성을 멈추고 CSS파일을 로드하거나 <style>에 대한 CSSOM을 생성한다.
과정은 HTML처럼 문자열 변환 -> 토큰 분해 -> 노드 생성 -> CSSOM 생성 순서가 된다.
이 때 알 수 있는 내용은 style에 대한 정보가 늦게 처리된 것 부터 먼저 적용된다.
즉, 가장 마지막에 처리된 것이 최종적으로 적용되기 때문에 <link>를 통해 받아온 외부 스타일보다 요소에 직접 정의한 인라인 스타일이 적용되는 것이다.

3. 렌더 트리 생성

위에서 생성된 DOM과 CSSOM은 렌더 트리로 구성된다.
브라우저 화면에 표시되지 않는 것은 display: none;과 같은 css에 의한 스타일이나 <meta>,<script> 와 같은 것이다. 이것들은 렌더 트리에 포함되지 않는다.

렌더 트리가 생성되면 렌더 트리를 활용하여 HTML 요소들의 레이아웃을 계산한다.
그리고 페인트 과정을 통해 브라우저 화면에 출력 된다.
렌더 트리가 변경되면 레이아웃 계산과 페인트 과정이 다시 일어난다.
자바스크립트를 통해 요소를 삽입하고 삭제하거나 레이아웃, 스타일 등을 변경할 때 렌더링 과정을 다시 진행하게 된다. 따라서 빈번하게 DOM을 조작하거나 스타일을 변경하는 것은 피해야한다.

4. 자바스크립트 생성

DOM트리를 생성하는 과정은 위에서 아래로 직렬적으로 진행된다.
그래서 <script>를 만나면 DOM생성 과정을 멈추고 자바스크립트를 실행하게 된다.
이후 자바스크립트 생성이 완료되면 다시 DOM을 생성하기 때문에 자바스크립트에서 아직 생성되지 않은 DOM을 조작할 수 없다고 한다.
*따라서 <script>를 가장 아래에 추가해주는것이 좋다.

5. 리플로우와 리페인트

자바스크립트는 DOM API를 통해 DOM 조작을 할 수 있다.
DOM 조작으로 노드를 추가 또는 삭제, 스타일 또는 레이아웃 변경 등을 하면 렌더링이 다시 진행된다. 여기서 렌더 트리가 변경되고 변경된 렌더 트리를 기반으로 레이아웃, 페인트 과정이 진행되는데 이를 리플로우와 리페인트라고 한다.

리플로우레이아웃에 대한 계산을 다시 진행하는 것 이며
리페인트렌더 트리와 계산된 레이아웃을 통해 브라우저 화면에 다시 페인트하는 것 을 말한다.
이때 레이아웃에 대한 변경은 진행되지 않았을 때는 리플로우없이 리페인트만 진행될 수도 있다.

구글링을 통해 브라우저 렌더링 과정을 공부하게 됐는데 간단하게 정리하자면 아래와 같다.

  1. HTML 문서 파싱 및 DOM 트리 생성
  2. CSS 파싱과 CSSOM 생성
  3. 렌더 트리 생성
  4. 자바스크립트 생성
  5. 리플로우와 리페인트
profile
코딩하면서 기록하는 메모장 ᰔ

0개의 댓글