Скорость страницы Google - что означают эти сообщения?

Question

Я запустил расширение Google Page Speed Firefox на нескольких страницах, и в разделе "эффективные селекторы CSS" в нем перечислены различные вещи, которые неэффективны в моем CSS.

Но некоторые сообщения кажутся немного загадочными - что они (выделены жирным шрифтом) означают:

div#меню h3.скоро маленькое
Ключ тега с 2 селекторами-потомками и идентификатором, чрезмерно квалифицированным тегом, и классом, чрезмерно квалифицированным тегом

таблица.данные tr:n-й дочерний элемент (2n) td
Ключ тега с 2 селекторами-потомками и класс, чрезмерно квалифицированный тегом

таблица.данные tr.отключены td
Ключ тега с 2 селекторами-потомками и классом, чрезмерно квалифицированным тегом, и классом, чрезмерно квалифицированным тегом

Я предполагаю, что они считают селекционеров-потомков плохими, но есть и много "чрезмерно квалифицированных".Я, вероятно, не буду прилагать слишком много усилий, исправляя все это (их много), но было бы неплохо узнать, что на самом деле имеет в виду Google здесь!

Answer 1

Во-первых, я никогда не использовал Page Speed, но сообщение не такое уж загадочное, если вы потратите секунду на его прочтение.

div#меню h3.скоро маленькое

Ключ тега с 2 селекторами-потомками и идентификатором с избыточным значением тег и класс с избыточным значением тег

Ключ тега с 2-мя селекторами-потомками: Сколько у вас маленьких тегов, которые не содержатся в другом теге с class soon?Ни одного?Вложенность CSS в этом случае была бы совершенно ненужной.

Идентификатор, чрезмерно дополненный тегом: #menu не обязательно предварять символом div.Скорее всего, у вас нет никаких других тегов в вашей разметке с id menu (вы не должны этого делать, это ID!), поэтому добавление menu с div является избыточным.

Класс, чрезмерно квалифицированный с тегом: .soon не нужно добавлять перед буквой h3.Скорее всего, у вас нет другого тега в вашей разметке с классом soon, кроме тегов h3, поэтому добавление .soon с помощью h3 не требуется.

Другие сообщения следуют аналогичным образом.

-Стивен

Answer 2

Стивен сказал это хорошо.

Причина, по которой они помечают ваши селекторы, заключается в том, что правила CSS сопоставляются справа налево.

Добавление идентификатора элементом (как в div #content) не требуется, поскольку браузер уже сопоставил селектор к тому времени, когда он достигнет "div".Но браузер все равно вынужден это оценивать.

Селекторы-потомки стоят дорого, потому что браузер должен проверять все экземпляры элемента dom, на который ссылается самый правый простой селектор, на соответствие всем возможным предкам.Множественные потомки увеличивают снижение производительности.

Тем не менее, прирост производительности, достигнутый за счет оптимизации селекторов (в большинстве случаев), незначителен.

Answer 3

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

Например:

div#menu h3.soon .small

Здесь нет причин начинать с div, поскольку вскоре вы увидите только class small в class в теге h3 под html-элементом с id menu.

Они предлагают что-то вроде этого

#menu .soon .small {...}

или даже

#menu {...}

.soon {...}

.small {...}