Производительность фронтенда
Новая секция для фронтенд-разработчиков на HighLoad++
Не знаю как вы, но я застал еще время, когда фронтенда еще не было. Большинство макетов программисты могли сверстать самостоятельно, ну что там сложного — <table>, <table> и <table>.
Потом появилась блочная верстка, верстальщики выделились в отдельную профессию, но остались на второстепенных ролях. На команду из нескольких серверных программистов приходился один верстальщик, самый бесправный член коллектива — он иногда даже сам внедрить то свой код не мог, обычно в шаблон HTML-верстку превращали программисты.
Прошло еще несколько лет и ситуация изменилась в корне!
Не каждый PHP-программист поймет, как устроен и работает Angular или React. Страницы стали интерактивными, в ходу концепции толстого клиента и Single Side Application, Игорь Сысоев выпускает nginScript, компилятор JavaScript для nginx, а профессия верстальщика конвертировалась в профессию фронтенд-разработчика. Кстати, как работодатель скажу, что фронтендеров гораздо тяжелее найти, чем бекендеров.
Посмотрите на современный фронтенд — это настоящая большая программа на JavaScript, со своей архитектурой, модульным разбиением, объектно-ориентированным программированием, кешированием и так далее. Зачастую, это не менее, а более сложный код, чем серверный. На клиенте все больше бизнес-логики, а сервер превращается в простое хранилище данных.
Но браузер, который интерпретирует JavaScript на клиенте, это не сервер. У него меньше возможностей, скорости, памяти, у него, как правило, есть батарейка. Возникает целый пласт задач, связанных с производительностью фронтенда: как написать не тормозящий JS, как не сожрать всю память в ноутбуке клиента, как не посадит батарейку за час работы с вашим сайтом, как, в конце концов, обеспечить быструю загрузку страницы (или сделать вид, что она загружается быстро).
Решению именно этих задач посвящена новая секция конференции HighLoad++ — “Производительность фронтенда”. Что в ней будет в этом году расскажет ее куратор — представитель компании Opera в России, руководитель сообщества веб-стандартистов, Председатель Программного комитета конференции для фронтенд-разработчиков FrontendConf Вадим Макеев.
Understanding Page Load
Маленький сайт грузится быстро, большой долго — так? Не так. Правильно сделанный сайт и грузится, и работает быстро. Чтобы сделать его правильно, нужно понимать, что на самом деле происходит с сетью и браузером на каждом их этапов, разобраться в «холодной» и «горячей» загрузке и научиться пользоваться инструментами. Опытом создания, профилирования и ускорения фронтенда для YouTube делится Зилин Жао из Google.
От Request до DOMContentLoaded на примере главной страницы Mail.ru
Можно сделать быстрый сервер, можно оптимизировать работу с сетью, а можно ускорить отрисовку в браузере — и каждый из вариантов добавит вам немного скорости. А если оптимизировать и объединить всю цепочку: от запроса на сервер до последнего события в браузере? C++, V8 и JS на сервере, отложенная загрузка и тонкая организация блоков на клиенте и Keep-Alive между ними — Павел Минеев расскажет о быстрой главной Mail.Ru.
From nothing to a video under 2 seconds
В тонкую психологическую разницу между «ещё грузится» и «всё зависло» важно попасть, чтобы пользователь не ушёл. Хороший способ — поставить бюджет времени и не выходить за его рамки. Как YouTube, из тройки самых больших сайтов в мире, удаётся показывать видео за 2 секунды и даже быстрее, какие бывают типы загрузки и что делать с каждым и как вообще устроена страница просмотра видео — Михаил Сычёв из команды YouTube Desktop.
Производительность WebGL-приложений
Даже быстрый WebGL на видеокарте можно нагрузить так, что станет медленно. Яндекс.Карты придумали хороший способ нагрузить WebGL с помощью интерактивных панорам. Какие проблемы вылезли и как от них получилось разгрузить движок панорам — в докладе Кирилла Дмитренко.
Скорость на клиенте
Записка «страничка сформирована за X секунд» с сервера не говорит вообще ни о чём — когда пользователь увидит это в браузере, вот что важно. Почему вообще бывает медленно, как с этим бороться и чем здесь поможет Navigation Timing API и HTTPS расскажет Анатолий Орлов, уже не из Яндекса.