Читаю раздел "Browser Rendering Optimization" и Google developers tools

Почему браузер "подвисает" при отрисовке страницы, или, почему страница видна, а прокрута заблокирована? Как посмотреть, что и почему тормозит?
Здесь много ссылок, тема мне так понравилась, что не смог все изложить (запомнить) последовательно, при первом же чтении регулярно посещал "второстеенные" страницы по ссылкам на "главных" страницах... Пришлось в конце поста добавлять ссылки с пояснениями. С них, пожалуй, и надо начинать. Кроме того, здесь картинки из раздела Производительность визуализации документации Гугла.

FLIP Your Animations Web Animations Editor’s Draft, 1 August 2016 This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.
FLIP Your Animations
Web Animations API polyfill Right now you’ll need the Web Animations API polyfill to use the code above, though, but it’s pretty lightweight and does make life a lot easier!

Производительность визуализации Сегодняшние интернет-пользователи хотят, чтобы открываемые ими страницы были интерактивными и работали плавно.
Chrome DevTools
Measure Resource Loading Times Measure the network performance of your site using the Network panel.

Understanding Resource Timing It is crucial to understand the phases in which resources are gathered over the network. This is the foundation for fixing load issues.
Optimize Performance Under Varying Network Conditions It’s easy to overlook the network conditions your users will face on mobile. Use DevTools to emulate different network conditions. Fix any load time issues and your users will thank you.

Browser Rendering Optimization Video Course Summary. Performance matters to users. Web developers need to build apps that react quickly and render smoothly.

Website Performance Optimization Video Course Summary. You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages
Компоновка – это процесс, который сводит воедино прорисованные части страницы для отображения на экране Для достижения анимационного эффекта изменяйте свойства transform и opacity. Перемещайте движущиеся элементы на отдельные слои с помощью will-change или translateZ. Не используйте слишком много слоев, они занимают память и требуют управления.

css3_3dtransforms w3schools
PageSpeed Insights
О сервисе PageSpeed Insights Page Speed Insights измеряет скорость загрузки веб-страниц. URL проверяется дважды – с помощью обычного и мобильного агента пользователя.

Оценка PageSpeed может составлять от 0 до 100 баллов. Чем больше оценка – тем лучше.
Настройте область просмотра На страницах, оптимизированных для мобильных устройств, в блоке должен присутствовать метатег viewport следующего содержания: width=device-width, initial-scale=1.

CSS triggers

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

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

In [ ]:

#Оптимизация выполнения JavaScript
#Ограничение объема и сложности вычисления стилей
#Не используйте большие сложные макеты и избегайте подтормаживания макетов
#Упрощение и сокращение областей прорисовки
#Используйте свойства, вызывающие только компоновку, и контролируйте количество слоев
#Оптимизация обработчиков ввода

In [3]:

Image('https://developers.google.com/web/fundamentals/performance/rendering/images/intro/frame-no-layout.jpg')

Out[3]:

Understanding Resource Timing¶

In [1]:

from IPython.display import Image

In [2]:

Image('https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/imgs/resource-timing-api.png')

Out[2]:

• Redirect
  • Immediately begins startTime.
  • If a redirect is happening, redirectStart begins as well.
  • If a redirect is occurring at the end of this phase then redirectEnd will be taken.
• App Cache
  • If it’s application cache fulfilling the request, a fetchStart time will be taken.
• DNS
  • domainLookupStart time is taken at the beginning of the DNS request.
  • domainLookupEnd time is taken at the end of the DNS request.
• TCP
  • connectStart is taken when initially connecting to the server.
  • If TLS or SSL are in use then secureConnectionStart will start when the handshake begins for securing the connection.
  • connectEnd is taken when the connection to the server is complete.
• Request
  • requestStart is taken once the request for a resource has been sent to the server.
• Response
  • responseStart is the time when the server initially responds to the request.
  • responseEnd is the time when the request ends and the data is retrieved.

Компоновка – это процесс, который сводит воедино прорисованные части страницы для отображения на экране¶

Чтобы добиться этого, необходимо будет изменять только те свойства, которые могут обрабатываться исключительно компоновщиком. На сегодня таких свойств только два: transform и opacity:

In [4]:

Image('https://developers.google.com/web/fundamentals/performance/rendering/images/
      stick-to-compositor-only-properties-and-manage-layer-count/safe-properties.jpg')

Out[4]:

In [ ]:

####

Перемещайте элементы, которые планируете анимировать, на отдельные слои Как уже упоминалось в разделе Упрощение прорисовки и сокращение количества областей прорисовки, элементы, которые планируется анимировать, следует переносить на отдельные слои (в пределах разумного, не злоупотребляйте этим!):

In [ ]:

.moving-element {
  will-change: transform;
}

In [ ]:

#Либо, для старых браузеров или тех, которые не поддерживают свойство will-change:

.moving-element {
  transform: translateZ(0);
}

Управляйте слоями и избегайте слишком большого их количества¶

Иногда, зная, что слои зачастую позволяют повысить производительность, возникает соблазн разместить все элементы страницы на собственных слоях, примерно вот так:

In [ ]:

* {
  will-change: transform;
  transform: translateZ(0);
}

Короче говоря, не размещайте элементы на собственных слоях без надобности.

[Оптимизация обработчиков ввода¶

](https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers?hl=ru)

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

Не используйте обработчики ввода с длительным рабочим циклом – они могут заблокировать прокрутку. Не изменяйте стили в обработчиках ввода. Оптимизируйте обработчики; запоминайте значения событий и реализуйте изменения стилей при следующем обратном вызове функции requestAnimationFrame.

Не используйте большие сложные макеты и избегайте подтормаживан¶

Макет ― это источник, из которого браузеры получают информацию о геометрии элементов: об их размере и расположении на странице. Для каждого элемента будет предоставлена явная или скрытая информация о размере, основанная на использовавшемся CSS, содержимом элемента или о родительском элементе. В браузерах Chrome, Opera, Safari и в Internet Explorer этот процесс называется Layout (Перерасчет макета). В Firefox он называется Reflow (Перерасчет дерева отрисовки), но по сути это один и тот же процесс

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

Оценивайте производительность модели макета; новый Flexbox обычно быстрее старого Flexbox или моделей макетов на основе float.

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

[Ограничение объема и сложности вычисления стилей¶

](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations?hl=ru)

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

Снижайте сложность своих селекторов; используйте методологию, основанную на классах, например BEM.

Сокращайте количество элементов, для которых требуется выполнять вычисление стилей.

Ресурсы: Аннулирование стилей в Blink. BEM (Block, Element, Modifier – блок, элемент, модификатор).

Посты чуть ниже также могут вас заинтересовать