Performance Weekly. Issue #1

Осторожно, под одной из ссылок вероломно скрывается скриншот с тенью (Пепелсбей, привет).

  • В Smashing Magazine был опубликован монументальный труд «Making A Service Worker: A Case Study», в котором самым подробным образом рассматриваются все стороны создания своего первого сёрвис воркера. После прочтения хочется сесть и наляпать что-нибудь эдакое. Ну, а для тех у кого проблемы с фантазией, Mozilla запустила целый сайт с практическими примерами использования Service Workers.
  • И про React. Вот первая часть поста про производительность React-приложений и видео доклада (YouTube, 29:31) про ускорения сервер-сайд рендеринга. А если вы из тех, кто уверен, что React быстрый по умолчанию, вот прошлогодний пост от Пола Льюиса, где он зачем-то сравнивает производительность приложений на React и Vanilla JS.
  • Компания Google выпустила гайд по созданию прогрессивных веб-приложений, т. е. таких, которые работают для всех, всегда и везде. А ещё выглядят, как нативные. Добротный материал.
  • За других не скажу, но когда я вижу полностью загрузившуюся страницу с невидимым текстом, я задаюсь только одним вопросом: «Доколе? Доколе нам это терпеть?». Откровенно говоря, мне ещё хочется вырезать глаза у разработчиков этого сайта и повесить их себе на шею в качестве бус, однако, боюсь, что это тема для другого разговора. Так вот, хочется верить, что с поддержкой нового CSS-свойства font-display ситуация должна измениться в лучшую сторону. Это свойство позволяет указать браузеру, как надо рендерить текст, шрифт для которого ещё не загрузился. О возможностях этого свойства читайте в посте на Google Developers или в спецификации. Наблюдать за текущим статусом и уровнем поддержки среди браузеров можно здесь.
  • Пол Льюс предлагает способ освобождения основного потока от декодирования больших изображений. Едва ли это можно брать и использовать, но для общего развития определённо стоит ознакомиться.
  • Ещё раз (последний, для закрепления) об изменениях в рендеринге Chrome при динамической загрузке стилей.
  • Начиная с сорок четвёртой версии, Firefox маркирует CSS-анимации для которых включилось аппаратное ускорение значком молнии. Как это выглядит можно посмотреть на скриншоте или увидеть вживую на этой странице, например. Для этого необходимо выбрать «Use transform», нажать «Start» и проинспектировать любой из анимированных объектов. Детальнее про возможности дебага CSS-анимаций в Firefox читайте в документации на MDN. Там же, под одной из неприметных ссылок скрыто настоящее сокровище в виде статьи про производительность анимаций.
  • А в свежем Firefox Developer Edition появились новые инструменты для профилирования потребления памяти и работы Garbage Collector. Для тех, кто смутно понимает, что происходит на скриншотах ниже (включая автора этих строк) наш главный эксперт по утечкам памяти — Михаил Корепанов — обещал написать обновления своего старого поста на Хабре, с учётом современных реалий. Всё, Миша, теперь не отвертишься! Allocations view Dominator view

Нашли что-то свежее и хорошее? Присылайте! DM в Твиттере открыты, мы ведь тут все заодно :)

© 2015–2016 perfception.com