프런트엔드 브라우저 렌더링 단계 소개

이 글은 프론트엔드 브라우저 렌더링 단계를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

브라우저 렌더링에는 5단계가 있습니다.

• HTML 처리 및 DOM 트리 구축

• CSS를 처리하여 CSSOM 트리 구축

• DOM과 CSSOM을 하나의 렌더링 트리로 병합

• 렌더링 트리에 따라 배치하고, 각 노드의 위치를 ​​계산합니다

• GPU를 호출하여 그리고 레이어를 합성하여 화면에 표시합니다

네번째와 다섯번째 단계가 가장 시간이 많이 걸립니다- 부품을 소비하는 것을 합쳐서 우리는 렌더링이라고 부릅니다.

다시 그리기와 리플로우는 렌더링 단계의 작은 부분이지만 이 두 단계는 성능에 큰 영향을 미칩니다.

Repaint

다시 그리기는 노드가 해야 할 때입니다. 예를 들어, 색상을 변경하는 것을 다시 그리기라고 합니다.

다시 그리기를 유발하는 일반적인 속성:

color
border-style
visibility
background
text-decoration
outline
box-shadow

리플로우(리플로우)

리플로우는 레이아웃이나 기하학적 속성을 변경해야 하는 경우를 리플로우라고 합니다.

리플로우로 인해 반드시 다시 그리기가 발생하고 다시 그리기가 반드시 리플로우를 트리거하는 것은 아닙니다. 리플로우 비용은 다시 그리기 비용보다 훨씬 높습니다.

일반적인 리플로우 속성 및 방법:

표시되는 DOM 요소 추가 또는 삭제
요소 크기 변경; - 가장자리 간격, 안쪽 여백, 테두리, 너비 및 높이
사용자가 입력 상자에 텍스트를 입력하는 등 콘텐츠 변경
브라우저 창 크기 변경 - 크기 조정 이벤트 발생 시
offsetWidth 및 offsetHeight 속성 계산
스타일 값 설정 속성

리플로우 영향 범위

글로벌 범위: 루트 노드 html부터 시작하여 전체 렌더링 트리를 릴레이아웃합니다.
로컬 범위: 렌더링 트리 또는 렌더링 객체의 특정 부분을 릴레이아웃합니다

위 내용은 프런트엔드 브라우저 렌더링 단계 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!