JavaScript_Basic 지식으로 Repaint 및 Reflow 사용법에 대한 자세한 설명

CSS 와일드카드 *를 사용할 수 없고, CSS 선택기 스택은 3단계를 초과할 수 없으며, CSS에서는 클래스 선택기를 최대한 사용하고, HTML을 작성할 때 테이블을 덜 사용하고, 구조는 가능한 한 단순해야 합니다. - DOM 트리 이러한 조언을 기다리면서 저는 와일드카드나 너무 많은 수준의 CSS 선택기를 사용하면 성능이 저하될 수 있다는 것을 대략적으로 알고 있었습니다. 왜 테이블 태그를 사용하지 않는지에 대해 항상 혼란스러웠습니다. 그래서 그냥 따라해봤는데 Repain과 Reflow를 알게 되니 이것들은 정말 많이 쓸 수 없다는 걸 알게 됐어요. 네, 이 글이 여러분에게 도움이 되기를 바랍니다!

1. 리페인트/리플로우란?

그럼 먼저 사진을 찍겠습니다: 브라우저 구문 분석의 일반적인 작업 흐름

이 그림은 이해하기 쉬워야 하며 다음 네 단계로 요약할 수 있습니다.

1. HTML을 구문 분석하여 DOM 트리 구축: 렌더링 엔진은 HTML 문서를 구문 분석하고 트리의 html 태그 또는 js에서 생성된 태그를 -- 콘텐츠 트리라고 하는 DOM 노드로 변환하기 시작합니다.
2. 렌더링 트리 구축: CSS(외부 CSS 파일, 스타일 요소 및 js에서 생성된 스타일 포함)를 구문 분석하고, CSS 선택기를 기반으로 노드의 스타일을 계산하고, 또 다른 트리인 렌더링 트리를 생성합니다.
3. 레이아웃 렌더링 트리: 루트 노드에서 재귀적으로 호출되어 각 요소의 크기, 위치 등을 계산하고 각 노드에 화면에 표시되어야 하는 정확한 좌표를 제공합니다.
4. 렌더링 트리 그리기: 렌더링 트리를 탐색하면 UI 백엔드 레이어를 사용하여 각 노드가 그려집니다.

자, Repain과 Reflow가 각각 3단계와 4단계에 나타나는 것을 볼 수 있습니다. 따라서 우리는 다음과 같이 정의합니다:

DOM 구조의 각 요소에는 자체 상자(모델)가 있으며, 이를 위해서는 브라우저가 다양한 스타일(브라우저, 개발자 정의 등)에 따라 계산하고 계산 결과에 따라 그 안에 요소를 배치해야 합니다. 리플로우라고 합니다. 색상, 글꼴 크기 등과 같은 다양한 상자의 위치, 크기 및 기타 속성이 결정되면 브라우저는 해당 특성에 따라 이러한 요소를 그려서 페이지의 내용이 나타납니다. 프로세스를 다시 그리기라고 합니다.
이 두 가지 사항은 브라우저가 페이지를 렌더링하는 데 매우 중요하며 성능에 영향을 미친다는 것을 알 수 있습니다. 따라서 다시 그리기 및 리플로우를 유발하는 몇 가지 일반적인 작업을 이해해야 하며 이를 최소화해야 합니다. 렌더링 속도.

2. Repain 및 Reflow를 유발하는 일부 작업

리플로우 비용은 리페인트 비용보다 훨씬 높습니다. DOM 트리의 각 노드에는 리플로우 방법이 있습니다. 노드의 리플로우는 하위 노드 또는 심지어 상위 노드 및 형제 노드의 리플로우로 이어질 가능성이 있습니다. 일부 고성능 컴퓨터에서는 괜찮을 수도 있지만 휴대폰에서 리플로우가 발생하면 그 과정이 매우 고통스럽고 전력 소모가 심합니다.
따라서 다음 조치에는 상대적으로 비용이 많이 들 가능성이 높습니다.

• DOM 노드를 추가, 삭제, 수정하면 Reflow나 Repaint가 발생합니다.
• DOM의 위치를 ​​이동하거나 애니메이션을 생성할 때.
• CSS 스타일을 수정할 때.
• 창 크기를 조정할 때(모바일 버전에서는 이 문제가 없음) 스크롤할 때.
• 웹페이지의 기본 글꼴을 수정하는 경우.

참고: display:none은 리플로우를 트리거하는 반면 visible:hidden은 위치 변경이 발견되지 않기 때문에 다시 그리기만 트리거합니다.
3. 어떻게 최적화하나요?

리플로우는 불가피하며, 리플로우가 성능에 미치는 영향은 최소화할 수 있습니다.

DOM 스타일을 하나씩 수정하지 마세요. 이렇게 하는 대신 CSS 클래스를 미리 정의한 다음 DOM 클래스 이름을 수정하는 것이 더 좋습니다.

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

DOM을 오프라인으로 전환한 후 수정하세요. 예:
a> documentFragment 객체를 사용하여 메모리에서 DOM을 작동합니다.
b> 먼저 DOM display:none(1회 다시 그리기)을 지정한 다음 원하는 대로 변경할 수 있습니다. 예를 들어 100번 수정한 후 다시 표시해 보세요.
c> DOM 노드를 메모리에 복제한 다음 원하는 대로 변경합니다. 변경이 완료된 후 온라인 노드와 교환합니다.

루프에 DOM 노드의 속성 값을 변수로 넣지 마십시오. 그렇지 않으면 노드 속성에 대한 읽기 및 쓰기 횟수가 많아지게 됩니다.

하위 수준 DOM 노드를 최대한 수정하세요. 물론 하위 레벨 DOM 노드를 변경하면 리플로우 영역이 넓어질 수 있지만 영향도 작을 수 있습니다.

애니메이션 HTML 요소에 고정 또는 절대 위치를 사용하는 경우 해당 CSS를 수정하면 리플로우가 크게 줄어듭니다.

테이블 레이아웃을 사용하지 마세요. 작은 변화로 인해 전체 테이블이 재배열될 수 있기 때문입니다.

이것을 이해하고 나면 브라우저의 원리에 더 관심이 생기나요? 좋습니다. 나중에 브라우저 원리에 대한 기사를 업데이트하겠습니다. 아니면 다른 항목을 먼저 검색해도 됩니다. 브라우저의 원리를 이해하는 것이 정말 중요하기 때문에 더 나은 성능으로 웹사이트를 작성하는 데 도움이 될 수 있습니다.