브라우저 렌더링 원리

브라우저는 컴퓨터 혹은 모바일에서 가장 많이 사용하는 소프트웨어일 것 입니다. 그렇다면 브라우저는 정보를 어떠한 과정을 걸쳐 화면에 표시하는것 일까요? 간단하게 알아보도록 하겠습니다.

 

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서입니다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다. 브라우저의 구성요소는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있습니다. 여기서 저는 화면을 표시하는 부분인 렌더링 엔진에 대해서 알아보도록 하겠습니다.

 

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일을 합니다. HTML 및 XML 문서와 이미지를 표시할 수 있습니다. 렌더링 엔진은 브라우저마다 다릅니다. 

 

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻은 것으로 시작합니다. 아래는 기본 동작 과정을 요약한 그림입니다.

출처: https://d2.naver.com/content/images/2015/06/helloworld-59361-2.png

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성합니다. 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시됩니다.

렌더 트리가 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정을 합니다. 일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요합니다. 

 

동작 과정 상세 (예: 웹킷)

출처: https://d2.naver.com/content/images/2015/06/helloworld-59361-3.png

1. HTML을 파싱하여 DOM 노드를 만듭니다. 이 DOM 노드들을 병합하여 DOM 트리를 만듭니다.
2. CSS를 파싱하여, 스타일 규칙을 만듭니다.
3. DOM 트리와 스타일 규칙을 사용하여, 어테치먼트 라는 처리를 하여 렌더 트리를 생성합니다.
4. 렌더 트리를 배치합니다.
5. 렌더 트리를 화면에 그립니다.

각 단계별로 자세한 설명은 아래의 참고사이트를 이용하면 자세한 설명이 있습니다. 가장 중요한 것은 아래 5단계입니다.

1. DOM 파싱: HTML 마크업을 처리하고 DOM 트리를 생성
2. CSS 파싱: CSS 마크업을 처리하고 스타일규칙 생성
3. 어테치먼트: DOM 트리와 스타일 규칙을 결합하여 렌더 트리 생성
4. 배치: 렌더 트리에서 각 노드의 기하학적 형를 계산
5. 그리기: 개발 노드를 화면에 그림

 

참고사이트

https://d2.naver.com/helloworld/59361

https://chanyeong.com/blog/post/43

브라우저 렌더링과 최적화 - chanyeong

https://beomy.github.io/tech/browser/browser-rendering/

[Browser] 브라우저 렌더링