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