[10분 테크톡] 결의 브라우저 렌더링 후기

 

 

웹 프론트엔드 개발자라면 브라우저 렌더링이 어떻게 진행되는지 알고 있어야 더욱 효율적이고 성능 친화적(?)으로 시스템을 설계하고 구현할 수 있다고 생각한다.

특히 이전에 렌더링 횟수로 인한 메모리 누수를 막기 위해 많은 노력을 봤었기 때문에 렌더링이 어떻게 진행되는지 알고 있는 것이 매우 중요하다고 느꼈다.

이전과 달리 특히 웹 개발자로 전향해서 준비하고 있는 나에게 브라우저에서 렌더링 과정은 반드시 알아야만 하는 개념인 것이다. 그리고 브라우저가 어떻게 렌더링하는지에 따라 사용자 경험에 많은 영향을 끼치기 때문에 웹 프론트엔드 개발자라면 짚고 넘어가야 한다.

 

목차

• 브라우저란?
•  

 

브라우저란?

1. 브라우저 : html 문서, 이미지, 폰트 등의 사용자가 선택한 자원을 전송 및 표현하는 소프트웨어
   1. e.g. 크롬, 파이어폭스, 사파리, IE, Edge
   2. HTML과 CSS 명세에 따라 HTML을 표시
   3. HTML과 CSS는 웹 표준에 따라 명세가 정해짐
2. 웹 표준 : 팀 버너스리를 중심으로 WWW을 위한 표준을 개발하고 장려하는 조직인 W3C에 의해 개발
   1. 웹 초창기에는 웹 브라우저의 파편화 현상이 심했음
      1. 웹 브라우저의 파편화 현상 -> 웹페이지를 렌더링할 때 브라우저 별로 뷰가 달라지거나 웹 API 활용 값이 상이한 문제가 발생
      2. 2019년 W3C와 WHATWG가 합의해서 HTML을 하나의 버전으로 통합

 

브라우저의 주요 구성요소

1. 사용자 인터페이스 : 주소 표시줄, 앞/뒤 버튼, 북마크 등 사용자가 요청한 페이지를 제외한 모든 부분을 지칭
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에서 동작을 제어하는 엔진
   1. 렌더링 엔진과 레이아웃 엔진으로 구분 가능 -> 실제로는 밀접하게 결합
3. 렌더링 엔진 : 요청 받은 내용을 브라우저에 나타내는 일을 하는 엔진
4. 자바스크립트 해석기 : 컴퓨터가 이해하지 못하기 때문에 컴파일러나 인터프리터가 필요

 

브라우저의 흐름

1. 사용자가 주소 표시줄에 주소를 입력
2. UI 스레드는 입력되는 내용이 검색어인지 URL인지 확인
   1. 입력된 내용을 파싱하여 검색 결과로 이동할지 요청한 사이트로 이동할지 결정
3. 사용자가 enter를 누르면 UI 스레드가 네트워크 호출을 시작
4. 네트워크 스레드는 요청을 처리하고 응답이 HTML 파일이라면 응답 결과를 렌더러 프로세스에 전달
5. HTML 데이터를 수신하기 시작하면 렌더러 프로세스의 메인 스레드는 HTML을 파싱해서 DOM 트리로 변환
6. CSS 파일이 정의되어 있거나 html 태그에 정의한 style 요소가 있다면 지정한 스타일로, 스타일을 따로 지정하지 않은 element는 브라우저 상에서 기본적으로 가지고 있는 스타일로 모든 정보들을 합쳐서 CSSOM 트리를 구축
7. DOM트리와 CSSOM 트리를 결합하여 렌더 트리를 형성
   1. 렌더 트리 : 최종적으로 화면에 표시되는 모든 노드와 노드의 스타일 정보를 포함
8. 레이아웃 단계로 넘어와서 페이지에 출력될 노드들의 크기와 위치, 레이어간의 순서 정보를 계산
   1. 레이어 개념이 브라우저 렌더링 시 도입되는 이유 : z축을 활용하는 3차원 개념을 렌더링 과정에 삽입하기 위함
   2. 쌓임 맥락(stacking context) : 가상의 z축을 사용한 HTML 요소의 3차원 개념
      1. e.g. element의 z-index 속성을 지정하지 않더라도 최상위 element를 가장 아래에 두고 하위 element들은 위로 쌓임
      2. 이 과정은 HTML 문서의 최상위 요소에서 시작하고 재귀적으로 실행됨
   3. 레이아웃 과정에서 노드가 많아지면 속도는 당연히 느려짐 -> 브라우저는 자체적으로 최적화 로직을 탑재하고 있음
      1. e.g. 더티 비트 시스템 : 특정 element가 변경이나 추가 때문에 다시 배치가 필요하다면 해당 element를 더티라고 표시 (메모이제이션) -> 레이아웃이 재귀적으로 실행될 때 더티 엘리먼트 부분만 다시 계산하여 리소스의 낭비를 줄일 수 있음
      2. 즉시 수행하지 않고 비동기로 일괄 작업 -> 연산 횟수 감소
   4. 복잡한 변경이나 많은 추가가 있는 경우 브라우저 최적화만으로 충분하지 않음 -> 연산 최소화
9. 페인트 : 레이아웃 단계를 통해 배치된 element에게 색을 입히고 레이어의 위치를 결정
   1. HTML 최상위 문서부터 재귀적으로 실행
   2. z-index가 낮은 순서대로 먼저 페인팅 됨

 

Reflow, Repaint

1. reflow : 레이아웃, 페인트를 모두 재실행
2. repaint : 페인트를 재실행
3. composite : 레이어들을 최종적으로 합성하는 단계

 

쌓임 맥락을 생성하는 특별한 속성

 

성능 최적화 방법

1. performance 탭을 키고 이게 진짜로 동작하는 것인지 의심하고 검증