Как писать более быстрый и легкий JavaScript-код

JavaScript по-прежнему остается одним из главных факторов, замедляющих загрузку и быстродействие веб-сайтов. Для быстрой обработки JavaScript понадобится более высокая скорость передачи данных по Сети, а также парсинга и компиляции.

Google V8 – это движок JavaScript, который разработан для более быстрого выполнения программных скриптов. Он используется в Chrome и иных браузерах. Так что следует рассмотреть этот движок более подробно.

Как JavaScript работает в V8?

Как писать более быстрый и легкий JavaScript-код

Есть базовый компилятор, который парсит JavaScript- программный код, чтобы сгенерировать собственный машинный код. Объекты в V8 представлены в объектной модели или ассоциативных массивах. Профилировщик времени отслеживает выполнение возможностей и передает их оптимизирующему компилятору.

Кроме этого движок осуществляет деоптимизацию, которая помогает минимизировать сгенерированный программный код. Также имеется система управления памятью, которая использует сборку «мусора».

Как улучшить производительность JavaScript?

Сейчас рассмотрим подсказки и хитрости, которые могут повысить производительность кода.

Использование ссылок HTTP/2 и Point

HTTP/2 увеличивает производительность веб-сайта за счет использования мультиплексирования, которое поддерживает выполнение нескольких запросов одновременно. Оно также может сократить число обходов DOM, сохранив ссылки на указатели в объектах браузера.

При этом сложность HTML-кода играет решающую роль в скорости выполнения запроса или изменения объектов DOM. Удалите ненужные теги <div> и <span>, чтобы увеличить быстродействие веб-сайта.

Буферизируйте DOM и сожмите файлы

Для удаления элементов из DOM можно легко использовать буферизацию в случае, если есть прокручиваемые DIV, которые в данный момент не видны. Попробуйте применить Gzip или Brotli для сжатия, чтобы уменьшить JavaScript-файлы.

Используйте менеджеры зависимостей после загрузки и установите ограничения зависимостей библиотеки

Отслеживайте загруженные зависимости, чтобы случайно не загрузить их повторно. Даже зависимости на уровне библиотек сильно влияют на время загрузки. Так что старайтесь использовать их как можно легко реже.

Используйте document.getElementById() и this

Для создания селекторов, основанных на именах тегов и классов, может понадобиться jQuery. Эта библиотека просматривает элементы DOM для поиска соответствий. Чтобы его ускорить, можно использовать следующий способ:

// С jQueryvar 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-код

Инструменты для улучшения производительности JavaScript

Существует пару инструментов для сжатия кода, которые помогают разработчикам приложения. Они помогают удалить из исходного кода ненужные символы. Вследствие чего уменьшается размер файлов и сокращается время загрузки.

Google Closure Compiler

Он компилирует исходный код прямо, чтобы убрать ненужный. Кроме этого для анализа, парсинга и переписывания кода Google Closure Compiler дважды проверяет синтаксис и ссылки на переменные.

Packer

Может сжать код за считанные секунды. Также есть функцию быстрой распаковки для повышения производительности приложения.

YUI Compressor

Это инструмент командной строки от Yahoo обеспечивает более высокую степень сжатия CSS-файлов, чем большинство иных. Он сокращает время загрузки, повышает производительность и улучшает управление памятью.

Заключение

Если реализовать все советы по оптимизации кода, то можно легко значительно повысить производительность веб-сайта. Также мы советуем создать собственный список методов оптимизации JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *