В этой статье описываются общие методы JavaScript для повышения производительности. Поделитесь этим для вашей ссылки, следующим образом:
1. Обратите внимание на область
По мере увеличения количества областей в цепочке областей увеличивается время для доступа к переменным за пределами текущего объема, также увеличивается. Доступ к глобальным переменным всегда медленнее, чем доступ к локальным переменным, потому что вам необходимо пройти через цепь прицелов.
1). Всегда правильно избегать глобальных поисков для хранения глобальных объектов, которые будут использоваться несколько раз в функции в качестве локальных переменных.
2). Избегайте этого с утверждением с созданием собственного объема, увеличивая длину цепочки объема, в которой выполняется код.
2. Выберите правильный метод
Часть проблемы производительности связана с алгоритмом или методом, используемым для решения проблемы.
1). Избегайте ненужных поисков атрибутов
В информатике сложность алгоритма представлена символом O. Самый простой и самый быстрый алгоритм - это постоянное значение, а именно O (1). После этого алгоритм становится все более и более сложным и занимает больше времени для выполнения. Общие типы алгоритмов JavaScript:
Постоянная: Независимо от того, сколько их значений, время выполнения постоянно. Как правило, он представляет собой простое значение и значение, хранящееся в переменной.
Logarithm: общее время выполнения связано с количеством значений, но нет необходимости получать каждое значение для завершения алгоритма. Например: бинарный поиск
Линейный: общее время выполнения напрямую связано с количеством значений. Например: перевернуть все элементы в массиве
Квадрат: общее время выполнения связано с количеством значений, и каждое значение должно быть получено как минимум n раз. Например: вставьте сортировку
Куб: общее время выполнения связано с количеством значений, и каждое значение должно получить как минимум квадраты n.
Использование переменных и массивов более эффективно, чем доступ к свойствам на объектах. Поиск любого атрибута на объекте занимает больше времени, чем доступ к переменной или массиву, потому что свойство с этим именем необходимо искать в цепочке прототипа.
Вообще говоря, до тех пор, пока сложность алгоритма может быть уменьшена, она должна быть сведена к минимуму как можно больше. Используйте как можно больше локальных переменных, чтобы заменить поиск свойств на поиск значений. Кроме того, если вы можете получить доступ к нему с помощью оцифрованных позиций массива или использовать именованные атрибуты (например, объекты Nodelist), то используйте положение массива.
2). Оптимизируйте петлю
а Итерация нарушений Во многих случаях итераторы, которые начинаются с максимального значения и постоянно нарушают цикл, являются более эффективными.
беременный Упрощенные условия завершения. Поскольку каждый процесс цикла вычисляет условия завершения, оно должно быть обеспечено как можно быстрее.
в Упрощенное корпус петли. Тело петли является наиболее выполненным, поэтому убедитесь, что он оптимизирован в максимальной степени. Убедитесь, что нет интенсивных расчетов, которые можно легко удалить из петли.
дюймовый Наиболее часто используются для и в то время как петли в петлях после тестирования являются петлями предварительного тестирования. Петли после тестирования, такие как DO-WHILE, могут избежать начального прекращения расчета состояния и, следовательно, быстрее.
3). Разверните цикл, когда определяется количество петлей, исключая петлю, и использование нескольких вызовов функций часто быстрее. Например, знаменитое устройство Даффа
4). Избегайте двойного объяснения
Когда код JavaScript хочет проанализировать JavaScript, состоится штраф в два раза. Следующий пример:
eval ("alert ('Hello World!')"); // Некоторые коды оценивают значенияЗафиксированный:
оповещение («Привет, мир»);
var sayshi = новая функция ("alert ('Hello World!')");Зафиксированный:
var sayshi = function () {alert ("hellow world! ');}; SetTimeout ("Alert ('Hellow World!')", 500);Зафиксированный:
setTimeout (function) ({alert ('hellow world!');}, 500);5). Другие методы
Нативные методы быстрее - когда это возможно, используйте местные методы, а не переписывают его в JavaScript самостоятельно. Нативные методы написаны на скомпилированных языках, таких как C/C ++, поэтому они намного быстрее, чем JavaScript. Самая легко забытая вещь в JavaScript - это сложные математические операции, которые можно найти в математических объектах; Эти методы намного быстрее, чем любой другой метод, написанный в JavaScript, такой как синус и косинус.
Операторы коммутатора быстрее - если есть сложный оператор IF -ELSE, который можно преобразовать в один оператор переключателя, вы можете получить более быстрый код. Вы также можете организовать операторы случая в наиболее вероятном порядке до наименее вероятного порядка, чтобы еще больше оптимизировать операторы переключения.
Операторы битов быстрее - когда выполняются математические операции, операции битов быстрее, чем любые логические или арифметические операции. Селективное преобразование операций битов может значительно улучшить производительность сложных расчетов. Например, Modulo, логика и логика Sum, вы можете рассмотреть возможность использования битовых операций для их замены.
3. минимизировать количество заявлений
1). Несколько переменных объявлений
нравиться:
// 4 операторы --- Это пустая трата var count = 5; var color = "blue"; var values = [1,2,3]; var now = new Date ();
Оптимизация:
var count = 5, color = "blue", values = [1,2,3], noiw = new Date ();
Эта оптимизация очень легко сделать в большинстве случаев и намного быстрее, чем одноцветное объявление с переменной отдельно.
2). Вставьте итерационную ценность
нравиться:
var name = values [i]; i ++;
Оптимизация:
var name = values [i ++];
3). Используйте массивы и объектные литералы
нравиться:
var values = new Array (); ---> var values = [];
var obj = new Object (); ---> var obj = {};
4. Оптимизировать взаимодействие DOM
1). Минимизировать обновления на месте
Как только вам нужно получить доступ к доме, является частью отображаемой страницы, вы делаете живое обновление. Причина, по которой его называют живым обновлением, заключается в том, что страницу необходимо немедленно обновить (на месте) на дисплей пользователя. Будь то вставка одного символа или удаление всего клипа, существует штраф за производительность, потому что браузер должен пересматривать бесчисленные размеры для обновления.
пример:
var list = document.getElementbyId ("mylist"); for (var i = 0; i <10; i ++) {var item = document.createElement ("li"); list.appendchild (item); item.appendchild (document.createtextnode ("item"+i));}Это добавляет 10 проектов, и эта операция требует в общей сложности 20 обновлений на месте. Следующее - улучшить следующий метод создания фрагментов документа:
var list = document.getElementbyId ("myList"); var fragment = document.createdocumentFragment (); for (var i = 0; i <10; i ++) {fragment.appendchild (item); item.appendchild (document.createtextnode ("item"+i));} list.appendchlid (фрагмент);В этом примере есть только одно живое обновление, которое происходит после создания всех проектов. Фрагмент документа используется в качестве временного заполнителя для размещения недавно созданного проекта. Затем используйте AppendChild (), чтобы добавить все элементы в список. Помните, что когда AppendChild () передается в фрагменте документа, к цели добавляются только дочерние узлы в фрагменте, а сам фрагмент не будет добавлен.
Как только вам нужно обновить DOM, рассмотрите возможность использования фрагментации документа для создания структуры DOM, а затем добавьте ее в существующий документ.
2). Используйте innerhtml
На странице есть два способа создания узлов DOM: использование таких методов DOM, как CreateElement (), AppendChild (), и использование innerhtml для небольших изменений DOM, оба метода похожи по эффективности. Для больших изменений DOM, использование innerhtml намного быстрее, чем использование стандартных методов DOM для создания одной и той же структуры DOM. Точно так же использование innerhtml в одно время намного быстрее, чем использование innerhtml несколько раз.
3). Используйте прокси -сервер событий (простой, опущен)
4). Обратите внимание на Nodelist
Минимизация количества доступа к Nodelist может значительно улучшить производительность сценариев.
Объект Nodelist возвращается, когда происходит следующее:
а Вызов GetElementsBytagName () сделан
беременный Получите свойство детей элемента
в Получить атрибуты элемента
дюймовый Доступ к специальным коллекциям, таким как Document.forms, Document.Images и т. Д.
Необходимо понимать, что при использовании объектов Nodelist разумное использование значительно улучшит скорость выполнения кода.
Функция, представленная ранее, также является очень важным аспектом. Особенно, когда несколько петель очень получают производительность, этот метод очень полезен.
PS: для сжатия JavaScript сокращение размера кода также является эффективным способом повышения производительности JavaScript. Вот два очень практических инструмента сжатия:
JavaScript Compression/Formatting/Инструменты шифрования:
http://tools.vevb.com/code/jscompress
JSMIN Online JS сжатие:
http://tools.vevb.com/code/jsmincompress
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.