Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Производительность визуализации

Сегодняшние интернет-пользователи хотят, чтобы открываемые ими страницы были интерактивными и работали плавно. Именно этому и требуется уделять много времени и труда. Страницы должны не только быстро загружаться, но и работать хорошо: прокрутка должна быть быстрой, а анимация и взаимодействия – плавными

Пользователь, взаимодействующий с веб-сайтом.

Длятого чтобы писать производительные сайты и приложения, необходимо понимать, каким образом браузер обрабатывает HTML, JavaScript и CSS. А уже на основе этих знаний необходимо предпринять усилия, чтобы ваш код (а также сторонний код, который вы используете) работал как можно эффективнее.

60 кадров в секунду и частота обновления экрана устройства

Сегодня большинство устройств обновляют свои экраны 60 раз в секунду. Если выполняется анимация или переход либо если пользователь прокручивает страницы, браузеру нужно соответствовать частоте обновления экрана устройства и выдавать по одной новой картинке (или кадру) при каждом обновлении экрана.

Каждый из этих кадров может длиться чуть более 16 мс (1 секунда / 60 = 16,66 мс). В реальности же браузеру нужно выполнить и еще кое-какие действия, потому вся ваша работа должна занимать не более 10 мс. Если не уложиться в эти рамки, частота кадров будет меньше, а контент начнет дергаться на экране. Часто эту ситуацию называют подвисанием, она отрицательно сказывается на восприятии пользователей.

Конвейер пикселей

Есть пять основных областей, о которых следует знать и помнить при выполнении своей работы. Это те области, которые вы в наибольшей степени контролируете. Они являются ключевыми точками конвейера вывода пикселей на экран.

Полный конвейер пикселей

  • JavaScript. Обычно JavaScript используется для выполнения работы, результатом которой будут визуальные изменения, будь то функция jQuery animate, сортировка набора данных или добавление DOM-элементов на страницу. Однако вызывать визуальное изменение можно не только с помощью JavaScript: Также часто используются анимация CSS, переходы и API-интерфейс веб-анимации.
  • Вычисление стилей. В процессе вычисления стилей определяется, какие правила CSS к каким элементам применяются с учетом соответствующих селекторов, например: .headline или .nav > .nav__item. Отсюда, после того как правила определены, они применяются и вычисляются итоговые стили для каждого элемента.
  • Расчет макета. Как только браузер будет знать, какие правила применяются к элементу, он может начать вычислять, сколько места он займет, и где он находится на экране. Модель макета для Интернета означает, что один элемент может влиять на другие, например: ширина элемента <body> обычно влияет на значения ширины дочерних элементов и так далее по всему дереву, поэтому этот процесс для браузера может быть довольно сложным.
  • Прорисовка. Прорисовка – это процесс заполнения пикселей. Он подразумевает вывод текста, цветов, изображений, границ и теней, по сути – всех визуальных частей элементов. Прорисовка обычно выполняется на нескольких поверхностях, которые называются слоями.
  • Компоновка. Поскольку части страницы потенциально были прорисованы на нескольких слоях, они должны быть выведены на экран в надлежащем порядке, с тем чтобы страница отображалась правильно. Это особенно важно для элементов, которые перекрывают другие элементы, поскольку ошибка может привести к тому, что один элемент будет неправильно показан поверх другого элемента.

Каждая из этих частей конвейера является потенциальным источником подвисания. Поэтому важно точно понимать, какие части конвейера срабатывают при выполнении вашего кода.

Далеко не всегда каждый кадр затрагивает все части конвейера. На самом деле есть три варианта, в соответствии с которыми конвейер_обычно_ воспроизводится для данного кадра при внесении визуального изменения, – с помощью JavaScript, CSS или веб-анимации:

1. JS / CSS > Стиль > Расчет макета > Прорисовка > Компоновка

Полный конвейер пикселей

Если изменить свойство, относящееся к макету, например такое свойство геометрии элемента, как ширина, высота или положение относительно левого верхнего угла, браузеру придется проверить все остальные элементы и перерасчитать дерево отрисовки страницы. Все затронутые области необходимо будет прорисовать заново, а итоговые элементы нужно будет снова скомпоновать.

2. JS / CSS > Стиль > Прорисовка > Компоновка

Конвейер пикселей без перерасчета макета.

Если изменить свойство, которое связано только с прорисовкой, например фоновое изображение, цвет текста или его тень, другими словами, свойство, которое не влияет на макет страницы, браузер оставит макет неизменным, но ему все равно придется выполнить прорисовку.

3. JS / CSS > Стиль > Компоновка

Конвейер пикселей без перерасчета макета или прорисовки.

Если же изменить свойство, которое не требует ни перерасчета макета, ни прорисовки, браузер сразу же перейдет к компоновке.

Последний вариант является самым простым и наиболее предпочтительным для точек высокой нагрузки в жизненном цикле приложения, например при анимации или прокрутке.

Производительность – это искусство избегать работы и делать любую работу как можно более эффективно. Во многих случаях это означает работу вместе с браузером, а не против него. Стоит помнить, что описанная выше работа в конвейере отличается по затратам вычислительных ресурсов: одни задачи являются более ресурсоемкими, чем другие!

Давайте разберемся с разными частями конвейера. Мы рассмотрим стандартные проблемы, а также методы их диагностики и устранения.

Оптимизация визуализации в браузере

Вам интересно поглубже познакомиться с оптимизацией визуализации? Запишитесь на соответствующий курс и узнайте, как браузер преобразует HTML, CSS и JavaScript в пиксели на экране, как пользоваться DevTools для оценки производительности, а также как оптимизировать визуализацию страниц

This is a free course offered through Udacity

Take Course