JavaScript - очень гибкий язык. Мы можем написать различные стили кода, как нам нравится. Различные стили кода неизбежно приведут к различиям в эффективности выполнения. В процессе разработки мы подвергаемся многим методам повышения производительности кода. Давайте разобраем общие и легко избежать проблем.
Собственная эффективность выполнения JavaScript
Цепочка областей, закрытие, прототип наследование, Eval и другие функции в JavaScript обеспечивают различные магические функции, а также приводятся к различным проблемам эффективности. Если вы используете его небрежно, вы приведете к неэффективному выполнению.
1. Глобальный импорт
Мы будем использовать некоторые глобальные переменные (окно, документ, пользовательские глобальные переменные и т. Д.) В процессе кодирования. Любой, кто знает цепочку с прицелом JavaScript, знает, что доступ к глобальным переменным в локальном объеме требует прохождения всего слоя цепочки объема по слою до прицела верхнего уровня, а эффективность доступа локальных переменных будет быстрее и выше. Следовательно, при использовании некоторых глобальных объектов на высокой частоте в локальной области, он может быть импортирован в локальную область, например:
Кода -копия выглядит следующим образом:
// 1. Передайте его в модуль как параметр
(функция (окно, $) {
var xxx = window.xxx;
$ ("#xxx1"). xxx ();
$ ("#xxx2"). xxx ();
}) (окно, jQuery);
// 2. Хранение в локальных переменных
function () {
var doc = документ;
var global = window.global;
}
2. Проблемы Eval и Class Eval
Мы все знаем, что Eval может использовать строку в качестве кода JS для выполнения и обработки ее. Говорят, что код, выполненный с использованием Eval, более чем в 100 раз медленнее, чем код, не использующий Eval (я не проверил конкретную эффективность, и те, кто заинтересован, могут проверить его)
Код JavaScript будет выполнять аналогичные операции «предварительные компиляции» перед выполнением: во -первых, он создаст активный объект в текущей среде выполнения и устанавливает переменные, объявленные VAR, как свойства активного объекта, но в настоящее время назначения этих переменных не определены, и функции, определенные в функции, также добавляются в качестве свойств активного объекта, а их значения являются именно определением функции. Однако, если вы используете «eval», код в «Eval» (на самом деле строка) не может предварительно идентифицировать его контекст, не может быть проанализирован и оптимизирован заранее, то есть предварительно скопируемые операции не могут быть выполнены. Следовательно, его производительность будет значительно снижена
На самом деле, люди редко используют Eval Now. Я хочу поговорить здесь, так это сценарий двух типов Eval (новая функция {}, settimeout, setInterver)
Кода -копия выглядит следующим образом:
setTimtout ("Alert (1)", 1000);
SetInterver ("Alert (1)", 1000);
(новая функция ("Alert (1)")) ();
Вышеуказанные типы эффективности выполнения кода будут относительно низкими, поэтому рекомендуется напрямую передать анонимные методы или ссылки на метод установки.
3. После завершения закрытия переменная, на которую больше не упоминается, будет выпущена.
Кода -копия выглядит следующим образом:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementbytagname ("li");
// **** Другие переменные
// *** некоторые операции
var res = function () {
оповещение (A.Name);
}
вернуть Res;
}) ()
Возвращаемое значение переменной F в вышеуказанном коде - это метод Res, возвращаемый в закрытии, состоящем из непосредственной функции выполнения. Эта переменная сохраняет ссылки на все переменные (A, B, C и т. Д.) В этом закрытии. Следовательно, эти две переменные всегда будут находиться в пространстве памяти, особенно ссылка на элемент DOM будет потреблять много памяти. Мы используем только значение переменной A в Res. Поэтому мы можем освободить другие переменные до возвращения закрытия.
Кода -копия выглядит следующим образом:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementbytagname ("li");
// **** Другие переменные
// *** некоторые операции
// Выпустить переменные, которые больше не используются до возврата закрытия
b = c = null;
var res = function () {
оповещение (A.Name);
}
вернуть Res;
}) ()
Эффективность операционного DOM JS
В процессе веб-разработки узкое место эффективности выполнения фронт-эндов часто находится на операциях DOM. Операции DOM-это очень потребляющая производительность. Как мы можем попытаться сохранить производительность во время операций DOM?
1. Уменьшите отем
Что такое рефтова?
Когда свойства изменения элемента DOM изменяются (например, цвет), браузер уведомит рендеринг для переопределения соответствующего элемента. Этот процесс называется перекрашенным.
Если изменение включает в себя макет элемента (например, ширина), браузер отбрасывает исходные атрибуты, пересматривает и передает результат, чтобы переоборудовать элементы страницы. Этот процесс называется кафел.
Как уменьшить кафе
Сначала удалите элемент из документа и после завершения модификации, затем верните элемент в его исходную позицию (когда большое количество операций отрабатывания выполняется на определенном элементе и его детских элементах, последствия методов 1 и 2 будут более очевидными) будут более очевидны)
Установите отображение элемента в «Нет», и после завершения модификации измените дисплей на исходное значение
Определите класс класса при изменении нескольких атрибутов стиля вместо того, чтобы изменять атрибуты стиля несколько раз (рекомендовано определенными учениками)
Используйте DocumentFragment при добавлении больших объемов элементов на страницу
Например
Кода -копия выглядит следующим образом:
for (var i = 0; i <100: i ++) {
var Child = docuemnt.createElement ("li");
child.innerhtml = "ребенок";
document.getElementById ("Родитель"). AppenDChild (ребенок);
}
Когда код требует многочисленного доступа к информации о состоянии элемента, мы можем временно хранить его в переменной, когда состояние остается неизменным, что может избежать накладных расходов памяти, вызванного множественным доступом к DOM. Типичным примером является:
При поиске элементов DOM старайтесь избегать пересечения элементов страницы в больших областях, постарайтесь использовать точные селекторы или указать контекст, чтобы сузить диапазон поиска, взяв jQuery в качестве примера
Используйте меньше нечетких соответствующих селекторов: например, $ ("[name*= '_ fix']"), больше используйте больше композитных селекторов, таких как ID, и постепенное сужение применения $ ("li.active") и т. Д.
Укажите контекст: например, $ ("#parent .class"), $ (". Class", $ el) и т. Д.
4. Используйте делегирование событий
Сценарий использования: список с большим количеством записей. Каждая запись должна быть связана, чтобы щелкнуть события. Некоторые функции реализованы после нажатия на мышь. Наша обычная практика - связывать события для каждой записи. Эта практика приведет к большому количеству слушателей событий на странице, что относительно неэффективно.
Основной принцип: мы все знаем, что события будут пузыриться в спецификации DOM, то есть события любого элемента будут пузыриться до верхнего шага за шагом в соответствии со структурой дерева DOM. Объект Event также предоставляет Event.Target (Srcelement в соответствии с IE), чтобы указать на источник события, поэтому мы можем найти самый оригинальный элемент, который запускает событие, даже если мы прослушиваем событие на родительском элементе. Это основной принцип делегата. Без лишних слов приведенный выше пример
Основываясь на принципе мониторинга событий, представленных выше, давайте переписать его.
Конечно, нам не нужно судить об источнике событий каждый раз, мы можем абстрагировать его и передать его классу инструментов, чтобы завершить его. Метод делегата () в jQuery реализует эту функцию
Синтаксис похож на $ (селектор) .delegate (Childselector, Event, Data, Function), например:
Кода -копия выглядит следующим образом:
$ ("div"). Delegate ("кнопка", "нажимать", function () {
$ ("p"). slidetoggle ();
});
Описание параметра (цитируется из W3School)
Описание параметра
Детский селектор требуется. Указывает, что один или несколько дочерних элементов обработчика событий будут прикреплены.
Мероприятие требуется. Определяет одно или несколько событий, прикрепленных к элементу. Разделите несколько значений событий по пространствам. Должен быть действительное событие.
Данные необязательны. Указывает дополнительные данные, передаваемые функции.
функция требуется. Указывает функцию, которая работает, когда происходит событие.
Советы: Еще одно преимущество делегирования событий заключается в том, что даже события, запускаемые элементами, динамически добавляемые после того, как можно услышать привязку событий, так что вам не нужно связывать события с каждым днем каждый раз, когда вы динамически добавляете элемент на страницу.