웹 페이지 로딩 속도에 대한 모범 사례: 리플로우, 다시 그리기 및 리플로우 최적화

웹 페이지 로딩 속도 향상: 리플로우, 다시 그리기 및 리플로우에 대한 모범 사례, 특정 코드 예제가 필요합니다.

인터넷의 급속한 발전과 함께 웹 페이지 로딩 속도는 사용자 경험의 중요한 부분이 되었습니다. 로딩 시간이 길어질 때까지 기다리는 사람은 아무도 없기 때문에 웹페이지 로딩 속도를 어떻게 향상시킬 것인가가 매우 중요한 문제가 되었습니다.

웹 페이지의 로딩 속도는 여러 요인의 영향을 받으며, 그 중 리플로우, 다시 그리기 및 리플로우는 세 가지 주요 성능 병목 현상입니다. 이 문서에서는 웹 페이지의 로딩 속도를 최적화하는 데 도움이 되는 몇 가지 모범 사례를 소개하고 구체적인 코드 예제를 제공합니다.

1. HTML 및 CSS 구조 최적화

웹페이지의 HTML 및 CSS 구조는 웹페이지 로딩 성능의 기초입니다. 다음 최적화 옵션을 고려하세요.

• HTML 및 CSS 파일 크기 최소화: 불필요한 코드, 공백 및 주석을 제거하고 압축 도구를 사용하여 파일 크기를 줄입니다.
• 중첩 수준 줄이기: 중첩 수준이 너무 많으면 브라우저가 리플로우 및 다시 그리기 작업을 반복적으로 수행하게 되므로 HTML 및 CSS의 구조를 가능한 한 단순하게 유지하십시오.
• 외부 CSS 파일 사용: CSS 스타일을 외부 파일에 배치하여 스타일 인라인 및 중복을 방지합니다.

2. 리플로우 및 다시 그리기 트리거 방지

리플로우 및 다시 그리기는 웹 페이지 성능에 영향을 미치는 두 가지 중요한 요소입니다. 이는 일반적으로 사용자 상호 작용이나 애니메이션 효과 중에 자주 발생하는 DOM 요소의 변경으로 인해 발생합니다. 리플로우 및 리페인트 트리거를 방지하는 몇 가지 방법은 다음과 같습니다.

• 스타일 속성 대신 클래스 사용: 스타일 속성을 통해 HTML 요소에 직접 스타일을 작성하는 대신 스타일을 CSS 클래스로 정의합니다. 결과적으로 스타일 수정이 줄어들어 다시 그리기 및 리플로우 발생이 줄어듭니다.
• 빈번한 DOM 작업 방지: DOM 요소에 대한 빈번한 추가, 삭제 및 수정 작업을 줄이고 한 번의 작업으로 여러 작업을 완료하도록 노력하세요.
• 문서 조각 또는 오프라인 DOM 사용: 빈번한 작업이 필요한 DOM 요소를 문서 조각 또는 오프라인 DOM에 임시 저장한 다음 작업 완료 후 페이지에 추가하여 리플로우 및 다시 그리기 횟수를 줄입니다.
• JavaScript 애니메이션 대신 CSS 애니메이션 사용: CSS 애니메이션은 브라우저의 하드웨어 가속을 직접 활용할 수 있으며 JavaScript를 사용하여 구현된 애니메이션보다 더 효율적입니다.

다음은 빈번한 DOM 조작을 방지하기 위한 샘플 코드입니다.

<div id="container"></div>

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

  for (let i = 0; i < 1000; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = 'List item ' + i;
    fragment.appendChild(listItem);
  }

  container.appendChild(fragment);
</script>

3. 콘텐츠 미리 로드 및 지연 로딩

미리 로드 및 지연 로딩은 웹 페이지의 로딩 속도를 최적화하는 효과적인 방법입니다. 프리로딩을 사용하면 페이지가 렌더링되기 전에 필요할 수 있는 리소스를 미리 로드할 수 있고, 지연 로딩을 사용하면 특정 조건이 충족될 때 특정 콘텐츠를 로드할 수 있습니다.

다음은 이미지 사전 로드 및 지연 로드에 대한 샘플 코드입니다.

<img src="/static/imghw/default1.png"  data-src="loading.gif"  class="lazy" data- alt="Image">

<script>
  const img = document.querySelector('img');
  const src = img.getAttribute('data-src');

  const image = new Image();
  image.onload = function() {
    img.setAttribute('src', src);
  };
  image.src = src;
</script>

위 코드에서는 사전 로드된 이미지가 먼저 로딩 애니메이션으로 표시되고, 이미지 리소스가 로드된 후 실제 이미지로 대체됩니다. .

4. 리소스 파일 병합 및 압축

리소스 파일을 결합하고 압축하면 네트워크 요청 수와 파일 크기를 줄일 수 있습니다. 여러 CSS 파일 또는 JavaScript 파일을 단일 파일로 결합하고 압축 도구를 사용하여 파일 크기를 줄입니다. 이렇게 하면 서버와 브라우저 간의 왕복 횟수가 줄어들고 파일 전송 시간이 단축됩니다.

5. 브라우저 캐시 사용

서버에 캐시 정책을 설정하여 요청을 다시 보내는 대신 후속 로드 시 캐시에서 페이지를 가져오도록 하세요. 적절한 캐시 헤더 정보를 설정하면 브라우저는 일정 시간 동안 정적 리소스를 캐시할 수 있으므로 서버의 부하가 줄어들고 페이지 로딩 속도가 향상됩니다.

다음은 Apache 서버에서 캐싱을 설정하는 샘플 코드입니다.

<IfModule mod_expires.c>
  ExpiresActive on
  
  ExpiresDefault "access plus 2 weeks"
  
  <FilesMatch ".(png|jpg|jpeg|gif|ico|css|js)$">
    ExpiresDefault "access plus 1 month"
  </FilesMatch>
</IfModule>

이 문서에서는 HTML 및 CSS 구조 최적화, 리플로우 및 다시 그리기 트리거 방지, 사전 로드 및 게으른 로드 등을 포함하여 웹 페이지 로딩 속도를 향상시키는 몇 가지 모범 사례를 소개합니다. 콘텐츠, 리소스 파일 병합 및 압축, 브라우저 캐싱 사용 등을 수행할 수 있습니다. 이러한 기술이 웹 페이지의 로딩 속도를 향상시키고 더 나은 사용자 경험을 제공하는 데 도움이 되기를 바랍니다.

위 내용은 웹 페이지 로딩 속도에 대한 모범 사례: 리플로우, 다시 그리기 및 리플로우 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!