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