• Курсы Академии Кодебай, стартующие в мае - июне, от команды The Codeby

    1. Цифровая криминалистика и реагирование на инциденты
    2. ОС Linux (DFIR) Старт: 16 мая
    3. Анализ фишинговых атак Старт: 16 мая Устройства для тестирования на проникновение Старт: 16 мая

    Скидки до 10%

    Полный список ближайших курсов ...

Гостевая статья 7 основных советов, чтобы ваш код JavaScript выполнялся быстрее

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

Совет 1: Минимизируйте доступ к DOM

Доступ к DOM (объектной модели документа) напрямую связан с расходами. Если ваше приложение обращается к элементам DOM много раз, вы можете вместо этого получить к нему доступ один раз и использовать его как локальную переменную. Помните, что если вы удалите это значение из DOM, тогда для переменной нужно будет установить значение null, чтобы предотвратить утечки памяти.
React и Vue используют Virtual DOM
В современных - веб библиотеках таких, как React и Vue, они упрощают доступ к DOM и вместо этого используют то, что называется Virtual DOM. React и Vue обеспечивают отличную производительность при использовании Virtual DOM по сравнению с реальной DOM. И разработчикам не нужно беспокоиться о том, что происходит за сценой с доступом к DOM в React или Vue.
Если вы используете простой JavaScript, убедитесь, что вы максимально сократили доступ к DOM.

Совет 2: удалите неиспользуемый код и зависимости

Этот совет применим для любого языка программирования. Удаление неиспользуемого кода и зависимостей гарантирует, что ваш код будет компилироваться быстрее и быстрее. Если вы сталкиваетесь с функциями, которые пользователи никогда не используют, было бы неплохо отказаться от всего кода, связанного с этой функцией. Использование аналитики может дать представление о том, как пользователи используют ваше приложение. Если есть функции, которые абсолютно не затрагиваются, вы всегда можете обсудить их с вашей командой и удалить эти функции. Это гарантирует, что ваше веб-приложение загружается быстрее.
Мы также склонны добавлять массу пакетов зависимостей в наши проекты. Сделайте так, чтобы у вас не было нежелательных зависимостей в вашем проекте. Также не добавляйте зависимости третьим сторонам, если вы можете кодировать их без дополнительных зависимостей.
Чистый и лаконичный пакет обеспечит более быструю загрузку вашего сайта и улучшенную общую производительность.

Совет 3: Асинхронный вызов API

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

Совет 4: избегайте использования глобальных переменных

Стандартный совет, который вы услышите от своих коллег, которые какое-то время программировали на JavaScript, состоит в том, чтобы максимально избегать использования глобальных переменных. Причина этого в том, что движку JavaScript во время выполнения требуется больше времени для поиска переменных, существующих в глобальной области видимости. Другая причина избегать глобальных переменных - избегать столкновения имен переменных. В javascript весь код разделяет одно глобальное пространство имен. Когда в вашем коде много глобальных переменных, это может привести к коллизиям между различными скриптами на одной странице.
В приведенном ниже примере name является глобальной переменной и имеет глобальную область видимости. Может использоваться где угодно.

1)
Код:
var name = "Adhithi Ravichandran";
// can access name
function myFunction>(){
// can access name
}
2)
Код:
function myFunction(){
var name = "Adhithi Ravichandran";
// can access name
}
Всегда старайтесь используйте переменные с локальной стороны и избегайте написания переменных, когда это не является абсолютно необходимым. Вы можете использовать JavaScript let и const, которые имеют локальную область видимости по сравнению с JavaScript var.

Совет 5: профилируйте свой код и устраните утечки памяти

Утечки памяти убивают производительность. Утечки памяти занимают все больше и больше памяти, и в конечном итоге занимают все доступное пространство памяти и иногда приводят к сбою приложения. Чтобы повысить производительность JavaScript, убедитесь, что в вашем коде нет утечек памяти. Это общая проблема, с которой мы все сталкивались как разработчики. Вы можете отследить утечки памяти, используя Chrome Dev Tools. Вкладка производительности может дать вам представление о любых утечках памяти. Следите за любые утечки в вашем коде регулярно.

Совет 6: минимизируйте свой код

Минимизация кода JavaScript является обычной практикой, которую вы найдете в любой группе разработчиков. Это относится к удалению любых нежелательных или громоздких элементов из источника JavaScript. Процесс минимизации удаляет такие вещи, как комментарии, пробелы, сокращение имен переменных и функций и т. Д.
Вы можете минимизировать свой код с помощью инструментов сборки, таких как компилятор Google Closure, или онлайн-инструментов, таких как JS Compress, JS minifier и так далее.
Это значительно улучшает производительность вашего кода JavaScript, поэтому не забывайте этот шаг.

Совет 7: будьте осторожны с "петлями"

Этот совет применим ко всем языкам программирования, особенно в JavaScript. Когда мы используем много циклов или вложенных циклов, это влияет на браузер. Следует помнить о том, чтобы как можно больше находиться вне цикла и выполнять только необходимые операции внутри цикла. Чем меньше ваш цикл, тем быстрее код JavaScript. Обязательно избегайте ненужного вложения петель в этом отношении.
Если вы хотите углубленно изучить JavaScript, я настоятельно рекомендую Mosh's курсы JavaScript. Ссылка на все курсы ниже:

 
Последнее редактирование модератором:

explorer

Platinum
05.08.2018
1 080
2 474
BIT
0
Интересно отметить, что посетители сайтов теряют интерес или покидают ваш сайт, если контент не загружается в течение двух секунд. С двухсекундным тестом сложно поспеть, и это означает, что вам нужно оптимизировать код JavaScript для повышения производительности.

Занимаюсь сайтами много лет, поэтому могу сказать, что манипуляции в данной статье не помогут для того, чтобы сайт открывался в 2 секунды. Речь только о JS, а это лишь всего 1 пункт того что нужно сделать. Поэтому оптимизация ТОЛЬКО JavaScript бесполезна, лучше всего чтобы на сайте было вообще как можно меньше JS.

Автор статьи делал её для рекламы курсов по JavaScript )
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!