Как писать более быстрый и легкий JavaScript-код
JavaScript по-прежнему остается одним из главных факторов, замедляющих загрузку и быстродействие сайтов. Для быстрой обработки JavaScript понадобится более высокая скорость передачи данных по Сети, а также парсинга и компиляции.
Google V8 – это движок JavaScript, который разработан для более быстрого выполнения программных скриптов. Он используется в Chrome и других браузерах. Поэтому стоит рассмотреть этот движок более подробно.
Как JavaScript работает в V8?
Есть базовый компилятор, который парсит JavaScript- код, чтобы сгенерировать собственный машинный код. Объекты в V8 представлены в объектной модели или ассоциативных массивах. Профилировщик времени отслеживает выполнение функций и передает их оптимизирующему компилятору.
Кроме этого движок осуществляет деоптимизацию, которая помогает минимизировать сгенерированный код. Также имеется система управления памятью, которая использует сборку «мусора».
Как улучшить производительность JavaScript?
Теперь рассмотрим подсказки и хитрости, которые позволяют повысить производительность кода.
Использование ссылок HTTP/2 и Point
HTTP/2 увеличивает производительность сайта за счет использования мультиплексирования, которое поддерживает выполнение нескольких запросов одновременно. Оно также позволяет сократить количество обходов DOM, сохранив ссылки на указатели в объектах браузера.
При этом сложность HTML-кода играет решающую роль в скорости выполнения запроса или изменения объектов DOM. Удалите ненужные теги <div> и <span>, чтобы увеличить быстродействие сайта.
Буферизируйте DOM и сожмите файлы
Для удаления элементов из DOM можно использовать буферизацию в случае, если есть прокручиваемые DIV, которые в данный момент не видны. Попробуйте применить Gzip или Brotli для сжатия, чтобы уменьшить JavaScript-файлы.
Используйте менеджеры зависимостей после загрузки и установите ограничения зависимостей библиотеки
Отслеживайте загруженные зависимости, чтобы случайно не загрузить их повторно. Даже зависимости на уровне библиотек очень сильно влияют на время загрузки. Поэтому старайтесь использовать их как можно реже.
Используйте document.getElementById() и this
Для создания селекторов, основанных на именах тегов и классов, может понадобиться jQuery. Эта библиотека просматривает элементы DOM для поиска соответствий. Чтобы его ускорить, можно использовать следующий метод:
// С jQuery
var button = jQuery('body div.window > div.minimize-button:nth-child(3)')[0];
// С document.getElementById()
var button = document.getElementById('window-minimize-button');
Кроме этого ключевое слово this позволяет повысить производительность кода за счет уменьшения зависимости от глобальных переменных с помощью асинхронного кода с обратными вызовами. Следует избегать использования ключевого слова with, так как оно снижает производительность:
var Person = Object.create({
init: function(name) {
this.name = name;
},
do: function(callback) {
callback.apply(this);
}
});
var bob = new Person(‘bob’);
bob.do(function() {
alert(this.name); // “bob” передается методом alert так как “this” переподключен
});
Но если нужно загрузить скрипты асинхронно и отложить их выполнение до загрузки остальной части страницы, добавьте асинхронные или отложенные атрибуты:
// загружаем example.js, не прерывая рендеринга страницы
<script src="example.js" async></script><font></font>
// // загружаем example.js после завершения загрузки страницы
<script src="example.js" defer></script><font></font>График, приведенный ниже, демонстрирует разницу между синхронной и асинхронной загрузкой. При синхронном способе нужно ждать, пока загрузится предыдущий ресурс, прежде чем загружать новый. При асинхронной загрузке ресурсы можно загружать одновременно.
Инструменты для улучшения производительности JavaScript
Существует несколько инструментов для сжатия кода, которые помогают разработчикам приложения. Они помогают удалить из исходного кода ненужные символы. Вследствие чего уменьшается размер файлов и сокращается время загрузки.
Google Closure Compiler
Он компилирует исходный код напрямую, чтобы убрать ненужный. Кроме этого для анализа, парсинга и переписывания кода Google Closure Compiler дважды проверяет синтаксис и ссылки на переменные.
Packer
Позволяет сжать код за считанные секунды. Также есть функция быстрой распаковки для повышения производительности приложения.
YUI Compressor
Это инструмент командной строки от Yahoo обеспечивает более высокую степень сжатия CSS-файлов, чем большинство других. Он сокращает время загрузки, повышает производительность и улучшает управление памятью.
Заключение
Если реализовать все советы по оптимизации кода, то можно значительно повысить производительность сайта. Также мы советуем создать свой собственный список способов оптимизации JavaScript.