Javascript.RU

Оптимизация Javascript-кода

Оптимизировать код javascript, конечно, надо не везде. Обычно - в ускорении нуждаются

  • интерфейсные компоненты
    • анимация
    • драг'н'дроп
  • обработчики частых событий
    • onmousemove
    • CSS expression (IE)

Основные узкие места - как правило, там, где javascript вызывается очень часто. Мы рассмотрим основные причины тормозов и то, как их преодолеть.

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

Любое обращение к DOM - обычно тяжелее для браузера, чем обращение к переменной javascript. Изменение свойств, влияющих на отображение элемента: className, style, innerHTML и ряда других - особенно сложные операции.

Уменьшение их числа может ускорить скрипт.

Например, эта функция строит элементарный интерфейс:

function buildUI(parent)  {
	parent.innerHTML = ''
	parent.innerHTML += buildTitle()
	parent.innerHTML += buildBody()
	parent.innerHTML += buildFooter()
}

Оптимизация по части доступа к innerHTML будет такая:

function buildUI2(parent) {
	var elementText = ''
	elementText += buildTitle()
	elementText += buildBody()
	elementText += buildFooter()
	parent.innerHTML = elementText
}

Нажатие на кнопку запускает многократный запуск функции и замер общего времени. В разных браузерах разница во времени выполнения будет разной.

время buildUI
время buildUI2

Рассмотрим функцию, которая проходит всех детей узла и ставит им свойства:

function testAttachClick(parent) {

	var elements = parent.getElementsByTagName('div')

	for(var i=0; i<elements.length; i++) {
		elements[i].onclick = function() { 
			alert('click on '+this.number) 
		}
		elements[i].number = i
	}
}

Сколько в ней обращений к DOM ?

Правильный ответ - 4 обращения.

Первое - самое очевидное:

var elements = parent.getElementsByTagName('div')

Функция getElementsByTagName() возвращает специальный объект NodeList, который похож на массив: есть длина и нумерованы элементы, но на самом деле это динамический объект DOM.

Например, если один из элементов NodeList будет вдруг удален из документа, то он пропадет и из elements.

Поэтому следующие обращения - тоже работают с DOM, причем на каждой итерации цикла:

elements.length
elements[i].onclick
elements[i].number

По возможности оптимизируем их:

function testAttachClick2(parent) {

	var elements = parent.getElementsByTagName('div')
	var len = elements.length
	var elem
	
	for(var i=0; i<len; i++) {
		elem = elements[i]
		elem.onclick = function() { 
			alert('click on '+this.number) 
		}
		elem.number = i
	}
}

Такая оптимизация полезна и в случае, когда elements - обычный массив, но эффект от уменьшения обращений к DOM NodeList гораздо сильнее.

Рассмотрим заодно еще небольшую оптимизацию. Функция, которая назначается onclick внутри цикла - статическая. Вынесем ее вовне цикла:

function testAttachClick3(parent) {

	var elements = parent.getElementsByTagName('div')
	var len = elements.length
	var elem

	var handler = function() { 
		alert('click on '+this.number) 
	}


	for(var i=0; i<len; i++) {
		elem = elements[i]
		elem.onclick = handler
		elem.number = i
	}
}

В этом тесте цикл пробегает по 30 элементам. Чем больше элементов - тем больше видна разница. Проверьте в разных браузерах.

Время testAttachClick
Время testAttachClick2
Время testAttachClick3

В Internet Explorer конкатенация строк реализована не совсем корректно. Особенно это видно на длинных строках.

Тормоза возникают, например, когда длинная строка конструируется из множества мелких.

Например, из массива данных делается HTML-таблица:

function makeTable() {
	var s = '<table><tr>'
	for(var i=0; i<arrayData.length; i++) {
		s += '<td>' + arrayData[i] + '</td>'
	}
	s+='</tr></table>'
	return s
}

По-видимому, каждый раз при сложении строк:

  1. создается новая строка
  2. туда копируется первая строка
  3. далее копируется вторая строка

Хотя правильно было бы просто приписывать вторую строку к первой. Тут есть некоторые сложности на низком уровне - в работе с памятью и т.п, но они вполне преодолимы.

В некоторых языках предусмотрены специальные классы для сложения многих строк в одну. Например, в Java это StringBuilder.

Соответствующий прием в javascript - сложить все куски в массив, а потом - получить длинную строку вызовом Array#join.

Так будет выглядить оптимизированный пример с таблицей:

function makeTable2() {
	var buffer = []
	for(var i=0; i<arrayData.length; i++) {
		buffer.push(arrayData[i])
	}
        var s = '<table><tr><td>' + buffer.join('</td><td>') + '</td></tr></table>'
	return s
}

В этом тесте таблица делается из 150 ячеек данных, т.е всего примерно 150 операций прибавления строки к создаваемой таблице.

Тормоза на строках отчетливо видны в Internet Explorer.

Время makeTable
Время makeTable2

В тех браузерах, где проблем со строками нет, заполнение массива является лишней операцией и общее время, наоборот, увеличивается.

Тем не менее, этот способ оптимизации можно применять везде, т.к он уменьшает максимальное время выполнения (IE).

И, конечно, конструирование через строки работает быстрее создания таблицы через DOM, когда каждый элемент делается document.createElement(..).

Только вот таблицу надо делать целиком, т.к в Internet Explorer свойство innerHTML работает только на самом нижнем уровне таблицы: TD, TH и т.п, и не работает для TABLE, TBODY, TR...

В IE есть такая интересная штука как CSS-expressions.

Как правило они используются для обхода IEшных недостатков и багов в верстке. Например:

p {
	max-width:800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
}

Идея хорошая, спору нет, это работает. Но есть здесь и подводный камень.

CSS expressions вычисляются при каждом событии, включая движение мыши, скроллинг окна и т.п.

Например, посмотрите эту страничку в Internet Explorer - полоса чуть ниже должна быть частично закрашена. Каждые 10 вычислений CSS expression меняют ее ширину на 1.

Клик на полоске покажет, сколько всего раз вычислилось CSS expression.

Если CSS-expression достаточно сложное, например, включает вложенные Javascript-вызовы для определения размеров элементов, то передвижение курсора может стать "рваным", как и при сложном обработчике onmousemove.


Автор: Snipe, дата: 15 мая, 2008 - 19:20
#permalink

Хорошая статья.


Автор: Сергей (не зарегистрирован), дата: 29 мая, 2008 - 10:31
#permalink

Позновательная. Надо будет применить...


Автор: Cutalion (не зарегистрирован), дата: 19 июня, 2008 - 20:14
#permalink

Да, полезно. Даже и не думал, что "CSS expressions вычисляются при каждом событии"...


Автор: Cutalion (не зарегистрирован), дата: 19 июня, 2008 - 20:20
#permalink

А в Safari 3.0.2 (522.13.1) первый тест (buildUI) вообще около 1200 мс выполняется... не ожиданно так... в ишаке и то в 3 раза быстрее...


Автор: zm8, дата: 18 марта, 2009 - 10:06
#permalink

наверное стоит также упомянуть и о нативных функциях / операторах, при хитром использовании которых можно добиться более высокой производительности (

for (var i = arr.length; i--;)

, избегание while, Array#push, и так далее)


Автор: Zeroglif, дата: 18 марта, 2009 - 12:48
#permalink

И while тоже плохой?


Автор: zm8, дата: 18 марта, 2009 - 12:55
#permalink

опечатался, извиняюсь (мало спал) =)
имел ввиду with
----------------------------------------
window.open(window.location);


Автор: Ganj (не зарегистрирован), дата: 30 июля, 2009 - 22:08
#permalink

спасибо Вам за очень полезный и интересный сайт


Автор: studio (не зарегистрирован), дата: 21 сентября, 2009 - 17:58
#permalink

Да - разница в скорости разных методов впечатляет


Автор: StagnantIce, дата: 14 мая, 2010 - 15:30
#permalink
function buildUI2(parent) {
	    var elementText = ''
	    elementText += buildTitle()
	    elementText += buildBody()
            elementText += buildFooter()
	    parent.innerHTML = elementText
	}

Это не всегда удается сделать, так как может придется менять не только innerHTML. Может быстрее будет удаление из документа узла средством removeChild() затем создание нового или изменение старого объекта, и в конце appendChild() ?


Автор: goldserg, дата: 8 июня, 2010 - 16:42
#permalink

А теперь внимание!!!
Обнаружил падение скорости у себя в проекте. в итоге обнаружил
что Array.join - с большими строками (под 2-10кб) работает отвратительно под всеми браузерами.
а стандартная конктатенация через '+' - работает.... на 4 порядка быстрее!!! под IE8, и 3 порядка под FF3.6

Можете протестировать.

console.log(new Date().getTime());
q='';
for (var i=0; i < 2500; i++) {
q += 'dsfkbjdkvbnfdkwlfbgnmdekwlq;edfgnmdekwlq;dfgnemwlq;sdfbjnvmdls;afkbnmvd,lsfkbnjfdmsla';
}
console.log(new Date().getTime());

console.log(new Date().getTime());
q='';
for (var i=0; i < 2500; i++) {
q = [q, 'dsfkbjdkvbnfdkwlfbgnmdekwlq;edfgnmdekwlq;dfgnemwlq;sdfbjnvmdls;afkbnmvd,lsfkbnjfdmsla'].join('');
}
console.log(new Date().getTime());


Автор: PieceOfMeat (не зарегистрирован), дата: 13 июля, 2010 - 21:53
#permalink

Вы просто очень неэффективно записали второй цикл, нужно так:
q=[];
for (var i=0; i < 2500; i++) {
q.push('dsfkbjdkvbnfdkwlfbgnmdekwlq;edfgnmdekwlq;dfgnemwlq;sdfbjnvmdls;afkbnmvd,lsfkbnjfdmsla');
}
q.join('');

В этом варианте на моей машине при 25000 итерациях второй вариант проигрывает первому 2-3 миллисекунды в FF и Opera. В IE второй вариант вдвое эффективнее.

Главное чтобы подобные оптимизации не оказались экономией на спичках, прежде всего нужно писать грамотный и понятный код, а оптимизировать в тех случаях, когда производительность действительно снижается настолько, что это заметно человеческому глазу.


Автор: goldserg, дата: 4 октября, 2010 - 09:07
#permalink

Да возможно, но чем тогда объясняется, данный проигрыш второго варианта?
И, ИМХО, конструкция с push не самая эффективная, быстрее должно быть так.
q[q.length] = 'fdfdfd';


Автор: Чистяков Денис (не зарегистрирован), дата: 30 октября, 2010 - 19:02
#permalink

Хотя бы тем, что вы в качестве индекса используете обращение к изменяемому свойству, это из разряда оптимизации описанной в «Более сложном примере», судя по всему.


Автор: IvanS (не зарегистрирован), дата: 24 июля, 2010 - 11:48
#permalink

Да, очень хорошая и познавательная статья, есть чему подучиться.


Автор: Гость (не зарегистрирован), дата: 13 сентября, 2010 - 19:42
#permalink

интересно что в ходе тестов сугубо на моей машине было выяснено что ишак в 10 раз медленнее чем хром.


Автор: Гость (не зарегистрирован), дата: 11 октября, 2010 - 01:54
#permalink

Мда. Кто-то тут говорил о неприменимости MVC в яваскрипте, хотя эта статья убеждает в обратном.


Автор: Arconas, дата: 14 октября, 2010 - 11:21
#permalink

С вашего позволения задам парочку вопросов.

[code]var s = '' + buffer.join('') + ''[/code]
Метод довольно быстрый, спору нет, что подтверждает вот этот Benchmark.

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

У меня получается пока три шага:
На первом я формирую заголовки столбцов по принципу метода join " ... "

[code]var titleTable = "" + row_buffer.join('') + '\n';[/code]
А вот на втором надо сформировать основное тело таблицы в зависимости от кол-ва столбцов. И вот тут возникает вопрос. Каков самый оптимизированный метод из существующих?


Автор: MODist, дата: 23 декабря, 2010 - 14:59
#permalink

"Рассмотрим заодно еще небольшую оптимизацию. Функция, которая назначается onclick внутри цикла - статическая. Вынесем ее вовне цикла:"
Кто-нибудь может объяснить, почему вынос функции так сильно влияет на скорость выполнения? И что происходит внутри, когда мы выносим функцию таким образом?


Автор: Devunion (не зарегистрирован), дата: 24 декабря, 2010 - 14:38
#permalink

Некоторые оптимизации при проверке на Google Chrome приводят к совершенно обратным результатам. Для ИЕ и ФФ -- да, все работает. Так что аккуратно использовать надо.


Автор: Алексей Павлов (не зарегистрирован), дата: 20 ноября, 2011 - 16:52
#permalink

Подскажите, будет ли разница в следующих скриптах?

for (i=0; i<1000000; i++)
  x += doSomething(i);

и

for (i=0; i<1000000; i++) x += doSomething(i);

Будет ли здесь выигрыш на отсутствии парсинга второй строки на каждой итерации цикла?


Автор: Раед, дата: 6 апреля, 2012 - 22:14
#permalink

нет. на то как вы запишите код (с переносом или без) движку по большому счёту плевать


Автор: B@rmaley.e><e, дата: 8 апреля, 2012 - 15:29
#permalink

Нет, конечно. Парсинг производится один раз: по коду строится дерево разбора, а из него уже другие внутренние структуры движка.


Автор: Regex (не зарегистрирован), дата: 11 ноября, 2013 - 01:31
#permalink

Я так и не понял почему метод make Table 2 отработал в 8 раз медленней чем make Table ??


Автор: Regex (не зарегистрирован), дата: 11 ноября, 2013 - 01:35
#permalink

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


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 8 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum