Популярное изложение основ Блокировка анализатора и асинхронный JavaScript. Здесь же ссылки на несколько примеров страниц с разными вариантами загрузки скрипта. JavaScript позволяет извлечь из DOM скрытый объект span, который может не отображаться в модели визуализации, а затем заменить текст внутри объекта (с помощью команды .textContext) и вычисляемое свойство стиля (с none на inline). Готово! На странице появится текст Hello interactive students!.
style="float:left; margin-right:10px;"
Оптимизация JavaScript для быстрой визуализации страницы
Отслеживание визуализации
Анализ процесса визуализации Начнем с самой простой страницы без CSS и JavaScript, состоящей из HTML-разметки и картинки. Запустим инструменты разработчика в Chrome, откроем вкладку Network (Сеть) и проанализируем динамический список.
Производительность визуализации
What do people want from a news experience?
Срабатывание событий при изменении CSS Если вы желаете узнать, какие из приведенных выше трех вариантов вызовут изменение того или иного свойства CSS, читайте статью Срабатывание событий при изменении CSS
Используйте свойства, вызывающие только компоновку Для достижения анимационного эффекта изменяйте свойства transform и opacity. Перемещайте движущиеся элементы на отдельные слои с помощью will-change или translateZ. Не используйте слишком много слоев, они занимают память и требуют управления.
Упрощение и сокращение областей прорисовки Изменение любого свойства, кроме transform и opacity, вызывает прорисовку.
Прорисовка зачастую является самой затратной частью конвейера. Избегайте ее при любой возможности.
Сокращайте области прорисовки путем размещения элементов на отдельных слоях и оптимизации анимации.
Оценивайте сложность прорисовки и затраты на нее с помощью средства профилирования Chrome DevTools. Снижайте сложность при любой возможности.
How do you prefer to consume the news?
How to Create a Better Mobile User Experience Discover how your business can build a mobile site or app with best-in-class UX to be there in your customers' micro-moments.
How to Create a Better Mobile User Experience
<html>
<head>
<title>Critical Path: Measure</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<script>
function measureCRP() {
var t = window.performance.timing,
interactive = t.domInteractive - t.domLoading,
dcl = t.domContentLoadedEventStart - t.domLoading,
complete = t.domComplete - t.domLoading;
var stats = document.createElement('p');
stats.textContent = 'interactive: ' + interactive + 'ms, ' +
'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
document.body.appendChild(stats);
}
</script>
</head>
<body onload="measureCRP()">
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
#domLoading. Начальная отметка. В этот момент браузер начинает анализировать первые байты HTML- документа.
#domInteractive. В это время браузер завершил анализ документа и создал модель DOM.
#domContentLoaded. К этому моменту модели DOM и CSSOM уже готовы, поэтому ничто не мешает запуску скриптов JavaScript.
# Это значит, что браузер может приступать к созданию модели визуализации.
Если ваш фреймворк JavaScript запускается на этом этапе, вы можете отследить, как долго он выполняется, с помощью меток EventStart и EventEnd.
#domComplete. К этому моменту обработка завершена, а контент страницы (например, изображения) полностью скачан.
# Индикатор загрузки перестает вращаться.
#loadEvent. Сигнал полного завершения загрузки. Его можно использовать в качестве триггера функций и скриптов,
# добавив в HTML-код событие onload.
В спецификации HTML подробно оговаривается, когда каждое событие должно быть инифиировано, при каких условиях и т. д. Для анализа визуализации нам потребуются только следующие события:
#domInteractive. Модель DOM готова.
#domContentLoaded. Модели DOM и CSSOM готовы.
#Если в HTML-документе нет встроенного кода JavaScript, событие DOMContentLoaded инициируется сразу после domInteractive.
#domComplete. Страница готова, ее контент загружен.
[Производительность визуализации¶
](https://developers.google.com/web/fundamentals/performance/rendering/?hl=ru)
Если вы желаете узнать, какие из приведенных выше трех вариантов вызовут изменение того или иного свойства CSS, читайте статью Срабатывание событий при изменении CSS. Если вы сразу хотите узнать, как создавать высокопроизводительную анимацию, прочитайте раздел об изменении свойств, которые затрагивают только компоновку.
Используйте Chrome DevTools для анализа слоев в своем приложении Чтобы понять, как работают слои в приложении и почему элемент размещен на отдельном слое, необходимо включить средство профилирования прорисовки на шкале времени Chrome DevTools:
С помощью этого представления можно определить имеющееся количество слоев. Если у вас уходит много времени на компоновку при выполнении таких критически важных с точки зрения производительности действий, как прокрутка или переходы (целевой показатель равен 4–5 мс), то с помощью приведенной здесь информации можно определить, сколько у вас слоев, почему они были созданы, а затем уже заняться контролем числа слоев в приложении.
Перемещайте на отдельные слои элементы, которые двигаются или исчезают с экрана
Преимущество этого подхода состоит в том, что элементы, которые регулярно заново прорисовываются или двигаются на экране с помощью свойств transform, можно обрабатывать, не затрагивая другие элементы. Это тоже самое, что и работа с графикой в Sketch, GIMP или Photoshop, где отдельные слои можно обрабатывать и располагать друг на друге для создания итогового изображения.
Лучший способ создания новыхе слоев – это использование свойства CSS will-change. Такой способ работает в Chrome, Opera и Firefox. Со значением transform это свойство создает новый слой:
.moving-element {
will-change: transform;
}
Если вы переместили элемент на новый слой, воспользуйтесь DevTools, чтобы убедиться в том, что это дало выигрыш по производительности. Не перемещайте элементы на отдельные слои без профилирования.
На экранах с высоким разрешением элементы с фиксированным положением автоматически переносятся на собственный слой. Этого не происходит на экранах с низким разрешением, поскольку при переносе визуализация текста меняется с субпиксельной на монохромную, поэтому перемещение на слой должно выполняться вручную
Следует при любой возможности избегать прорисовки во время анимации, поскольку тех 10 мс, которые у вас есть в каждом кадре, недостаточно для выполнения этой работы, особенно на мобильных устройствах.
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий