#perfmatters: Техники изготовления инструментов для выступления ниндзя
Знание инструментов разработки — ключ к тому, чтобы стать экспертом по производительности. Компания Colt рассмотрела три столпа производительности: сеть, вычисления и рендеринг, предоставив обзор ключевых проблем в каждой области и инструментов, доступных для их обнаружения и устранения.
- Теперь вы можете профилировать Chrome на Android с помощью знакомых и любимых инструментов разработчика для настольных компьютеров.
- Итерационный цикл работы по повышению производительности таков: собрать данные, получить представление, принять меры.
- Расставьте приоритеты для ресурсов, которые находятся на критическом пути рендеринга ваших страниц.
- Избегайте рисования; это очень дорого.
- Избегайте перегрузки памяти и выполнения кода в критические моменты вашего приложения.
#perfmatters: Оптимизация производительности сети
Сеть и задержка обычно составляют 70% общего времени загрузки страницы сайта. Это большой процент, но это также означает, что любые улучшения, которые вы внесете, принесут огромную пользу вашим пользователям. В этом докладе Илья рассказал о недавних изменениях в Chrome, которые улучшат время загрузки, а также о нескольких изменениях, которые вы можете внести в свою среду, чтобы свести нагрузку на сеть к абсолютному минимуму.
- Chrome M27 имеет новый улучшенный планировщик ресурсов.
- Chrome M28 сделал сайты SPDY (даже) быстрее.
- Простой кеш Chrome претерпел капитальные изменения.
- SPDY/HTTP/2.0 обеспечивают значительное улучшение скорости передачи. Существуют готовые модули SPDY для nginx, Apache и Jetty (это всего лишь три).
- QUIC — это новый экспериментальный протокол, построенный на основе UDP; еще рано, но, как бы то ни было, пользователи выиграют.
#perfmatters: макет и рендеринг со скоростью 60 кадров в секунду
Достижение 60 кадров в секунду в ваших проектах напрямую связано с вовлеченностью пользователей и имеет решающее значение для их успеха. В этом докладе Нэт и Том рассказали о конвейере рендеринга Chrome, некоторых распространенных причинах пропадания кадров и о том, как их избежать.
- Длина кадра составляет 16 мс. Он содержит JavaScript, вычисления стилей, рисование и композитинг.
- Картина очень дорогая. Paint Storm — это когда вы без необходимости повторяете дорогостоящие покрасочные работы.
- Слои используются для кэширования нарисованных элементов.
- Обработчики ввода (прослушиватели касаний и колесика мыши) могут снизить скорость реагирования; избегайте их, если можете. Где вы не можете свести их к минимуму.
#perfmatters: Мгновенные мобильные веб-приложения
Критический путь рендеринга относится ко всему (JavaScript, HTML, CSS, изображениям), что требуется браузеру, прежде чем он сможет начать рисовать страницу. Установление приоритета доставки ресурсов на критическом пути рендеринга является обязательным, особенно для пользователей устройств с ограниченным доступом к сети, таких как смартфоны в сотовых сетях. Брайан рассказал, как команда Google прошла процесс определения и определения приоритетности ресурсов для веб-сайта PageSpeed Insights, сократив время загрузки с 20 секунд до чуть более 1 секунды!
- Устраните блокировку рендеринга JavaScript и CSS.
- Отдавайте приоритет видимому контенту.
- Загружайте скрипты асинхронно.
- Отобразите исходное представление на стороне сервера в виде HTML и дополните его JavaScript.
- Минимизируйте CSS, блокирующий рендеринг; доставьте только те стили, которые необходимы для отображения исходного окна просмотра, а затем доставьте все остальное.
- URI больших данных, встроенные в CSS, блокирующий рендеринг, вредны для производительности рендеринга; они блокируют ресурсы, URL-адреса изображений которых не блокируются.