브라우저 리플로우 및 repaint_javascript 트릭을 줄이는 방법

1. 문서에서 직접 DOM 작업을 자주 수행하지 마세요. 필요한 경우 다음과 같은 특정 방법을 사용할 수 있습니다.

(1) 먼저 문서에서 요소를 삭제한 다음 수정을 완료한 후 요소를 원래 위치로 되돌립니다
(2) 요소의 표시를 "없음"으로 설정하고, 수정 완료 후 표시를 원래 값으로 수정합니다
(3) 여러 개의 DOM 노드를 생성해야 하는 경우 DocumentFragment를 사용하여 생성하고 document

에 한 번에 추가할 수 있습니다.

2. 중앙에서 스타일 수정

(1) 요소 스타일의 속성을 최대한 적게 수정하세요
(2) className
을 수정하여 스타일을 수정해보세요. (3) cssText 속성

을 통해 스타일 값을 설정합니다.

3. 레이아웃 속성값 캐싱 ​​

Layout 속성의 비참조 유형 값(숫자 유형)의 경우 여러 번 액세스해야 하는 경우 한 번의 액세스 중에 먼저 로컬 변수에 저장한 다음 로컬 변수를 사용할 수 있습니다. 매번 속성을 읽지 마십시오. 브라우저 렌더링이 발생합니다.
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

4. 요소의 위치를 ​​절대 또는 고정으로 설정합니다

요소의 위치가 정적이고 상대적인 경우 요소는 DOM 트리 구조에 있습니다. 요소에 대한 작업에 다시 렌더링이 필요한 경우 브라우저는 전체 페이지를 렌더링합니다. 요소의 위치를 ​​절대 및 고정으로 설정하면 해당 요소가 DOM 트리 구조와 독립적으로 존재할 수 있으며, 브라우저는 렌더링해야 할 때 해당 요소와 그 아래 요소만 렌더링하면 되므로 시간이 어느 정도 단축됩니다. 브라우저 렌더링 시간은 Javascript 애니메이션 수가 증가하는 오늘날 특히 고려할 가치가 있습니다.

위 내용은 브라우저 리플로우와 리페인트 감소에 관해 제가 개인적으로 요약한 내용입니다. 모두 마음에 드셨으면 좋겠습니다.