웹 페이지 렌더링 개선: HTML 리플로우를 줄이고 다시 그리는 방법-HTML 튜토리얼-php.cn

웹 페이지 렌더링 개선: HTML 리플로우를 줄이고 다시 그리는 방법

WBOY

풀어 주다： 2024-01-26 09:04:08

원래의

840명이 탐색했습니다.

웹 페이지 렌더링 개선: HTML 리플로우를 줄이고 다시 그리는 방법

웹 페이지 렌더링 최적화: HTML 리플로우 및 다시 그리기를 최소화하는 방법, 특정 코드 예제가 필요합니다.

웹 개발에서 웹 페이지의 렌더링 성능은 매우 중요한 문제입니다. 사용자가 웹페이지를 방문하면 브라우저는 HTML, CSS 및 JavaScript를 구문 분석하고 렌더링한 후 사용자에게 표시해야 합니다. 그러나 렌더링 프로세스 중에 HTML 리플로우 및 다시 그리기가 발생할 수 있습니다. 이러한 작업은 많은 양의 컴퓨팅 리소스와 시간을 소비하여 웹 페이지 로딩 속도와 사용자 상호 작용 경험을 저하시킵니다.

HTML 리플로우는 브라우저가 웹 페이지의 레이아웃이나 크기가 변경된 것을 발견하면 페이지에서 영향을 받는 모든 요소의 기하학적 속성을 다시 계산하고 업데이트하여 레이아웃을 다시 정렬해야 함을 의미합니다. 다시 그리기는 속성의 변경만으로 스타일이 변경되고 레이아웃에는 영향을 주지 않는 경우 브라우저가 영향을 받는 부분만 다시 그리면 된다는 의미입니다.

웹 페이지 렌더링을 최적화하려면 HTML 리플로우 및 다시 그리기 횟수를 최대한 줄여야 합니다. 아래에서는 해당 코드 예제와 함께 몇 가지 실용적인 기술을 소개하겠습니다.

CSS 번역을 사용하여 상단 및 왼쪽과 같은 속성 변경 사항 대체:
번역 속성을 사용한 변경 사항은 레이아웃 변경을 유발하지 않으므로 상단 및 왼쪽과 같은 속성을 변경하는 것보다 더 효율적입니다. 다음은 샘플 코드입니다.
```
// 不推荐
element.style.left = '100px';

// 推荐
element.style.transform = 'translateX(100px)';
```
로그인 후 복사

DOM 일괄 업데이트:
DOM을 연속해서 여러 번 수정해야 하는 경우 이러한 수정 작업을 일괄 처리하여 리플로우 수를 줄이는 것이 가장 좋습니다. 다음은 샘플 코드입니다.

const container = document.getElementById('container');
const fragment = document.createDocumentFragment();

// 不推荐
for(let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  container.appendChild(div);
}

// 推荐
for(let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  fragment.appendChild(div);
}
container.appendChild(fragment);

로그인 후 복사

CSS 변환 및 불투명도 속성을 사용하여 애니메이션 구현:
요소에 애니메이션을 적용해야 하는 경우 요소의 레이아웃과 스타일을 변경하는 것보다 CSS 변환 및 불투명도 속성을 사용하는 것이 더 효율적입니다. . 다음은 샘플 코드입니다.
```
// 不推荐
element.style.top = '100px';
element.style.opacity = '0';

// 推荐
element.style.transform = 'translateY(100px)';
element.style.opacity = '0';
```
로그인 후 복사
스타일을 자주 수정하지 마세요.
요소의 스타일을 여러 번 수정해야 하는 경우 이러한 스타일 설정을 클래스에 넣은 다음 다음과 같이 클래스를 전환하는 것이 가장 좋습니다. 요소의 classList를 수정합니다. 다음은 샘플 코드입니다.
```
// 不推荐
element.style.color = 'red';
element.style.fontSize = '20px';

// 推荐
element.classList.add('highlight');
```
로그인 후 복사