[CSS]변경되는 css를 미리 브라우저에 알려 성능을 개선하는 will-change

속성값 

{
  will-change: auto; /* 기본값 - 별다른 동작안함 */
  will-change: scroll-position;  /* 스크롤할때 엘리먼트가 변경될것을 알려줌 미리 최적화함 */
  will-change: contents; /* 엘리먼트 컨텐츠가 변경됨을 미리 알려줌 - 캐시를 하지 않음 */

  /* 변경하고 싶은 속성을 적어준다 ,로 여러개를 사용할 수 있다.  */
  will-change: transform; 
  will-change: top, left;
  }

 

 

너무 많이 사용하면 의미가 없다.

 

변화 후 will-change: auto로 변경해줘야 더이상 최적화를 하지 않는다.

 

will-change 없이 작동이 잘 된다면 사용할 필요가 없다 오히려 더 느려질  수 있음

 

will-change는 미리 알려줘야함 - 변화와 함께 사용하면 소용없음! (아래예제)

 

- 한번에 선언하면 소용없음

{
    transform: rotate(180deg);
    will-change: transform;
}

- 변화가 일어나기 전에 미리 알려준다. 

.box:hover {
    will-change: transform;
}
.box:active {
    transform: rotate(180deg);
}

 

 

 

또한 성능을 개선하기위해서는 reflow 와 repaint를 최소화 해야한다. 

 

 

css 속성을 변화시킬 때 width, height, margin, float 등과 같은 속성을 변화시키면 레이아웃에 영향을 주기때문에 reflow를 유발한다. 

 

 

자식엘리먼트의 속성이 변해 레이아웃에 영향을 받으면 부모엘리먼트가 다시 그려진다. 

 

그러므로 

변하는 엘리먼트를 position:absolute; 또는 position: fixed;를 통해 최소화 시킬수 있다.

 

css 속성값을 변경하는대신 class를 추가하거나 삭제해 변경해 최소화 시킬수 있다.