60fps 레이아웃 및 렌더링

프로젝트에서 60fps를 달성하면 사용자 참여와 직접적인 상관관계가 있으며 성공을 위해 매우 중요합니다. 강연에서 Chrome의 렌더링 파이프라인에 관해 언급했던 NAT와 Tom은 프레임 누락의 몇 가지 일반적인 원인과 이를 방지하는 방법을 알아보았습니다.

Slides

  • 프레임은 16ms입니다. 여기에는 자바스크립트, 스타일 계산, 페인트 및 합성이 포함됩니다.
  • 페인팅은 매우 비용이 많이 듭니다. 페인트 스톰은 비용이 많이 드는 페인트 작업을 불필요하게 반복하는 곳입니다.
  • 레이어는 페인트된 요소를 캐시하는 데 사용됩니다.
  • 입력 핸들러 (터치 및 마우스휠 리스너)는 응답성을 종료할 수 있습니다. 가능하면 사용하지 않습니다. 최소한으로 유지할 수 없는 경우