Опрос 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)
2)
Всегда старайтесь используйте переменные с локальной стороны и избегайте написания переменных, когда это не является абсолютно необходимым. Вы можете использовать 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. Ссылка на все курсы ниже:
Совет 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
}
Код:
function myFunction(){
var name = "Adhithi Ravichandran";
// can access name
}Совет 5: профилируйте свой код и устраните утечки памяти
Утечки памяти убивают производительность. Утечки памяти занимают все больше и больше памяти, и в конечном итоге занимают все доступное пространство памяти и иногда приводят к сбою приложения. Чтобы повысить производительность JavaScript, убедитесь, что в вашем коде нет утечек памяти. Это общая проблема, с которой мы все сталкивались как разработчики. Вы можете отследить утечки памяти, используя Chrome Dev Tools. Вкладка производительности может дать вам представление о любых утечках памяти. Следите за любые утечки в вашем коде регулярно.
Совет 6: минимизируйте свой код
Минимизация кода JavaScript является обычной практикой, которую вы найдете в любой группе разработчиков. Это относится к удалению любых нежелательных или громоздких элементов из источника JavaScript. Процесс минимизации удаляет такие вещи, как комментарии, пробелы, сокращение имен переменных и функций и т. Д.
Вы можете минимизировать свой код с помощью инструментов сборки, таких как компилятор Google Closure, или онлайн-инструментов, таких как JS Compress, JS minifier и так далее.
Это значительно улучшает производительность вашего кода JavaScript, поэтому не забывайте этот шаг.
Совет 7: будьте осторожны с "петлями"
Этот совет применим ко всем языкам программирования, особенно в JavaScript. Когда мы используем много циклов или вложенных циклов, это влияет на браузер. Следует помнить о том, чтобы как можно больше находиться вне цикла и выполнять только необходимые операции внутри цикла. Чем меньше ваш цикл, тем быстрее код JavaScript. Обязательно избегайте ненужного вложения петель в этом отношении.
Если вы хотите углубленно изучить JavaScript, я настоятельно рекомендую Mosh's курсы JavaScript. Ссылка на все курсы ниже:
Ссылка скрыта от гостей
Последнее редактирование модератором:
