브라우저의 다시 그리기 및 리플로우 개념 분석

이 글의 내용은 브라우저에서의 다시 그리기 및 리플로우에 대한 개념적 분석입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 렌더링 트리
1. 브라우저는 획득한 HTML 코드를 DOM 트리로 구문 분석합니다. HTML의 각 태그(태그)는 DOM 트리의 노드이며, 루트 노드는 우리가 일반적으로 사용하는 문서 객체입니다. DOM 트리에는 숨겨진 표시: 없음, JS 등으로 동적으로 추가된 요소 등을 포함한 모든 HTML 태그가 포함되어 있습니다.

2 브라우저는 모든 스타일(사용자 정의 CSS 및 사용자 에이전트)을 스타일 구조로 구문 분석합니다. 예를 들어 IE는 -moz로 시작하는 스타일을 제거하고, Firefox는

3으로 시작하는 스타일을 제거합니다. 렌더 트리는 DOM 트리와 유사하지만 차이점이 매우 큽니다. 렌더 트리의 각 노드에는 고유한 스타일이 있으며, 렌더링 트리에는 숨겨진 노드가 포함되어 있지 않습니다. display:none 노드 및 헤드 노드로) 이러한 노드는 렌더링에 사용되지 않으며 렌더링에 영향을 주지 않기 때문입니다.

2. 다시 그리기 및 리플로우 정의
Redraw: 현재 요소의 스타일(배경색, 글꼴 색상 등)이 변경되면 변경된 요소만 다시 렌더링하고 다시 렌더링하면 됩니다. .드로잉은 브라우저 성능에 거의 영향을 미치지 않으므로 일반적으로 고려되지 않습니다.

다시 그리기가 발생하는 경우: 배경: 검정색 등 컨테이너의 모양 스타일을 변경합니다. 모양을 변경해도 레이아웃이 변경되지 않으며 다른 DOM에 영향을 주지 않습니다.

Reflow: 문서의 일부 또는 전체를 다시 렌더링하기 위해 브라우저가 문서에 있는 요소의 위치와 기하학적 구조를 다시 계산하는 프로세스를 말합니다.
리플로우로 인해 전체 DOM 트리가 재구성될 수 있으므로 성능이 크게 저하됩니다.
한 요소의 리플로우로 인해 모든 하위 요소와 DOM에서 바로 다음 상위 요소가 후속 리플로우됩니다.

3. 리플로우를 유발하는 작업
1. 창 크기 조정

2. 글꼴 변경

3. 스타일시트 추가 또는 제거(스타일시트 추가 또는 제거)

4. 입력 상자(사용자가 입력 상자에 텍스트를 입력하는 등 콘텐츠 변경)

5. hover(IE에서 형제 노드 의사 클래스 활성화)와 같은 CSS 의사 클래스 활성화(예: CSS 의사 클래스 활성화) as :hover (IE에서 형제의 의사 클래스 활성화)

6. 클래스 속성 조작(클래스 속성 조작)

7. DOM을 조작하는 스크립트

8. offsetWidth 및 offsetHeight 계산)

9. 스타일 속성 설정(style 속성 설정)

10. 스크롤 막대를 드래그하면 고정 위치 요소가 이동됩니다. 리플로우를 방지하는 방법

1. 함께 변경: 요소의 스타일을 변경하려면 여러 번 변경하는 대신 모든 스타일을 하나의 클래스에 집중하여 한 번 변경하면 됩니다.2. 애니메이션 효과가 있는 경우 절대를 사용하세요. 3. . 테이블 레이아웃 사용을 피하세요
4. CSS 표현식을 사용하지 마세요
5. 마지막에 요소를 변경하세요
6. 애니메이션이 움직일 때 제어가 필요합니다
예를 들어 요소를 드래그하면 x 또는 y 좌표가 변경됩니다. 5px씩 감소하지만 성능은 향상됩니다.
7. 애니메이션 효과와 같은 복잡한 성능을 변경하려면 이 흐름 라인 외부에서 위치 절대 또는 위치 고정을 사용하세요. offsetWidth를 계산하면 리플로우가 발생하므로 변수를 사용하여 저장하세요.
9. 문서에 노드를 추가해야 할 경우 문서 조각화를 사용하여 DOM에 새 요소를 추가할 때 먼저 해당 요소를 그런 다음 균일하게 추가하여 하나의 리플로우만 생성되도록 합니다

관련 권장 사항:

js에서 자체 실행 함수를 호출하는 두 가지 방법

로컬 개체 및 내장 개체 분석 요약 js

의 호스트 객체

위 내용은 브라우저의 다시 그리기 및 리플로우 개념 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!