Производительность 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 Свойства.

Хороший код доступ к свойствам вне цикла length Свойства, чтобы ускорить цикл.

Уменьшите количество обращений к DOM

Доступ к HTML DOM значительно медленнее, чем к другим JavaScript.

Если вы ожидаете访问某个 DOM-элемент несколько раз, то посещайте его один раз и используйте его в качестве локальной переменной:

Пример

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Попробуйте это лично

Уменьшите размер DOM

Постарайтесь поддерживать меньшее количество элементов в HTML DOM.

Это всегда улучшает загрузку страницы и ускоряет рендеринг (показ страницы), особенно на较小的 устройствах.

Каждый раз, когда вы пытаетесь搜索 DOM (например getElementsByTagNameВсе это будет受益ать от более малого DOM.

Избегайте избыточных переменных

Не создавайте новые переменные, которые не планируете хранить значения.

Обычно вы можете заменить код:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Используйте этот код:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Делайте загрузку JavaScript с задержкой

Пожалуйста, поместите скрипт в нижнюю часть страницы, чтобы браузер сначала загрузил страницу.

Во время загрузки скрипта браузер не запускает другие загрузки. Кроме того, все процессы парсинга и рендеринга могут быть заблокированы.

HTTP-стандарт определяет, что браузер не должен параллельно загружать более двух типов элементов.

Одна из опций - использовать в теге script defer="true". Свойство defer определяет, что скрипт должен выполняться после завершения парсинга страницы, но оно применяется только к внешним скриптам.

Если возможно, вы можете добавить скрипт на страницу через код после завершения загрузки страницы:

Пример

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Избегайте использования with

Пожалуйста, избегайте использования with Ключевое слово. Оно негативно влияет на скорость. Оно также может вызвать путаницу в области видимости JavaScript.

В строгом режимеЗапрещено Ключевое слово with.