[JavaScript] 브라우저의 렌더링 구조 정보

날과 씨

일 때문에 무대 위의 공연을 조정해야 한다.
물론 전방의 성능 조정을 위해 브라우저의 렌더링 구조를 이해할 필요가 있다.
이번에는 브라우저의 렌더링 구조에 대한 조사를 총결하였다.

참고 자료

서적.

웹 프런트엔드 고성능 튜닝

뉴스.

체계적인 지식을 장기간 사용하다
실제로 브라우저를 시작하여 페이지를 표시하기 전에 어떤 일이 일어날까요
[프런트엔드] 브라우저 렌더링의 구조를 이해하고 브라우저에 대한 부드러운 JavaScript 쓰기
Life of a Pixel

브라우저 렌더링의 구조

크게 네 개로 나뉜다.

Loading

Scripting

Rendering

Painting

Loading

자원을 다운로드하고 HTML을 해석하며 DOM의 구조에 빠집니다.
여기서 설명하는 리소스는 HTML, CSS, JS, 이미지 파일(JPEG 등)을 가리킵니다.
자세히 분해하면 다음 절차가 된다.

Loading(리소스 다운로드)

Parse(리소스 해결)

Loading(리소스 다운로드)

URL을 기반으로 에셋을 다운로드합니다.
다운로드에 사용된 네트워크 구성의 경우 TCP/IP를 사용합니다.
다운로드 전의 절차는 다음과 같다.

호스트 이름 확인

HTTP를 통해 획득

TCP 연결 설정

TLS 접속 구성

HTTP 요청 및 응답 전송

Parse

HTML을 설명하고 DOM을 구성합니다.
브라우저는 이를 기반으로 구축된 DOM 트리를 렌더링합니다.
또한 CSS의 DOM 등의 트리도 구축됩니다.(CSSOM)

인용자 렌더 트리의 구성, 배치 및 그리기

Scripting

여기서 Javascript를 실행합니다.
구체적으로 JS 코드를 JS 엔진에 인계한 후 실행합니다.

Rendering

Layout Tree 구축
주로 두 가지 처리를 집행하다.

Calculate Style

Layout

Calculate Style

DOM 요소에 할당된 CSS를 계산합니다.
간단히 말해서, 나는 DOM과 CSSOM이 일치한다고 이해한다.
별것 아니다
일치할 때 처리해야 할 계산을 가리킨다.(구체적인 발굴은 없었다...)
그리고 엔진이 오른쪽에서 왼쪽으로 해석되는 것을 보여준다.

Layout

판식 정보를 계산하다.
레이아웃 정보에는 요소 크기, 요소 간격, 채우기 및 요소 위치 등이 포함됩니다.
DOM과 CSSOM을 결합한 Layout Tree가 완성됩니다.

인용자 렌더 트리의 구성, 배치 및 그리기

Painting

마지막으로 드로잉으로 이동합니다.
구체적으로 요소와 스타일을 각 픽셀로 낮추는 작업을 진행할 것이다.

Paint

Rasterize

Composite Layers(레이어의 합성)

다음 서술은 매우 이해하기 쉽다.
Life of a Pixel
[프런트엔드] 브라우저 렌더링의 구조를 이해하고 브라우저에 대한 부드러운 JavaScript 쓰기