Это краткое изложение исследовательской статьи - Система выявления и устранения лишнего кода JavaScript для более быстрой загрузки веб-страниц.
Абстрактный
Большое количество библиотек javascript импортируется на многие веб-сайты для улучшения взаимодействия с пользователем. Приведенные здесь данные показывают, что многие из этих библиотек частично используются во время загрузки страницы и, следовательно, содержат лишний код.
Согласно thecodeself.com, лишний код - это код, который написан без необходимости. Это код, который имеет всю дополнительную сложность ценного кода, но не добавляет никакой ценности. Если бы вы удалили его, продукт вел бы себя точно так же.
Многие из самых популярных веб-сайтов содержат сотни килобайт сжатого избыточного кода, а на средней странице содержится 31% лишнего кода. Важно оптимизировать полезную нагрузку ресурсов Js для повышения производительности веб-страницы.
В этой статье показано, что методы пассивных измерений, такие как системы мониторинга реальных пользователей (RUM), могут быть использованы для выявления лишнего кода. Системный подход предназначен для пассивного выявления лишнего кода на ресурсе Js. Затем лишний код удаляется перед последующими запросами загрузки страницы. Следуя этой методике, производительность веб-страницы увеличивается на 5% для средних страниц и по крайней мере на 10% для страниц с длинным хвостом. Посредством результатов у него есть мотивация отслеживать использование ресурсов Js с целью повышения производительности веб-страницы.
Производительность в Интернете увеличилась на 5–10%.
Чтобы сделать взаимодействие с пользователем интерактивным, многие веб-сайты используют библиотеки Js для разработки и развертывания. Многие библиотеки, такие как Js Polyfills, которые используются для кроссбраузерности, по-прежнему недостаточно используются на разных веб-страницах. Пакет Js, содержащий большое количество лишнего кода, замедляет время загрузки страницы. Измерительное исследование проводится для выявления наличия лишнего кода на 100+ лучших веб-сайтах. Замечено, что средний ресурс Js содержит 31% лишнего кода.
Статический анализ ресурсов JS можно выполнить с помощью Api покрытия Chrome, но у него есть свои ограничения:
- Он не может предсказать реальные условия использования JS.
- Он не фиксирует использование объявлений анонимных функций в ресурсах JS и сообщает обо всех анонимных функциях как о лишних. В результате измерения использования JS, выполненные с помощью Coverage API, будут неточными.
- Данные, полученные с помощью Coverage API, не предоставляются JS, и поэтому системы на основе RUM не могут собирать данные об использовании ресурсов JS.
Материалы, внесенные в этот документ:
Прокси-сервер. Прокси-сервер HTTP (S) предназначен для завершения соединений TCP / TLS и обслуживания запросов HTTP (S). Он также изменяет ресурсы JS от имени владельца веб-сайта. Чтобы сохранить функциональность страницы как есть, прокси-сервер добавляет логику для синхронной загрузки и выполнения тела исключенной функции, не вызывая ошибок страницы.
Измерения. В документе исследуются 100+ самых популярных веб-сайтов, случайно выбранных из 1000 лучших веб-сайтов Alexa. Это делается как на собственных, так и на сторонних ресурсах. Разница измеряется на двух типах устройств: на медленном мобильном устройстве с маленьким экраном (Moto G) и на относительно более быстром мобильном устройстве с большим экраном (Moto G4). Поскольку мобильные устройства имеют более медленные процессоры по сравнению с ноутбуками / настольными компьютерами, влияние избыточного кода выше на более медленных устройствах. Таким образом, эксперименты предназначены для изучения использования JS и улучшения производительности от elision на страницах, загружаемых на мобильных устройствах.
Сделанные выводы: После использования их настраиваемого прокси-сервера и мобильных устройств на платформе WebPageTest для загрузки веб-страниц было сделано несколько наблюдений:
- Многие веб-сайты с самым высоким рейтингом содержат сотни килобайт сжатого избыточного J-кода, что составляет до 38% от общего числа сторонних J-файлов и до 71% от общего числа сторонних J-файлов на некоторых страницах.
- Средний ресурс JS на данной веб-странице составляет 31% лишних. Более того, 48% медианной библиотеки JS в JQuery оказались лишними, что предполагает, что разработчики импортируют всю библиотеку, но используют ее частично.
- Для 13% JS-библиотек, загруженных во время экспериментов, набор выполняемых JS-функций варьировался в зависимости от размера экрана устройства и заголовка User-Agent, передаваемого в HTTP-запросах.
- За счет исключения лишнего кода средняя производительность страницы повышается на 5% и на 20% для страниц с длинным хвостом.
Экспериментальная методика
Идентификация и устранение лишнего кода работает в два этапа.
Первый этап - это этап обучения, на котором собираются данные о том, выполняется ли функция внутри файла JavaScript во время загрузки страницы. Прокси изменяет ресурс JS, а затем анализирует ресурс для построения абстрактного синтаксического дерева (AST). Затем прокси перебирает объявления функций, генерирует уникальный идентификатор для каждого объявления и добавляет фрагмент JS. Он вставляет идентификатор функции в массив, объявленный в верхней части ресурса JS.
Наконец, прокси-сервер добавляет еще один фрагмент JS вверху ресурса JS, который отправляется на веб-сервер. Приведенный выше фрагмент кода выполняется, когда браузер запускает событие window.loadEventEnd, что указывает на то, что все прослушиватели, такие как setTimeouts или Promises, прикрепленные к событию window.onLoad, завершили выполнение. В window.loadEventEnd массив, содержащий идентификаторы всех выполняемых функций, отправляется на сервер.
На втором этапе все функции, идентификатор которых не был указан в маяке, игнорируются. Однако возможно, что некоторые функции JS будут выполняться в определенных условиях, не зафиксированных на первом этапе. В результате, если такие функции будут удалены и необходимы для выполнения во время загрузки страницы, функциональность веб-страницы будет нарушена. Поэтому вместо удаления всего объявления функции прокси заменяет тело каждой лишней функции заглушкой.
При исключении лишних функций прокси копирует тело функции в отдельный файл, а его HTTP-путь на сервере жестко запрограммирован в запросе XHR. Однако, чтобы гарантировать, что потенциально необходимая функция никогда не будет упущена, фаза обучения должна использоваться консервативно, чтобы идентифицировать функции JS, которые выполняются в различных сценариях. Лишний код удаляется только из сторонних ресурсов.
Стоит ли это делать?
Proxy узнал, какая часть JS-кода является лишней, и имеет доступную для обслуживания копию исходных и исключенных JS-ресурсов, теперь можно загружать веб-страницы для измерения различий в производительности с лишним JS-исключением и без него. Список из 100+ веб-страниц повторяется для загрузки каждой страницы 20 раз в исходном режиме и 20 раз в исключенном режиме.
Замечено, что 16% исходного JS-кода является лишним на средней странице и до 38% на других страницах. Аналогичное исследование выполняется для сторонних JS-ресурсов и обнаруживает, что для средней страницы 16% сторонних JS-файлов являются излишними; однако, учитывая, что многие разработчики веб-сайтов импортируют множество JS-фреймворков, чтобы добавить на страницу дополнительные функции, сторонние JS-ресурсы могут быть до 71% лишними на некоторых страницах.
Количество лишних функций исследуется для каждого ресурса в более чем 2500 JS-ресурсах, загруженных на более чем 100 веб-страницах. Средний ресурс JS содержит в общей сложности 80 объявлений функций, из которых 25 (31%) объявлений являются лишними. Ресурс JS на 80-м процентиле содержит не менее 512 объявлений функций, из которых не менее 140 (27%) объявлений являются лишними. При дальнейшем изучении собранных данных обнаруживается, что медианная библиотека в структуре JQuery на 48% лишняя. Точно так же в других платформах, таких как Adobe Tag Manager и Clicktale, медианная библиотека составляет 16% и 29% соответственно.
На основании вышеизложенных наблюдений изучается возможность оптимизации ресурсов JS за счет исключения лишнего кода. Поскольку мобильные устройства имеют более медленные процессоры, чем ноутбуки и настольные компьютеры, и поскольку выполнение JS происходит на процессоре устройства, производительность веб-страницы измеряется с использованием и без лишнего JS только на мобильных устройствах (Moto G и Moto G4). Замечено, что исключение лишнего JS улучшает средний PLT на 5% для средней страницы и по крайней мере на 10% для страниц в длинном хвосте.
Установлено, что 13% загруженных в ходе экспериментов JS-библиотек выполняют разный набор JS-функций на мобильных устройствах Moto G и Moto G4. Следовательно, страницы, загруженные на два устройства, содержат разное количество лишнего кода, который был пропущен прокси.
Ограничения и дальнейшая работа
Хотя эти эксперименты предназначены для пассивного мониторинга использования JS на веб-страницах, они не фиксируют выполнение функций JS, которые запускаются только при взаимодействии пользователя со страницей. Поэтому эксперименты могли переоценить количество лишних JS для определенных страниц. Все виды использования могут быть покрыты только после развертывания этой методологии в реальных сценариях.
Дальнейшая работа с реальными данными может помочь устранить текущие ограничения этой статьи.
Выводы
Разработчики используют библиотеки JS, чтобы сделать веб-страницы интерактивными для пользователей. Для этого они импортируют библиотеки Js, которые часто используются только частично, что приводит к большому количеству лишнего кода, который необходимо загрузить, скомпилировать, распаковать и проанализировать перед выполнением. Эти операции блокируют основной поток ЦП и напрямую влияют на время загрузки страницы. В этой статье описываются методика и анализ того, как это лишнее может быть идентифицировано и исключено с веб-страниц с помощью пассивных методов измерения. Результаты показывают, что медианное улучшение PLT составляет 5% и 10% для 80-го процентиля страниц.
Цель этого документа - дать руководство о том, как разработчики могут изменять ресурс JS для отслеживания использования и мотивации для необходимости всестороннего мониторинга ресурсов JS. Рекомендуется вложить усилия в методы мониторинга с целью улучшить работу конечных пользователей в Интернете.
