[БЕЗ СЛОВ] Следующая тема, о которой хотелось бы поговорить, это то, как браузеры применяют CSS. Среднестатистический сайт содержит значительное число DOM-элементов – больше тысячи. Ну, например, блок «Яндекса» содержит 1221 элемент. Это число может меняться, но, допустим, оно такое. И мы хотим выбрать на данном сервисе все элементы ins. Допустим, их будет 5. Но я хочу перестраховаться и выбрать эти элементы в зависимости от их положения в DOM дереве. Тогда я напишу какой-нибудь такой селектор. Как браузеры могли бы применять данный CSS? Они бы могли сформировать круги. Первый круг – это все элементы и среди них браузер находит все div'ы. Например их будет 182. Второй круг – это элементы, которые находятся внутри других элементов. Например у нас их 1158. И среди них мы опять также ищем div'ы, их будет 176. И так далее вглубь мы находим на каждом уровне соответствующее число элементов. Как вы понимаете, если бы механизм применения CSS в браузере был устроен таким образом, то он бы работал крайне медленно. В данном простом примере для того, чтобы найти 5 элементов, нам нужно 6600 операций, 6600 проходов по DOM дереву. К счастью, это не так CSS применяется по-другому. Чаще всего говорят, что CSS в браузере применяется справа налево. Браузеры находят самый крайний селектор, в нашем случае это ins, и находят элементы, соответствующие данному селектору. Мы уже знаем, что их 5. А дальше браузер выполняет обход DOM дерева вверх от данного. В нашем случае максимальная глубина дерева – 9, поэтому 5 раз браузер поднимается по девяти элементам вверх. Сделать это достаточно быстро и такой CSS применится достаточно быстро. Почему важно понимать, что CSS селекторы применяются справа налево? Другой пример: мы хотим выбрать все элементы, которые находятся внутри логотипа. Мы можем написать вот такой вот CSS, и, как вы знаете, CSS применяется справа налево, поэтому браузер сначала найдет все ссылки на страницы. А как вы понимаете, ссылок на страницы очень много, например 319. И для всех 319 ссылок далее браузер будет выполнять обход по DOM дереву вверх. Если максимальная вложенность DOM дерева – 8, то это будет достаточно большое число операций обхода DOM дерева. Это медленно. Именно поэтому есть несколько рекомендаций, как писать CSS, чтобы он применялся эффективно. Например, одна из самых частых рекомендаций гласит: не использовать вложенные селекторы, а писать точечные селекторы и каждому элементу задавать класс. В таком случае у нас браузер один раз обойдет все DOM дерево, закэширует его и больше не будет выполнять обходы. Для того чтобы не придумывать каждый раз название классов, можно воспользоваться методологиями именования классов и организации разметки. Самая известная такая методология от компании «Яндекс» называется БЭМ. Я говорю самая известная не потому, что я работаю в компании «Яндекс», а потому, что это действительно признанная во всем мире методология именования классов. Следующая методология: OOCSS (Object Oriented CSS). Используется в компании Youtube. Следующая: модульный CSS, используется в компании «Одноклассники». SMACSS – я не нашел больших компаний, которые бы использовали эту технологию, но вот она есть тоже. Следующая методология: асинхронный CSS. Используется в компании Yahoo и плюс похожий аналог в компании Amazon. И, наконец, Axiomatic CSS – что-то похожее используется в компании «Википедия». Это самые известные методологии, но, конечно же, ими список не ограничивается. В данном видео мы рассмотрели то, как браузеры применяют CSS и как писать ваш CSS эффективно.
