웹 페이지 성능 향상: 리플로우 및 다시 그리기의 스트레스를 줄입니다.

웹 페이지 성능 최적화: 리플로우 및 다시 그리기로 인한 부담을 줄이고 특정 코드 예제가 필요합니다.

인터넷이 빠르게 발전하는 현 시대에 웹 사이트 성능은 사용자 경험과 웹 사이트 순위 모두에 중요합니다. 사용자는 로딩 프로세스를 기다리지 않고 웹사이트를 열자마자 즉시 콘텐츠를 볼 수 있기를 기대합니다. 따라서 웹 페이지 성능 최적화는 모든 웹 개발자가 추구해야 할 목표 중 하나가 되었습니다.

웹 페이지 성능 최적화는 여러 측면에서 시작할 수 있으며, 그 중 리플로우 및 다시 그리기 작업을 줄이는 것이 웹 페이지 성능을 향상시키는 데 중요합니다. 리플로우 및 다시 그리기는 브라우저가 웹 페이지를 렌더링할 때 기본 작업이지만 자주 발생하면 웹 페이지 렌더링 속도가 느려지고 사용자 경험에 영향을 미칩니다. 이 문서에서는 리플로우 및 다시 그리기 작업을 줄이는 방법을 살펴보고 특정 코드 예제를 제공합니다.

리플로우와 다시 그리기의 개념
리플로우는 브라우저가 웹 페이지를 렌더링할 때 DOM 요소의 크기, 위치 등을 기반으로 웹 페이지의 레이아웃을 계산하고 이를 다시 그리는 프로세스를 말합니다. 화면. Repaint는 DOM 요소의 스타일에 따라 요소를 다시 그리는 프로세스를 말합니다. 리플로우 및 다시 그리기 작업은 시간이 많이 걸리는 작업이므로 자주 발생하지 않도록 노력해야 합니다.

리플로우 및 다시 그리기 작업을 줄이는 방법

1. CSS3의 변형 및 불투명도 속성을 사용하세요
   요소의 위치와 크기를 변경할 때 왼쪽, 위쪽, 너비 및 요소를 직접 수정하는 대신 CSS3의 변형 속성을 사용할 수 있습니다. 요소의 높이 속성입니다. 변환 속성은 리플로우가 아닌 다시 그리기만 발생시키기 때문입니다. 마찬가지로 opacity 속성을 사용하여 요소의 투명도를 수정할 수 있습니다. 그러면 다시 그리기만 발생합니다.

// 예: 변환을 사용하여 왼쪽 및 위쪽 속성 대체
// 권장되지 않음:
element.style.left = '100px';
element.style.top = '100px'// 권장:

element .style.transform = 'translate(100px, 100px)';

DOM 요소를 일괄 작업

여러 DOM 요소를 수정해야 하는 경우 여러 단일 작업을 사용하지 말고 하나의 일괄 작업으로 병합하세요. DOM의 각 작업은 리플로우 및 다시 그리기 작업을 트리거하므로 일괄 작업은 리플로우 및 다시 그리기 작업 수를 줄이고 성능을 향상시킬 수 있습니다.
2. 
   
// 예: DOM 요소의 일괄 작업

// 권장되지 않음:

element1.style.width = '100px';
element2.style.width = '200px'
// 각 작업은 리플로우 및 다시 그리기를 트리거합니다.

// 권장 사항:

element1.style.width = '100px';

element2.style.width = '200px';
// 한 번의 작업으로 한 번의 리플로우와 다시 그리기만 트리거됩니다.

레이아웃 정보에 자주 액세스하지 마세요

액세스 JavaScript를 통한 DOM 요소(예: offsetLeft, offsetHeight 등)의 레이아웃 정보는 브라우저가 리플로우 작업을 수행하도록 트리거합니다. 따라서 레이아웃 정보에 자주 액세스하지 않도록 하세요. 레이아웃 정보를 캐시하여 반복 계산을 피할 수 있습니다.
3. 
   
// 예: 레이아웃 정보에 자주 액세스하지 마세요

// 권장하지 않음:

const height = element.offsetHeight;
// offsetHeight에 액세스하면 리플로우 작업이 트리거됩니다

// 권장:

const height = element.offsetHeight ;

//반복 계산을 피하기 위해 레이아웃 정보 캐시

DocumentFragment 사용

JavaScript를 사용하여 많은 수의 DOM 요소를 동적으로 생성하는 경우 DocumentFragment를 사용하여 리플로우 및 다시 그리기 작업을 줄일 수 있습니다. DocumentFragment는 오프라인으로 작동할 수 있고 최종적으로 문서에 삽입되어 브라우저의 렌더링 부담을 줄일 수 있는 경량 문서 조각입니다.
4. 
   
// 예: DocumentFragment 사용

// 권장되지 않음:

for (let i = 0; i const element = document.createElement('div');
document.body.appendChild (요소);
}
// 요소가 삽입될 때마다 리플로우 및 다시 그리기가 트리거됩니다

// 권장 사항:

const 조각 = document.createDocumentFragment();

for (let i = 0; i const element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
// 모든 요소를 ​​한 번에 삽입하여 리플로우 하나만 트리거 and reflow Drawing

Summary

리플로우 및 다시 그리기 작업을 줄임으로써 웹 페이지 성능을 크게 향상시키고 사용자 경험을 향상시킬 수 있습니다. 이 문서에서는 리플로우 및 다시 그리기 작업을 줄이는 여러 가지 방법을 설명하고 구체적인 코드 예제를 제공합니다. 이러한 방법이 웹 페이지 성능을 최적화하는 데 도움이 되기를 바랍니다. 모든 작업으로 인해 리플로우와 다시 그리기가 발생하는지 생각해 보세요. 코드를 최적화하고 불필요한 작업을 줄이면 웹 페이지가 더 부드럽고 빨라질 것입니다.

위 내용은 웹 페이지 성능 향상: 리플로우 및 다시 그리기의 스트레스를 줄입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!