1. 문서에서 직접 DOM 작업을 직접 피하십시오 . 실제로 필요한 경우 해제 문서 메소드를 사용할 수 있습니다. 특정 방법에는 다음을 포함하지만 완전히 포함하지는 않습니다.
(1). 먼저 문서에서 요소를 삭제하고 수정을 완료 한 후 요소를 원래 위치로 다시 넣으십시오.
(2). 요소의 표시를 "없음"으로 설정하고 수정을 완료 한 후 디스플레이를 원래 값으로 수정하십시오.
(3). 여러 DOM 노드를 작성 해야하는 경우 DocumentFragment를 사용하여 DocumentFragment를 사용하여 문서를 한 번에 추가하여 DocumentFragment를 추가하여 문서를 추가 할 수 있습니다.
2. 중앙에서 스타일을 수정합니다
(1). 요소 스타일의 속성을 최대한 적게 수정하십시오.
(2). 클래스 이름을 수정하여 스타일을 수정하십시오
(3). CSSTEXT 속성을 통해 스타일 값을 설정하십시오
3. 캐시 레이아웃 속성 값
레이아웃 속성 (숫자 유형)의 비 참조 유형 값의 경우, 다중 액세스가 필요한 경우 먼저 한 번의 액세스에서 로컬 변수에 저장된 다음 로컬 변수를 사용하여 속성을 읽을 때마다 브라우저의 렌더링을 피할 수 있습니다.
var width = el.offsetWidth; var scrollleft = el.scrollleft;
4. 요소의 위치를 절대 또는 고정으로 설정
요소의 위치가 정적이고 상대적 일 때, 요소는 dom 트리 구조에 있습니다. 요소의 작업을 다시 렌더링 해야하는 경우 브라우저는 전체 페이지를 렌더링합니다. 요소의 위치를 절대 및 고정으로 설정하면 요소를 DOM 트리 구조와 분리 할 수 있으며 브라우저가 렌더링해야 할 때 요소와 요소를 요소 아래로 렌더링하면 시간이 어느 정도까지 줄어 듭니다. 이는 오늘날의 JavaScript 애니메이션에서 특히 고려해야 할 가치가 있습니다.
위의 내용은 브라우저 리플 로우 및 리 페인트 감소에 대해 저에게 요약 된 문제 중 일부입니다. 나는 모두가 그것을 좋아하기를 바랍니다.