소개
브라우저 작동 방식과 같은 최신 정보를 알고 싶다면 최근 Chrome의 GPU 가속 렌더기/복합 작업에 대해 자세히 설명하는 도움말이 있다는 사실을 이미 알고 계실 것입니다. 첫째, Chrome의 가속 렌더링: 레이어 모델은 Chrome이 레이어 개념을 사용하여 페이지를 그리는 방법을 소개합니다. 더 자세한 내용은 Chrome의 GPU 가속 합성을 통해 Chrome에서 페이지 렌더링에 GPU와 더불어 이러한 레이어를 사용하는 방법을 설명합니다.
철학적 질문
3D 목적으로 소프트웨어 래스터라이저를 작성하는 데 많은 시간을 투자한 끝에 일부 CSS 속성이 페이지를 그릴 때 다양한 성능을 보여야 한다는 사실을 알게 되었습니다. 예를 들어, 작은 이미지를 화면에 래스터화하는 것은 임의의 모양에 그림자를 그리는 완전히 다른 알고리즘 작업입니다. 따라서 문제는 다양한 CSS 속성이 페이지의 렌더링 가중치에 어떤 영향을 미칠까요?라는 질문이었습니다.
제 목표는 대규모 CSS 속성/값 집합을 페인트 시간을 기준으로 분류하여 어떤 유형의 CSS 속성이 다른 속성보다 더 우수한지 파악하는 것이었습니다. 이를 위해 CSS 페인트 시간에 수치적 가시성을 추가하기 위해 덕트 테이프와 풍선껌을 사용하는 자동화를 작성했습니다. 그 방법은 다음과 같습니다.
- 각 HTML 페이지에 단일 DOM 요소와 몇 가지 순열의 CSS 속성이 연결된 개별 HTML 페이지 모음을 생성합니다.
- 각 페이지에서 다음을 수행하는 자동화 스크립트를 실행합니다.
- Chrome 실행
- 페이지 로드
- 페이지의 Skia Picture를 만듭니다.
- Skia 벤치마크를 통해 찍은 각 Skia 사진을 실행하여 타이밍을 확인합니다.
- 모든 타이밍을 넘기고 숫자에 감탄하세요. (이 부분이 중요합니다.)
이 설정으로 HTML 페이지 모음을 생성하고 각 페이지에는 고유한 CSS 속성 및 값으로 구성된 순열을 포함합니다. 예를 들어 다음은 두 개의 html 파일입니다.
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
또 다른 방법은 좀 더 복잡합니다.
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
다음은 방사형 그라데이션 값만 변경하는 마지막 예의 변형입니다.
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
그런 다음 각 페이지는 새로운 Chrome 인스턴스에 로드되고 (페이지 새로고침 시 오래된 상태에 의해 타이밍이 편향되지 않도록 함), Skia Picture (*.SKP)를 사용하여 페이지를 페인트하는 데 사용되는 Skia 명령어를 평가합니다. 각 HTML 파일에 대해 SKP 파일이 생성되면 다른 배치를 실행하여 *.SKP 파일을 Skia 소스 코드에서 빌드한 Skia Benchmark 애플리케이션을 통해 이 페이지를 렌더링하는 데 걸린 평균 시간을 덤프합니다.
데이터 평가
이제 몇 가지 개략적인 기능을 통해 CSS 속성 모음이 페인트에 필요한 양을 차트로 표시할 수 있습니다. 또는 페인트 성능에 따라 CSS 속성의 스택 순위를 지정할 수 있습니다. 다음은 Chrome 27 베타에서 가져온 큰 그래프에서 이 프로세스의 모든 타이밍 데이터를 보여줍니다. 시간이 지날수록 Chrome이 더욱 빨라지고 빨라짐에 따라 모든 데이터가 변경될 수 있습니다.
각 세로 막대는 단일 CSS 속성 조합으로 페이지의 페인트 시간을 나타냅니다(100배 확대, 이 그래프의 True-scale 값은 0,1.56ms). 예쁜 선이 많지만 이 형식에서는 다소 쓸모가 없습니다. 유용한 트렌드를 찾으려면 데이터 마이닝을 해야 합니다.
첫째, 일부 CSS 속성은 다른 속성보다 렌더링 비용이 더 많이 든다는 증거를 발견했습니다. 예를 들어 DOM 요소에 그림자를 그리는 경우, 렌더링하기 더 쉬워야 하는 불투명도와 달리 스플라인 및 기타 유해한 요소를 사용한 다중 전달 작업이 포함됩니다.
두 번째로 흥미롭게도 CSS 속성 조합은 각 부분의 합보다 페인트 시간이 더 오래 걸릴 수 있습니다. 관찰자의 관점에서는 A+B가 2.2C가 아니라 C라고 예상할 수 있습니다. 예를 들어 box-shadow 및 border-radius-stroke를 추가합니다.
정말 흥미로운 점은 box-shadow 속성 자체가 아니라 특정 값 순열이라는 점입니다. 예를 들어 아래는 값 변형이 있는 box-shadow : 50% 및 border-radius의 그룹화를 보여줍니다.
데이터를 살펴보면 이 상황이 머지않아 진행되고 있습니다. 다양하고 이상한 조합이 많고, 테스트 도구 모음이 이러한 조합을 모두 건드리지는 못합니다. 여전히 흥미로운 결과를 얻을 수 있는 테스트와 조합이 많습니다.
페이지 렌더링 가중치 찾기
페이지의 각 요소에 대한 렌더링 시간을 추적할 수 있는 기능을 갖춘 개발자는 페이지 렌더링 가중치를 평가하고 페이지 렌더링 가중치가 사이트의 응답성에 미치는 영향을 평가할 수 있습니다. 다음은 시작하는 데 도움이 되는 몇 가지 도움말입니다.
- Chrome 개발자 도구에서 Chrome의 연속 페인트 모드를 사용하여 어떤 CSS 속성의 비용이 발생하는지 알아보세요.
- 기존 코드 검토 프로세스에 CSS 검토를 통합하여 성능 문제를 포착합니다. CSS에서 그라데이션, 그림자와 같이 비용이 많이 드는 것으로 알려진 요소를 사용하는 곳을 찾습니다. 여기에 정말로 필요한 것이 있는지 자문해 보세요.
- 확신이 없다면 항상 성능 향상을 꾀하는 것이 좋습니다. 사용자는 열의 패딩 너비는 기억하지 못할 수 있지만 사이트를 방문할 때의 느낌은 기억합니다.
최종 의견
이 실험에서 가장 흥미로운 점 중 하나는 Chrome 버전마다 시간이 계속 변한다는 점입니다. 브라우저 소프트웨어는 노출 영역도 계속 변화합니다. 지금은 느리지만 내일은 빨라질 수 있습니다. 이 도움말에서 벗어나 box-shadow: 1px 2px 3px 4px를 이미 border-radius:5가 있는 요소에 배치하는 것을 방지할 수 있습니다. 하지만 CSS 속성이 페이지 페인트 시간에 직접 영향을 미친다는 점을 짚고 넘어가야 합니다.