Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

렌더링 성능

오늘날 웹 사용자는 방문하는 페이지가 대화형이고 원활히 작동할 것으로 기대하므로 개발자는 여기에 시간과 노력을 집중해야 합니다. 페이지는 빠르게 로드될 뿐만 아니라 원활히 실행되어야 합니다. 가벼운 손가락 동작만으로 빠르게 스크롤할 수 있고 애니메이션과 상호작용이 매끄러워야 합니다.

성능이 우수한 사이트와 앱을 작성하려면 브라우저가 HTML, 자바스크립트 및 CSS를 처리하는 방법을 이해하고 작성하는 코드와 포함된 타사 코드가 최대한 효율적으로 실행되도록 보장해야 합니다.

60fps 및 기기 새로 고침 빈도

웹사이트와 사용자 상호작용

오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 실행 중인 애니메이션이나 전환이 있거나 사용자가 페이지를 스크롤 중이면, 브라우저가 기기의 새로고침 빈도에 일치하여 각 화면 새로고침에 대해 하나의 새 그림이나 프레임을 제공해야 합니다.

각 프레임에는 16ms 가량의 시간만 할당됩니다(1초/60 = 16.66ms). 하지만 실제로 브라우저는 실행 준비를 해야 하므로 10ms 내에 모든 작업을 완료해야 합니다. 이 제한 시간을 충족하지 못하면 프레임 속도가 떨어지고 화면에서 콘텐츠가 떨리게 됩니다. 이러한 현상을 버벅거림 현상이라고 하며 사용자에게 거부감을 줍니다.

픽셀 파이프라인

작업할 때 숙지 및 유념해야 하는 다섯 가지 주요 영역이 있습니다. 이들은 대부분 통제할 수 있으며 픽셀-화면 파이프라인의 핵심 요소입니다.

전체 픽셀 파이프라인

  • 자바스크립트. 일반적으로 자바스크립트는 jQuery의 animate 함수, 데이터 집합 정렬 또는 페이지에 DOM 요소 추가 등 시각적 변화를 일으키는 작업을 처리하는 데 사용됩니다. 하지만 반드시 자바스크립트로 시각적 변화를 트리거할 필요는 없습니다. CSS Animations, Transitions 및 Web Animations API도 널리 사용됩니다.
  • 스타일 계산. 이는 .headline 또는 .nav > .nav__item 등의 매칭 선택기에 따라 어떤 CSS 규칙을 어떤 요소에 적용할지 계산하는 프로세스입니다. 여기에서 규칙이 알려지면 적용되고 각 요소의 마지막 스타일이 계산됩니다.
  • 레이아웃. 브라우저가 요소에 어떤 규칙을 적용할지 알게 되면 화면에서 얼마의 공간을 차지하고 어디에 배치되는지 계산하기 시작할 수 있습니다. 웹의 레이아웃 모델은 한 요소가 다른 요소에 영향을 줄 수 있음을 의미합니다. 예를 들어, <body> 요소의 너비는 일반적으로 하위 요소의 너비 등 트리의 위아래 모든 곳에 영향을 주며, 따라서 이 프로세스는 브라우저에 상당한 영향을 줄 수 있습니다.
  • 페인트. 페인트는 픽셀을 채우는 프로세스입니다. 이는 텍스트, 색, 이미지, 경계 및 그림자 등 요소의 모든 시각적 부분을 그리는 작업을 포함합니다. 그리기는 일반적으로 레이어라고 하는 다수의 표면에서 수행됩니다.
  • 합성(Compositing). 페이지의 여러 부분이 잠재적으로 여러 레이어로 그려졌기 때문에 페이지가 정확히 렌더링되려면 정확한 순서로 화면에 그려야 합니다. 실수로 한 요소가 다른 요소 위에 잘못 나타날 수 있기 때문에 이는 다른 요소와 겹치는 요소가 있는 경우에 특히 중요합니다.

파이프라인의 각 부분에서 버벅거림 현상이 발생할 수 있으므로 코드가 파이프라인의 어떤 부분을 트리거하는지 정확히 이해하는 것이 중요합니다.

페인트와 함께 사용되는 '래스터화'라는 용어를 들어본 적이 있을 것입니다. 그 이유는 페인트가 실제로 1) 그리기 호출 목록 생성 및 2) 픽셀 채우기 등 두 작업이기 때문입니다.

후자를 '래스터화'라고 하며 DevTools에서 페인트 레코드를 볼 때마다 래스터화를 포함한 것으로 간주해야 합니다. (일부 아키텍처에서 그리기 호출 목록 생성과 래스터화가 다른 스레드에서 수행되는데, 이는 개발자가 제어할 수 있는 부분이 아닙니다.)

항상 모든 프레임에서 파이프라인의 모든 부분을 건드릴 필요는 없습니다. 실제로 자바스크립트, CSS 또는 웹 애니메이션을 사용하여 시각적 변경을 수행할 때 주어진 프레임에 대해 파이프라인이 정상적으로 작동하는 세 가지 방법이 있습니다.

1. JS / CSS > 스타일 > 레이아웃 > 페인트 > 합성

전체 픽셀 파이프라인

레이아웃 너비, 높이, 왼쪽 또는 상단 위치 등 요소의 기하학적 형태에 영향을 주는 'layout' 속성을 변경하면 브라우저가 다른 모든 요소를 확인하고 페이지에 대해 '리플로우'를 수행해야 합니다. 영향을 받은 영역이 있으면 다시 페인트해야 하고 최종적으로 페인트한 요소는 다시 합성해야 합니다.

2. JS / CSS > 스타일 > 페인트 > 합성

레이아웃이 없는 픽셀 파이프라인

페이지의 레이아웃에 영향을 주지 않는 배경 이미지, 텍스트 색상 또는 그림자 등의 'paint only' 속성을 변경하면, 브라우저가 레이아웃을 건너뛰되 페인트 작업은 여전히 수행합니다.

3. JS / CSS > 스타일 > 합성

레이아웃과 페인트가 없는 픽셀 파이프라인

레이아웃과 페인트가 필요 없는 속성을 변경하면 브라우저가 합성 단계로 건너뜁니다.

이 최종 버전은 앱의 수명 주기에서 애니메이션이나 스크롤처럼 많은 부담을 주는 시점에 가장 이상적이고 비용이 가장 적게 드는 버전입니다.

참고: 주어진 CSS 속성을 변경하는 위의 세 가지 버전 중 어느 버전이 트리거될지 알고 싶은 경우 CSS 트리거를 참조하세요. 고성능 애니메이션에 빠른 트랙을 원하는 경우 컴포지터(compositor) 전용 속성 변경 섹션을 참조하세요.

성능은 가급적 작업을 피하고 작업을 효율적으로 실행하도록 만드는 기술입니다. 대부분의 경우 성능은 브라우저에 도움이 됩니다. 위의 파이프라인에 나열된 작업의 컴퓨팅 비용이 다릅니다. 일부 작업은 다른 작업보다 비용이 많이 듭니다!

파이프라인의 다른 부분, 즉 일반적인 문제와 진단 및 해결 방법을 살펴봅시다.

브라우저 렌더링 최적화

렌더링 성능에 대해 자세히 알고 싶지 않으세요? 동반 과정을 확인하고 브라우저가 HTML, CSS 및 JavaScript를 화면에서 픽셀로 변환하는 방법, DevTools를 사용하여 성능을 측정하는 방법, 페이지의 렌더링을 최적화하는 방법을 배웁니다.

This is a free course offered through Udacity

Take Course