Итак, я в последнее время много делал работы с 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
. Единственная разница будет заключаться в небольших накладных расходах, связанных с переключением с одного поиска на другой