Быстрее из двух правил CSS: с указанием нескольких идентификаторов или без них

Итак, я в последнее время много делал работы с Concrete 5. Я заметил, однако, что тема по умолчанию имеет множество правил CSS, которые определены следующим образом:

#page #central #sidebar p{line-height:24px}

Поскольку «боковая панель» является идентификатором, на панели должна быть только одна «боковая панель». всю страницу (предполагая, что она проверяет, а я позабочусь об этом). Поэтому, если #sidebar находится в #page #central , он должен всегда быть в #page #central . Неважно, что. На каждой странице.

По этой логике следующее правило делает то же самое:

#sidebar p{line-height:24px}

Тестирование, конечно же, сработало. Итак у меня вопрос: у кого будет лучшая производительность? Есть ли причина, связанная со скоростью, что команда Concrete5 выбрала более длинную спецификацию, или это было просто для того, чтобы помочь будущим разработчикам найти div #sidebar ? Я вижу спорить Замечено, что в любом случае это будет быстрее.

Если вариант 1 выполняется быстрее ( #page #central #sidebar ):

Если браузер использует алгоритм поиска в ширину для поиска нужного элемента DOM, затем обнаруживает #sidebar будет включать поиск на втором уровне КАЖДОГО элемента DOM, у которого были дочерние элементы до того, как он достиг третьего уровня, после чего он все еще будет иметь несколько элементов, на которые он смотрит, прежде чем найти #sidebar .Указав элементы таким образом, поиск в ширину распознает #page и узнает, что ему нужно продолжить поиск только внутри этого элемента, а не по всей DOM.

Если вариант 2 выполняется быстрее ( #sidebar ):

Если браузер ищет весь документ в том порядке, в котором он написан, а не рассматривает DOM как дерево, тогда он будет выполнять одиночный линейный поиск, а не три линейных поиска. Фактически, даже в лучшем случае, когда он достаточно умен, чтобы распознать начальную и конечную точки ранее найденного элемента DOM (по сути, поиск в глубину), ему все равно придется читать столько же строк кода в линейный поиск - сначала он будет читать, пока не найдет #page , затем он начнет читать с начала #page , пока не найдет #center , затем он будет читать с начала #center , пока не найдет #sidebar . Единственная разница будет заключаться в небольших накладных расходах, связанных с переключением с одного поиска на другой

5
задан BoltClock 24 January 2011 в 05:27
поделиться