Среди предложений (i) JavaScript по улучшению производительности веб -сайта выдвигаются несколько предложений для улучшения производительности веб -сайта от HTTP -запросов до рендеринга страницы. Эта статья является краткой с точки зрения производительности JavaScript после изучения еще одной книги Стива Саундерса, «Расширенное руководство по строительству высокопроизводительных веб-сайтов».
Производительность JavaScript является ключом к реализации высокопроизводительных веб-приложений
-Стивщики
1. Использование цепочки с прицелом JS
Цепочка применения
При выполнении кода JavaScript (глобальный код или функция) двигатель JavaScript создаст для него область, также известную как контекст выполнения. После того, как страница будет загружена, сначала будет создана глобальная область, а затем будет выполнена каждая функция, будет установлена соответствующая область применения, что формирует цепочку применения. Каждая прицела имеет соответствующую цепочку областей, голова цепи является глобальной областью, а хвост цепи является темовой областью функции.
Цель цепочки объема - проанализировать идентификаторы. Когда функция создается (не выполнена), это, аргументы, названные параметры и все локальные переменные в функции будут добавлены в текущую область. Когда JavaScript необходимо найти переменную x (этот процесс называется разрешением переменной), он сначала будет искать, есть ли атрибут x из конца цепи в цепочке объема, то есть текущий объем. Если это не найдено, продолжайте искать по цепочке прицелов до цепочки, то есть глобальная цепочка областей, а переменная не найдена, считается, что в цепочке применения этого кода нет x, и исключение ссылочной ошибки (ссылка).
Управление глубиной цепочки областей - это простой способ улучшить производительность с небольшим количеством работы. Мы должны избегать медленных скоростей выполнения из -за непреднамеренного роста цепочки прицелов.
Используйте локальные переменные (максимально возможные сетки оцелевых цепей)
Если мы понимаем концепцию цепочки объема, то мы должны прояснить, что переменные анализа двигателя JavaScript связаны с глубиной цепочки объема. Очевидно, что локальные переменные находятся в конце цепи и имеют самую быструю скорость доступа. Поэтому хороший опыт: когда любая нелокальная переменная используется более одного раза, используйте локальные переменные для их хранения, например:
function bediceiv () {document.getElementById ('myDiv'). className = 'изменено'; document.getElementById ('myDiv'). style.height = 150;}Здесь элемент MyDiv DOM ссылается дважды. Для более быстрого ссылки мы должны хранить его с локальной переменной. Преимущества этого не только сокращают цепочку областей, но и избегают дублирующих запросов элементов DOM:
Функция mediceiv () {var mydivstyle = document.getElementById ('myDiv'). Style; MyDiv.ClassName = 300; myDiv.Style.height = 150;}Избегайте использования с (не выращивайте цепочки оцельки)
Как правило, во время выполнения кода цепочка объема функции является фиксированной, но с может временно увеличить цепочку объема функции. с использованием для отображения свойств объекта в качестве локальных переменных, чтобы сделать их простыми в доступе, например:
var user = {name: 'vicfeel', age: '23 '}; function showuser () {var local = 0; с (user) {console.log ("name" + name); console.log ("age" + age); console.log (local);}} showuser ();В этом примере с временным объемом добавляется к концу цепочки сферы ShowUser, которая хранит все свойства объекта пользователя, то есть цепочка областей с кодом увеличивается. В этом коде локальные переменные, такие как локальные изменения от первого объекта в конце цепочки до второго, что, естественно, замедляет доступ к идентификаторам. До тех пор, пока утверждение не закончится, цепочка областей возобновит рост. Из -за этого недостатка мы должны попытаться избежать использования ключевого слова.
Еще 2 разумного управления потоком
Как и другие языки программирования, JavaScript имеет некоторые операторы управления потоком (петли, условия и т. Д.), И использование соответствующих операторов на каждой ссылке может значительно улучшить скорость работы сценария.
Быстрое состояние суждения
Когда дело доходит до условного суждения, первый способ избежать:
if (value == 0) {return result0;} else if (value == 1) {return result1;} else if (value == 2) {return result2;} else if (value == 3) {return result3;} else else (value == 4) {return result4;} else if rescoot = value = return result5;} else if (value == 6) {vorte = return6; результат7;}Основная проблема с этим методом использования, если для условного суждения заключается в том, что уровень слишком глубокий. Когда я хочу значение = 7, время потребляет гораздо дольше, чем значение = 0, что значительно теряет производительность и является плохой читаемостью.
Лучший способ вынести суждения с переключением.
swithc (value) {case 0: return result0; case 1: return result1; case 2: return result2; case 3: return result3; case 4: return result4; case 5: return result5; case 6: return result6; default: return result7;}Это не только улучшает читабельность, но и требует более быстрого времени запроса, чем если. Но если если бы быстрее, чем переключение, если только одно или два условия
В JavaScript есть еще один способ запросить условные. Предыдущим примером было возвращение различных значений в соответствии со значением, которое, как оказалось, может использовать массивы для реализации отображения запросов хэш -таблиц.
// Определите массив var results = [result0, result1, result2, result3, result4, result5, result6, result7]; // Запрос результатов возврата [значение];
Этот метод массива более эффективен, когда диапазон запросов большой, потому что он не должен обнаруживать верхние и нижние границы, и необходимо только заполнять значение индекса для запроса. Его ограничение состоит в том, что условие соответствует одному значению, а не серии операций. Поэтому мы должны всесторонне объединить фактическую ситуацию, выбрать соответствующий метод суждения и максимизировать производительность.
Быстрый цикл
В JavaScript есть 4 метода петли для цикла DO-WHILE, в то время как Loop и For-in Loop. Вот очень часто используемый метод переработки:
var values = [1,2,3,4,5]; for (var i = 0; i <values.length; i ++) {process (values [i]);}Мы видим, что наиболее очевидной оптимизацией этого кода является значения. Каждый цикл, который я должен сравнивать с длиной значений. Запрос атрибутов больше трудоемкий, чем локальные переменные. Если количество петлей больше, тем больше времени оно будет. Следовательно, он может быть оптимизирован таким образом:
var values = [1,2,3,4,5]; var length = values.length; // локальная длина массива хранилища переменных для (var i = 0; i <length; i ++) {process (values [i]);}Этот код также может продолжать оптимизировать, уменьшая переменную петли до 0 вместо добавления к общей длине.
var values = [1,2,3,4,5]; var length = values.length; for (var i = length; i-;) {// уменьшение до 0process (values [i]);}Здесь конец петли преобразуется для сравнения с 0, поэтому скорость каждого цикла быстрее. В зависимости от сложности петли, это простое изменение может сэкономить около 50% случаев, чем раньше.