Чтобы обеспечить свежий и уникальный пользовательский опыт, многие веб-сайты используют JavaScript для улучшения проектирования, проверки форм, проверять браузеры, а также запросы AJAX, операции cookie и т. Д., Для достижения обновленных динамических эффектов. Однако, если вы хотите отображать большое количество контента в браузере, если он не обрабатывается должным образом, производительность веб -сайта резко упадет. Таким образом, необходимо понять, как повысить эффективность выполнения JavaScript.
Функции JavaScript
В JavaScript функции предварительно считываются перед использованием. Хотя иногда строки могут использоваться вместо функций, этот код JavaScript будет переосмысливаться каждый раз, когда он выполняется, влияя на производительность.
1. Eval Пример
Кода -копия выглядит следующим образом:
eval ('output = (input * input)');
// рекомендуется измениться на:
eval (new Function () {output = (input * input)});
2. Пример SetTimeout
Кода -копия выглядит следующим образом:
SetTimeout ("Alert (1)", 1000);
// рекомендуется измениться на:
setTimeout (function () {alert (1)}, 1000);
Используйте функции вместо строк в качестве параметров, чтобы гарантировать, что код в новом методе может быть оптимизирован компилятором JavaScript.
JavaScript Scope
Каждая область в цепочке сфера действия JavaScript содержит несколько переменных. Важно понимать цепочку областей, чтобы вы могли ее воспользоваться.
Кода -копия выглядит следующим образом:
var localvar = "global"; // глобальные переменные
функциональный тест () {
var localvar = "local"; // локальные переменные
// локальные переменные
блюд (LocalVar);
// глобальные переменные
оповещение (this.localvar);
// Найти документ, и локальная переменная не может быть найдена, поэтому ищите глобальную переменную
var pageName = document.getElementById ("pageName");
}
Использование локальных переменных намного быстрее, чем использование глобальных переменных, потому что, чем дальше в цепочке областей, тем медленнее анализ. На следующем рисунке показана структура цепи областей:
Если в коде есть операторы или попытки, цепь применения будет более сложной, как показано на рисунке ниже:
JavaScript Strings
Функцией в JavaScript, которая оказывает очень воздействие на производительность, является конкатенация строки. Как правило, знак + используется для реализации сплайсинга струн. Тем не менее, ранние браузеры не оптимизировали такие методы соединения, что привело к непрерывному созданию и разрушению строк, которые серьезно снижали эффективность выполнения JavaScript.
Кода -копия выглядит следующим образом:
var txt = "hello" + "" + "мир";
Рекомендуется измениться на:
Кода -копия выглядит следующим образом:
var O = [];
o.push ("Привет");
o.push ("");
O.Push ("World");
var txt = o.join ();
Давайте просто инкапсулируем:
Кода -копия выглядит следующим образом:
функция stringBuffer (str) {
var arr = [];
arr.push (str || "");
this.append = function (str) {
arr.push (str);
вернуть это;
};
this.ToString = function () {
return arr.join ("");
};
};
Затем назовите это:
Кода -копия выглядит следующим образом:
var txt = new StringBuffer ();
txt.append ("Привет");
txt.append ("" ");
txt.Append ("World");
Alert (txt.toString ());
JavaScript DOM Operation
HTML Document Object Model (DOM) определяет стандартный способ доступа и манипулирования HTML -документами. Он представляет собой HTML -документ как дерево узлов, которое содержит элементы, атрибуты и текстовое содержимое. Используя HTML DOM, JavaScript может получить доступ и манипулировать всеми узлами в HTML -документе.
DOM Repaint
Каждый раз, когда объект DOM, измененный на странице, включает в себя перераспределение DOM, браузер будет повторно рендерировать страницу. Следовательно, уменьшение количества модификаций объектов DOM может эффективно повысить производительность JavaScript.
Кода -копия выглядит следующим образом:
для (var i = 0; i <1000; i ++) {
var elmt = document.createElement ('p');
elmt.innerhtml = i;
document.body.appendchild (elmt);
}
Рекомендуется измениться на:
Кода -копия выглядит следующим образом:
var html = [];
для (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
DOM Access
Каждый узел в документе HTML можно получить через DOM. Каждый раз, когда вы называете getElementbyId (), getElementsbytagname () и другие методы, узел будет повторно и доступен. Следовательно, кэш, найденные узлы DOM, также могут улучшить производительность JavaScript.
Кода -копия выглядит следующим образом:
document.getElementbyId ("p2"). style.color = "blue";
document.getElementbyId ("p2"). style.fontfamily = "arial";
document.getElementById ("p2"). style.fontsize = "Большой";
Рекомендуется измениться на:
Кода -копия выглядит следующим образом:
var elmt = document.getElementbyId ("p2");
elmt.style.color = "blue";
elmt.style.fontfamily = "arial";
elmt.style.fontsize = "больше";
DOM Traversal
Домные дочерние элементы обычно читают следующий дочерний элемент с помощью индексного цикла. В ранних браузерах этот метод чтения очень эффективен в исполнении. Использование метода обмена может повысить эффективность обхода DOM с помощью JS.
Кода -копия выглядит следующим образом:
var html = [];
var x = document.getelementsbytagname ("p"); // Все узлы
for (var i = 0; i <x.length; i ++) {
// Тодо
}
Рекомендуется измениться на:
Кода -копия выглядит следующим образом:
var html = [];
var x = document.getElementByid ("div"); // Верхний узел
var node = x.firstchild;
while (node! = null) {
// Тодо
node = node.nextibling;
}
Выпуск памяти JavaScript
В веб -приложениях, по мере увеличения количества объектов DOM, потребление памяти станет больше и больше. Следовательно, ссылки на объекты должны быть выпущены во времени, чтобы браузер мог переработать эту память.
Освободить память, занятую DOM
Кода -копия выглядит следующим образом:
document.getElementbyId ("test"). innerHtml = "";
Установка innerhtml элемента DOM на пустую строку может освободить память, занятую его дочерним элементом.
Выпустить объект JavaScript
Кода -копия выглядит следующим образом:
//Объект:
obj = null
// свойства объекта:
Удалить obj.property
// элементы массива:
arr.splice (0,3); // удалить первые 3 элемента