CSS 페이지 렌더링 최적화 속성이 변경됩니다.

이전 단어

 특정 동작(클릭, 이동 또는 스크롤)을 통해 페이지를 트리거하여 넓은 영역을 그릴 때 브라우저는 종종 준비되지 않은 채 CPU를 수동적으로 사용하여 계산하고 다시 그릴 수 있습니다. 페이지 그리기, 사전 준비가 없었기 때문에 렌더링 처리가 어려워서 프레임이 떨어지고 멈췄습니다. CSS 속성 will-change는 웹 개발자에게 요소에 어떤 변경 사항이 적용될지 브라우저에 알려주는 방법을 제공하므로, 브라우저는 요소 속성이 실제로 변경되기 전에 해당 최적화 준비를 미리 할 수 ​​있습니다. 이러한 종류의 최적화를 통해 복잡한 계산 작업의 일부를 미리 준비할 수 있으므로 페이지 응답이 더 빠르고 민감해집니다. 이번 글에서는 CSS 속성 will-change를 소개하겠습니다

준비 지식

  GPU는 그래픽 관련 하드웨어를 처리하고 그리는 데 특화된 그래픽 프로세서입니다. GPU는 복잡한 수학적, 기하학적 계산을 수행하도록 특별히 설계되어 그래픽 처리 작업에서 CPU를 해방하고 다른 더 많은 시스템 작업을 수행할 수 있습니다.

  소위 하드웨어 가속이란 컴퓨터에서의 컴퓨팅을 의미합니다. 작업은 CPU 작업량을 줄이기 위해 특수 하드웨어에 할당됩니다

  CSS 애니메이션, 변환 및 그라데이션은 자동으로 GPU 가속을 실행하지 않지만 브라우저의 약간 느린 소프트웨어 렌더링 엔진을 사용합니다. transition, transform, animation의 세계에서는 작업 속도를 높이기 위해 프로세스를 GPU로 오프로드해야 합니다. 3D 변형만 자체 레이어를 갖고 2D 변형은 그렇지 않습니다.

【Hack】

translateZ() 또는 translate3d() 방법을 사용하여 요소에 변경되지 않은 3D 변형을 추가하여 속이세요. 탐색 프로세서가 하드웨어 가속을 트리거합니다. 그러나 비용은 이러한 상황이 요소를 자체 레이어에 오버레이하여 RAM 및 GPU 저장 공간을 차지하고 공간 해제 시간을 결정할 수 없다는 것입니다

구문

will-change

 기능: 요소가 어떤 애니메이션을 수행할지 미리 브라우저에 알려 브라우저가 적절한 최적화 설정을 미리 준비할 수 있도록 합니다.

 값: auto | <animateable-feature>

초기값: auto

적용 대상: 모든 요소

상속: 없음

호환성: IE13+, chrome49+, safari9.1 +, IOS9.3+, Android52+

  auto는 어떤 속성이 변경되는지에 대한 구체적인 사양이 없음을 의미하며 브라우저에서 일반적으로 사용하는 몇 가지 일반적인 방법을 사용하여 최적화해야 합니다. >

 

은 다음과 같을 수 있습니다. 값: <animateable-feature>

   

개발자가 스크롤 막대의 위치를 ​​변경하거나 곧 애니메이션화하기를 원함을 나타냅니다. scroll-position

   

다음을 나타냅니다. 개발자는 가까운 시일 내에 요소 콘텐츠의 내용을 변경하기를 희망합니다 contents

  

는 개발자가 가까운 시일 내에 지정된 속성 이름을 변경하거나 애니메이션화하기를 원한다는 것을 나타냅니다. 속성명이 약어인 경우 해당하는 모든 약어 또는 전체 길이 속성을 의미합니다 <custom-ident>

를 사용하세요. will-change는 항상 정지 상태이므로 기본 상태에서 직접 다음을 작성하세요.

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

  상위 요소가 마우스를 가리키면 will-change를 선언하여 이동 시 자동으로 제거되도록 할 수 있습니다. out, Triggering 범위는 기본적으로 유효한 요소 범위

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

[javascript 스크립트 사용]

.sidebar {
  will-change: transform;
}

  위의 예에서는 will-change 속성을 스타일 시트에 직접 추가합니다. 해당 최적화 작업을 계속하기 위해 메모리에 저장하는 것은 실제로 필요하지 않습니다. 다음은 스크립트를 사용하여

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填写在CSS动画中发生改变的CSS属性名
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

속성을 ​​올바르게 적용하는 방법을 보여줍니다. [직접 사용]

will-change  단, 사진 앨범과 같이 키보드를 눌렀을 때 애플리케이션이 페이지를 넘기는 경우 또는 슬라이드쇼 첫 번째 카테고리에서는 페이지가 매우 크고 복잡합니다. 이때 스타일 시트에 will-change를 작성하는 것이 적합합니다. 이렇게 하면 브라우저가 미리 전환 애니메이션을 준비하게 되며, 키보드를 눌렀을 때 유연하고 가벼운 애니메이션을 볼 수 있습니다

.slide {
  will-change: transform;
}

Note

1. Don't t 너무 많은 요소에 will-change를 적용: 브라우저는 이미 가능한 모든 것을 최적화하려고 시도하고 있습니다. will-change와 결합하면 시스템 리소스를 많이 소모할 수 있는 더 강력한 최적화가 있습니다. 과도하게 사용하면 페이지 응답이 느려지거나 리소스를 많이 소모할 수 있습니다

  2. 드물게 사용: 일반적으로 브라우저는 요소가 원래 상태로 복원될 때 최적화 작업을 삭제합니다. 그러나 will-change 속성을 스타일 시트에 직접 명시적으로 선언하면 대상 요소가 자주 변경될 수 있으며 브라우저는 이전보다 최적화 작업을 더 오래 저장하게 됩니다. 따라서 가장 좋은 방법은 요소 변경 전후에 스크립트를 통해 will-change 값을 전환하는 것입니다

 3. will-change 최적화를 성급하게 적용하지 마세요: 페이지에 성능 문제가 없으면 속도를 약간 줄이기 위해 will-change 속성을 추가하지 마세요. will-change의 원래 설계 의도는 기존 성능 문제를 해결하기 위한 최후의 수단 최적화 방법입니다. 성능 문제를 방지하기 위해 사용해서는 안 됩니다. will-change를 과도하게 사용하면 브라우저가 가능한 변경 사항을 준비하려고 시도하므로 메모리 사용량이 늘어나고 렌더링 프로세스가 더 복잡해질 수 있습니다. 이는 더 심각한 성능 문제로 이어질 것입니다

  4. 충분한 작업 시간 제공: 이 속성은 페이지 개발자가 어떤 속성이 변경될 수 있는지 브라우저에 알릴 수 있도록 사용됩니다. 그런 다음 브라우저는 변경이 발생하기 전에 미리 일부 최적화 작업을 수행하도록 선택할 수 있습니다. 따라서 브라우저가 실제로 이러한 최적화를 수행할 시간을 주는 것이 매우 중요합니다. 이를 사용할 때 특정 시간에 요소의 가능한 변경 사항을 미리 알 수 있는 몇 가지 방법을 찾은 다음 will-change 속성을 추가해야 합니다

더 많은 CSS 페이지 렌더링 최적화 속성을 보려면 변경될 예정이므로 PHP 중국어 웹사이트에서 관련 기사를 확인하세요!