Производительность JavaScript
Как ускорить код JavaScript.
Уменьшите активность в циклах
Циклы часто используются в программировании.
Каждый оператор в цикле, включая оператор for, выполняется для каждой итерации цикла.
Операторы или присваивания, которые могут быть помещены вне цикла, ускорят выполнение цикла.
Плохой:
for (let i = 0; i < arr.length; i++) {
Лучший код:
let l = arr.length;
for (let i = 0; i < l; i++) {
Плохой код обращается к свойству длины массива при каждом повторении цикла.
Лучший код обращается к свойству длины вне цикла и ускоряет выполнение цикла.
Уменьшить доступ к DOM
Доступ к HTML DOM выполняется очень медленно по сравнению с другими операторами JavaScript.
Если вы ожидаете получить доступ к элементу DOM несколько раз, обратитесь к нему один раз и используйте его как локальную переменную:
Пример
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Уменьшить размер DOM
Держите количество элементов в HTML DOM небольшим.
Это всегда улучшит загрузку страницы и ускорит рендеринг (отображение страницы), особенно на небольших устройствах.
Каждая попытка поиска в DOM (например, getElementsByTagName) будет выигрывать от меньшего DOM.
Избегайте ненужных переменных
Не создавайте новые переменные, если вы не планируете сохранять значения.
Часто вы можете заменить код следующим образом:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
С этим:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Задержка загрузки JavaScript
Размещение скриптов в нижней части тела страницы позволяет браузеру сначала загрузить страницу.
Во время загрузки скрипта браузер не будет запускать другие загрузки. Кроме того, все действия по синтаксическому анализу и рендерингу могут быть заблокированы.
Спецификация HTTP определяет, что браузеры не должны загружать более двух компонентов параллельно.
Альтернативой является использование defer="true"
тега script. Атрибут defer указывает, что скрипт должен выполняться после завершения синтаксического анализа страницы, но он работает только для внешних скриптов.
Если возможно, вы можете добавить свой скрипт на страницу по коду, после загрузки страницы:
Пример
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Избегайте использования с
Избегайте использования with
ключевого слова. Это отрицательно сказывается на скорости. Это также загромождает области видимости JavaScript.
Ключевое with
слово не разрешено в строгом режиме.