Properties

Properties

  • account_tree
  • bug_report

Rendering

CSS 최적화와 속도 개선 등에 관한 기술적인 주제를 다룬다.

개요

최신 CSS 렌더러는 웹 페이지를 빠르고 효율적으로 렌더링하기 위해 여러 가지 복잡한 최적화를 수행한다. 그러나 상황에 따라 종종 최적화 시작 비용이 발생하여 응답성에 부정적인 영향을 미칠 수도 있다.

예를 들어서 CSS 3D 변환을 사용하여 화면에서 요소를 이동하는 경우 요소와 콘텐츠가 레이어로 승격되어 페이지의 나머지 부분과 독립적으로 렌더링되고 나중에 합성될 수 있다. 요소의 변환이 프레임 간에 변경되는 유일한 항목인 경우 페이지의 나머지 부분을 다시 렌더링할 필요가 없도록 콘텐츠의 렌더링을 분리하면 종종 상당한 속도 이점을 얻을 수 있다.

그러나 새 레이어에 요소를 설정하는 것은 상대적으로 비용이 많이 드는 작업이므로 변환 애니메이션의 시작이 눈에 띄게 1초 정도 지연될 수 있다.

이 기술 사양에 정의된 will-change 속성을 통해 미래에 변경될 속성을 미리 선언할 수 있으므로 유저 에이전트(user agent)는 필요하기 전에 적절한 최적화를 설정할 수 있다. 이렇게 하면 실제 변경이 발생할 때 웹페이지가 빠르게 업데이트된다.

이 섹션은 CSS 최적화와 속도 개선 등에 관한 기술적인 주제를 다룬다.

관련 속성 

  • will-change

    요소에게 CSS 처리시 예상되는 변화의 종류에 관한 힌트를 유저 에이전트(user agent)에게 제공하게 하여 사전에 최적화한다.

W3C Modules

CSS Will Change Module Level 1
W3C Candidate Recommendation Draft, 5 May 2022