CSS 페이지 렌더링 최적화 속성 will-change

앞말
  일부 행위(클릭, 이동 또는 스크롤)를 통해 페이지를 대면적으로 그릴 때 브라우저는 준비하지 않고 수동적으로 CPU를 사용하여 계산하고 다시 그릴 수 있다. 사전에 준비하지 않았기 때문에 과장에 대처하지 못해 프레임이 끊긴다.한편, CSS 속성will-change는 웹 개발자에게 브라우저에 이 요소가 어떤 변화를 일으킬지 알려주는 방법을 제공하여 브라우저는 요소 속성이 진정으로 변화하기 전에 대응하는 최적화 준비를 미리 할 수 있다.이런 최적화는 일부 복잡한 계산 작업을 미리 준비하여 페이지의 반응을 더욱 빠르고 민감하게 할 수 있다.CSS 속성 will-change 소개
 
지식을 준비하다
  GPU는 그래픽 프로세서로 그래픽 관련 하드웨어를 전문적으로 처리합니다.GPU는 복잡한 수학 및 기하학 컴퓨팅을 위해 설계된 제품으로 CPU를 그래픽 프로세싱 작업에서 분리하여 더 많은 시스템 작업을 수행할 수 있습니다.
하드웨어 가속이란 컴퓨터에서 계산량이 매우 많은 작업을 전문적인 하드웨어에 분배하여 처리하고 CPU의 작업량을 줄이는 것이다
  CSS의 애니메이션, 변형, 점차적인 변화는 GPU 가속을 자동으로 촉발하지 않고 브라우저가 느린 소프트웨어 렌더링 엔진을 사용합니다.transition,transform와animation의 세계에서 GPU로 프로세스를 마운트 해제하여 속도를 높여야 한다.3D 변형에만 고유한 layer가 있고 2D 변형에는
【Hack】
  사용translateZ() 또는 translate3d() 방법으로 요소에 변화가 없는 3D 변형을 추가하여 브라우저를 속여 하드웨어 가속을 촉발합니다.그러나 그 대가로 이런 상황은 자신의 층에 요소를 중첩하여 RAM과 GPU의 저장 공간을 차지하고 공간 방출 시간을 확정할 수 없다
 
구문
will-change
  기능: 브라우저 요소가 어떤 애니메이션을 할지 미리 알려주고 브라우저가 적당한 최적화 설정을 미리 준비할 수 있도록 합니다
값: auto | 초기 값: auto
적용 대상: 모든 요소
상속성: 없음
호환성: IE13+, 크롬49+, 사파리9.1+、IOS9.3+、Android52+
auto는 특정 속성이 변경될 수 있는지 여부를 나타내기 때문에 브라우저가 스스로 추측하고 브라우저가 자주 사용하는 일반적인 방법으로 최적화해야 합니다.
 는 다음과 같은 값일 수 있습니다.
 scroll-position는 개발자가 조만간 스크롤 바의 위치를 바꾸거나 애니메이션을 만들기를 희망한다고 밝혔다.
 contents는 개발자가 요소 내용 중 일부를 조만간 바꾸거나 애니메이션을 만들기를 원한다고 밝혔다.
 는 개발자가 조만간 지정한 속성 이름을 바꾸거나 애니메이션을 만들기를 원한다고 밝혔다.만약 속성 이름이 간략하다면, 그것에 대응하는 모든 간략하거나 전부 쓴 속성을 대표한다
 
사용
[hover 사용]
will-change가 계속 걸려 있기 때문에 다음과 같이 기본 상태에 직접 쓰지 마십시오.

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

   부모 원소hover를 할 때 윌-change를 성명할 수 있습니다. 이렇게 하면 옮길 때 자동remove가 됩니다. 촉발하는 범위는 기본적으로 유효 원소 범위입니다.

.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 속성을 직접 추가하면 브라우저가 대응하는 최적화 작업을 메모리에 저장할 수 있습니다. 이것은 사실 불필요한 것입니다.다음은 스크립트를 사용하여 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를 쓰는 것이 적합하다.이것은 브라우저로 하여금 전환 애니메이션을 미리 준비하게 하여 키보드를 눌렀을 때 유연하고 경쾌한 애니메이션을 볼 수 있게 한다

.slide {
  will-change: transform;
}

 
주의 사항
 1、will-change를 너무 많은 요소에 적용하지 마세요. 브라우저는 최적화할 수 있는 모든 것을 최적화하려고 노력했습니다.일부 더 강력한 최적화가 있는데 윌 체인지와 결합하면 기계 자원을 많이 소모할 수 있고 과도하게 사용하면 페이지 응답이 느리거나 매우 많은 자원을 소모할 수 있다.
 2, 절제된 사용: 일반적으로 요소가 초기 상태로 회복될 때 브라우저는 이전에 최적화된 작업을 버린다.그러나 스타일시트에서 윌 change 속성을 직접 설명하면 목표 요소가 자주 변할 수 있고 브라우저는 최적화 작업을 이전보다 오래 저장할 수 있음을 나타낸다.그래서 가장 좋은 실천은 원소가 변하기 전과 후에 스크립트를 통해 윌 change의 값을 전환하는 것이다
 3、will-change 최적화를 너무 일찍 적용하지 마세요. 만약에 페이지가 성능에 문제가 없다면 윌-change 속성을 추가하여 약간의 속도를 짜내지 마세요.will-change의 디자인은 최후의 최적화 수단으로 기존의 성능 문제를 해결하기 위한 것이다.그것은 성능 문제를 예방하는 데 쓰여서는 안 된다.윌-change를 과도하게 사용하면 대량의 메모리를 차지하고 더욱 복잡한 렌더링 과정을 초래할 수 있다. 왜냐하면 브라우저가 존재할 수 있는 변화 과정을 준비하려고 하기 때문이다.이것은 더욱 심각한 성능 문제를 초래할 수 있다
 4, 충분한 작업 시간을 주십시오. 이 속성은 페이지 개발자에게 브라우저의 어떤 속성이 변할 수 있는지 알려주는 데 사용됩니다.그리고 브라우저는 변화가 발생하기 전에 미리 최적화 작업을 할 수 있다.그래서 브라우저에 이러한 최적화 작업을 할 시간을 주는 것은 매우 중요하다.사용 시 원소가 발생할 수 있는 변화를 일정 시간 앞당겨 알아낸 다음will-change 속성을 추가하는 방법을 시도해야 한다