Производительность селекторов CSS, DOM Parsing

Мой вопрос связан с обработкой DOM-разбором, я хотел бы знать, почему быстрее использовать селектор CSS ID, чем селектор класса. Когда происходит DOM дерева должны быть разобран снова, и какие приемы и производительность усовершенствования следует использовать ... и кто-то сказал мне, что если я что-то вродеПроизводительность селекторов CSS, DOM Parsing

var $p = $("p"); 
$p.css("color", "blue"); 
$p.text("Text changed!");

вместо

$("p").css("color", "blue"); 
$("p").text("Text changed!");

улучшает производительность, это верно для всех браузеров? Также как узнать, было ли повторно обработано мое дерево DOM?

источник

2012-04-17 Astronaut

селектор CSS разбор одна производительности достаточно микроскопическая. Бросание jQuery в различные способы интерпретации различных селекторов (CSS или не CSS) в микс просто делает все излишне запутанным. Не стоит обманывать эти нюансы. – BoltClock

http://www.artzstudio.com/2009/04/jquery-performance-rules/ перечисляет множество правил улучшения jquery perf – rt2800

Также обратите внимание, что вы можете использовать цепочку методов. Таким образом, вы можете сделать '$ ('p'). Css (''). Text (''). Morestuff()' для повышения производительности тоже – mrtsherman

Ну, селектор #id быстрее, чем селекторы классов, потому что: (a) может быть только один элемент с заданным значением id; (b) браузеры могут содержать карту id -> element, поэтому селектор #id может работать так же быстро, как поиск по одной карте.

Далее, первый вариант, предложенного выше, безусловно, быстрее, так как это позволяет избежать второго поиска, тем самым снижая общий селектор на основе времени поиска с коэффициентом 2.

Последних, Вы можете использовать Chrome Developer Tools' Selector Profiler (в Профилях панели) для профилирования времени, которое требуется браузер для обработки селекторов страницы (спички + применить стили к согласующим элементам.)

источник

2012-04-17 14:06:12

Эй, не знал про Селектор Профилировщика. Благодаря! +1 для меня. – mrtsherman

Только библиотека селекторов JavaScript обрабатывает селектор идентификаторов CSS как вызов 'getElementById()' и извлекает первый элемент с соответствующим идентификатором. Строго говоря, соответствующему движку селектора CSS необходимо сопоставить * все * элементы с заданным ID с этим селектором идентификаторов, даже если их больше одного, поэтому, если браузер имеет такую карту, это не будет иметь отношения к этому конкретному соответствующая процедура.Но если мы говорим о jQuery здесь ... – BoltClock

@ BoltClock'saUnicorn: Я знаю, что вы увлекаетесь спецификациями :), поэтому [этот] (http://www.w3.org/TR/1999/REC- html401-19991224/struct/global.html # adef-id) говорит, что значение атрибута 'id' должно быть ** уникальным ** в документе. Поведение браузера в случае нескольких элементов, имеющих одно и то же значение id, в противном случае не определено (более того, если используется 'document.getElementById()'). –

Я призываю вас, чтобы сделать свои собственные тесты производительности когда у вас есть сомнения. Вы можете получить дополнительную информацию о том, как это сделать здесь: How do you performance test JavaScript code?. После того как вы проверили производительность самостоятельно, вы никогда не забудете результаты.

В частности, выполнение функции $() на заданном селекторе jquery должно получить соответствующие узлы DOM. Я точно не знаю, как это работает, но я предполагаю, что это комбинация document.getElementById(), document.getElementsByTagName() и другие. Это имеет стоимость обработки, независимо от того, насколько мала она может быть, если вы вызываете ее только один раз, а затем повторно ее используете, вы сохраняете некоторое время обработки.

источник

2012-04-17 14:07:37

Селектор ID быстрее, чем селектор классов, потому что есть только один элемент с идентификатором, но многие элементы могут совместно использовать класс, и их нужно искать.

Код ниже понапрасну разбор DOM дважды, поэтому, конечно, он будет медленнее:

$("p").css("color", "blue"); 
$("p").text("Text changed!");

источник

2012-04-17 14:08:07

Производительность селекторов CSS, DOM Parsing

ответ

Смежные вопросы