Производительность JavaScript - обратное течение Dom - Google Article
Мое эмпирическое правило:
указатели Использования, если Вы хотите сделать адресную арифметику с указателями с ними (например, постепенное увеличение адреса указателя для продвижения через массив) или если когда-нибудь необходимо передавать Нулевого указателя.
ссылки Использования иначе.
5 ответов
Вам будет трудно получить значимые цифры для этого из профилирования javascript, поскольку вы действительно сохраняете перерисовки и повторные потоки, которые не будут отображаться в большинстве профилирований инструменты. Вы можете использовать расширение событий рисования Firebug , чтобы визуально показать вам, сколько перерисовок вы сохраняете.
Я разместил несколько ссылок на странице и протестировал метод в статье по сравнению с установкой имени класса с элементами, все еще находящимися на странице. Я пробовал это в Firefox 3, IE 8 и Chrome 3.
Я создал классы для ссылок с разным цветом и разным размером шрифта. Поскольку текст ссылки имел разный размер для разных классов, я был уверен, что страницу действительно нужно переформатировать.
Для любого разумного количества ссылок (до нескольких тысяч) удаление и добавление элементов происходит немного медленнее.
Для очень большого количества ссылок (10 000) удаление и добавление элементов выполняется немного быстрее.
Однако разница довольно мала. У вас должно быть несколько тысяч ссылок, чтобы можно было вообще заметить какую-либо разницу, а при 10 000 ссылок разница по-прежнему составляет примерно 20%.
Итак, что я обнаружил, так это то, что вы не можете ожидать кардинальных изменений от этого метода. Если у вас проблемы с производительностью, вероятно, есть другие методы, которые дают гораздо лучший результат. Я бы, например, попробовал изменить имя класса родительского элемента вместо всех дочерних элементов, и пусть CSS сделает всю работу. Тесты, которые я провел ранее, показали, что это может быть примерно в десять раз быстрее.
Это более или менее похоже на использование documentFragments для инициализации элементов, а не dom. Фрагменты документа в конечном итоге работают быстрее, потому что у них намного меньше структуры и фактического рендеринга, о которых нужно беспокоиться.
Вот некоторые из замечаний Джона Ресига о преимуществах производительности фрагментов документа (которые в настоящее время используются в jquery):
Короткий ответ заключается в том, что изменения в DOM фактической страницы вызывают события Javascript, оценки CSS, распространение изменений влияет на интерпретацию остальной части DOM вокруг нее и т. Д. узлы в потоке не имеют ничего подобного, связанного с ними, и манипуляции с ними намного дешевле.
Аналогия: если бы вы были аниматором, работающим над Toy Story 4, и в почти финальном рендере вы увидели изменение, которое вам нужно внесите изменения в физику ткани сцены, внесете ли вы изменения, выполняя повторный рендеринг с полной детализацией для проверки сцены, или отключите текстуры и цвета и уменьшите разрешение при внесении этих изменений?
There is no reliable way to tell when a reflow has finished, other than looking at the page.
The time spent calculating is virtually the same for adding or changing elements all at once or one by one. The script doesn't wait for the browser between elements, the browser catches up.
Sometimes you want to see something right away, even if it takes longer to render the whole thing- other times you want to wait a little longer and show it all when it is ready.
If you can't tell which is better, get a designer to look at the one-by-one and all-at-once versions- but don't ask two designers!