합성되지 않은 애니메이션 피하기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
합성되지 않은 애니메이션은 저사양 휴대전화에서 또는 기본 스레드에서 성능이 높은 작업이 실행 중일 때 버벅거림 (부드럽지 않음)으로 표시될 수 있습니다. 버벅거리는 애니메이션은 페이지의 레이아웃 변경 횟수 (CLS)를 증가시킬 수 있습니다. CLS를 낮추면 Lighthouse 성능 점수가 개선됩니다.
배경
HTML, CSS, 자바스크립트를 픽셀로 변환하는 브라우저의 알고리즘을 총칭하여 렌더링 파이프라인 이라고 합니다.
렌더링 파이프라인
렌더링 파이프라인의 각 단계가 무엇을 의미하는지 이해하지 못해도 괜찮습니다. 지금 알아야 할 핵심은 렌더링 파이프라인의 각 단계에서 브라우저가 이전 작업의 결과를 사용하여 새 데이터를 만든다는 것입니다. 예를 들어 코드에서 레이아웃을 트리거하는 작업이 있으면 페인트 및 복합 단계를 다시 실행해야 합니다. 합성되지 않은 애니메이션은 렌더링 파이프라인의 이전 단계 (스타일, 레이아웃 또는 페인트) 중 하나를 트리거하는 모든 애니메이션입니다.
합성되지 않은 애니메이션은 브라우저가 더 많은 작업을 하도록 강제하므로 성능이 좋지 않습니다.
렌더링 파이프라인에 대해 자세히 알아보려면 다음 리소스를 확인하세요.
Lighthouse에서 합성되지 않은 애니메이션을 감지하는 방법
애니메이션을 구성할 수 없는 경우 Chrome은 Lighthouse에서 읽는 DevTools 트레이스에 실패 이유를 보고합니다. Lighthouse는 각 애니메이션의 실패 원인과 함께 합성되지 않은 애니메이션이 있는 DOM 노드를 나열합니다.
애니메이션이 합성되도록 하는 방법
컴포지터 전용 속성 고수 및 레이어 수 관리 및 고성능 애니메이션 을 참고하세요.
자료
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2020-08-12(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2020-08-12(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2020-08-12(UTC)"],[],[]]