17 Способов улучить производительность JavaScript

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

Типичные проблемы с производительностью JavaScript 
Перед тем, как исправить проблемы, их нужно сначала определить. Вот несколько вещей, которые могут негативно сказаться на коде: 

- Слишком много интеракций с узлом сети. С каждой интеракцией с пользовательским браузером или главным объектом риск ошибок и низкой производительности растет. Эту проблему можно определить, если загрузка DOM объектов (объектная модель документа) слишком медленная. И хотя вы не можете полностью исключить все интеракции, их количество можно снизить, блокировав DOM.
- Слишком много зависимостей от манипуляций в JavaScript, из-за чего страдает производительность веб-страниц и приложений. Пользователю приходится ждать вечность, пока объекты прогрузятся, что особенно неудобно для мобильных пользователей с ограниченной пропускной способностью. 
- Неправильная обработка событий. Если вы используете инструменты для обработки грамотно, то производительность действительно может стать выше, но невозможно уследить за каждым из них, а потому они могут повторяться даже без вашего ведома. Пользуйтесь обработкой событий продуманно. 
- Излишние повторения цикла. Поскольку повторение цикла занимает немало времени, нужно избавиться от ненужных циклов и переходов внутри них для ускорения производительности. 
- Неорганизованный код. У медали две стороны, так же как и у кода JavaScript, который предоставляет много лексических структурных компонентов, но при плохой организации может привести к неправильному распределению ресурсов. Чтобы научиться грамотно писать JavaScript код, стоит ознакомиться со стандартами Европейской ассоциации производителей вычислительной техники. 

17 способов улучшить производительность JavaScript 
Теперь, когда вы знаете, что может негативно повлиять на производительность JavaScript, пришла пора научиться исключать эти факторы и повышать эффективность кода. 

1. Используйте протокол HTTP/2. Это новая версия протокола HTTP, которая не только повышает производительность сайта и JavaScript, но и ускоряет загрузку вашего сайта. Поскольку протокол HTTP/2 поддерживает многократную передачу данных, несколько запросов и ответов могут обрабатываться одновременно. Так что если вы еще не перешли на HTTPS, самое время сделать это и воспользоваться преимуществами протокола.  
2. Используйте указатели ссылок. Если вы храните указатели ссылок на объекты браузера во время установки, вы можете исключить установку связи с DOM объектами. Если же DOM объекты вряд ли будут меняться, вы можете сохранить ссылку на DOM или jQuery Use объекты при создании страниц, чтобы ускорить их загрузку.  
3. Сокращайте HTML код. От сложности HTML кода зависит время, необходимое для обработки запроса и модификации DOM-объектов. Вы можете ускорить загрузку HTML кода в два раза, если повысите скорость связи с DOM-объектами. Это сложная задача, но вы можете начать с удаления лишних тегов <span> и <div>.
4. Используйте CDN. Сети доставки контента кэшируют все статичные объекты с веб-страниц (включая код JavaScript) и доставляют данные пользователям с ближайших точек присутствия. Это помогает значительно ускорить загрузку страниц и минимизировать потерю данных.  
5. Сжимайте файлы. Такие инструменты как Brotli и Gzip позволяют уменьшить размер JS файлов вполовину или более. Это дает пользователям быстрый доступ и улучшает производительность. 
6. Делайте пакетную обработку всех изменений в DOM-файлах, чтобы избежать повторного экранного рендеринга. Если вы меняете стили, постарайтесь сделать все модификации за раз вместо того, чтобы менять каждый стиль индивидуально. 
7. Если у вас есть страницы с возможностью прокрутки, то вы можете применить буферизацию DOM-объектов, которые находятся вне поля зрения. Это сэкономит и память, и ресурсы для просмотра DOM-объектов. 
8. Ограничьте зависимости от библиотек или вовсе избавьтесь от них. Если вам нужны более сложные CSS селекторы, вы можете использовать Sizzle.js вместо jQuery. Если же вы используете библиотеки с одной функцией, то можно попробовать внедрить эту функцию отдельно. 
9. Сокращайте код. Превратите элементы приложения в файлы формата *.js и прогоните их через программу минификации кода JavaScript: это поможет уменьшить их размер. Для этого есть множество бесплатных инструментов.  
10. Добавьте диспетчер внедрения зависимостей после загрузки, например, RequireJS или Webpack. Таким образом, пользователь сможет увидеть структуру приложения еще до того, как полностью прогрузится его функциональность. Эта опция удобна для новых пользователей, и она помогает повысить конверсию. Убедитесь, что ваш диспетчер внедрения зависимостей может определить, какие зависимости уже были загружены, чтобы этого не произошло дважды. Убедитесь, что пользователь сможет увидеть минимум необходимой информации. 
11. Наряду с CDN внедрите кэширование браузера, чтобы файлы быстро загружались как для первых, так и для последующих посетителей.  
12. Обратите внимание на обработчик событий. Поскольку за секунду может быть выполнено множество движений мышью и масштабирований, вы должны проанализировать, сколько времени уходит на эти операции. Если для их исполнения требуется более 2-3 миллисекунд, то код нужно лучше оптимизировать.  
13. Замените событие «клик» на событие mouseup. Это повысит производительность и снизит риск пропущенных интеракций, если пользователь сделает несколько кликов.   
14. Выбирайте встроенные функции. Вместо того, чтобы писать собственные алгоритмы и использовать главные объекты, вы можете отдать предпочтение встроенным конструкциям и функциям. Например, у кода ECMAScript есть множество встроенных конструкций.
15. Активируйте функции Async и Defer, чтобы тэги скрипта могли загружаться не одновременно, или откладывайте исполнение кода до момента, пока не прогрузится вся страница. 
16. Анимируйте с помощью requestAnimationFrame. Разные JS библиотеки, включая Anime.js и Gsap отлично подходят для быстрого анимирования, но если созданные объекты загружаются медленно, вы можете ускорить их с помощью requestAnimationFrame.
17. Используйте функции throttle и debounce. Если вы ограничите количество раз исполнения JavaScript, вы можете повысить производительность приложения. Функция throttle позволяет определять количество раз, которые может быть использована функция, а функция debounce нужна для того, чтобы функция могла быть исполнена повторно только при прошествии определенного времени. 
Чтобы улучшить производительность JavaScript, вы можете использовать множество разных инструментов, включая YUI Compressor, Dojo ShrinkSafe, Google Closure Compiler и Packer. Они позволяют сжимать код и помогают пользователям улучшить время загрузки сайта. 
 

 

26.10.2017
Поделитесь ссылкой в соц сетях:

Комментарии:

Комментариев нет

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

Авторизоваться:
Анонимно

Нет времени ждать. Закажите выделенный сервер сейчас.

Благодаря нашей сети суммарной пропускной способностью свыше 1400 Gbps вы сможете узнать, что такое по-настоящему быстрый отклик. Мы следим за шириной канала провайдеров, точками обмена трафиком и инфраструктурой сети, что позволяет избежать даже минимальных прерываний в работе.
Надежность работы обеспечивается качественными аппаратными решениями Dell и Supermicro - ведущими производителями серверов.


Получить 2 месяца по цене 1 Консультация эксперта
Наши дата-центры подключены к сетям:
  • 20 x 10GE Level3
  • 22 x 10GE GlobalCrossing
  • 20 x 10GE Telia
  • 3 x 10GE Deutsche Telecom
  • 20 x 10GE Tata Communications
  • 60 x 10GE IPTransit

Также Вам может быть интересно!

Сетевые атаки игрового сервера: Предупрежден, значит, вооружен

Вы никогда не знаете на что способы хакеры, и дать какому-нибудь подростку сломать вашу игровую систему было бы непозволительно глупо. Даже если вы никому не перешли дорогу, это не значит, что вас не могут взломать просто так: это необязательно месть или выходки...

Бизнес-преимущества сети доставки контента

Сети доставки контента (CDN) доставляют огромное количество контента через сайты и сети по всему миру. Этот контент включает в себя текст, скрипты, документы, изображения, ПО, медиа-файлы, потоковое видео и т.д. Чтобы доставить столько разнообразного контента пользователям...

«Чистый металл» vs Гипервизор: Что лучше для моего проекта?

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

5 Ключевых преимуществ виртуального выделенного сервера

Не секрет, что за последние годы виртуальные выделенные серверы завоевали рынок, а поскольку виртуализация – это недорогой способ улучшить производительность, этот тренд продолжит свое развитие. Если вы ищете хорошее решение для хостинга, вам определенно нужен...

Networks Connected