Новая верстка страницы результатов поиска

19 февраля 2010, 16:14

Большинство, конечно, не заметили, что под капотом страницы с результатами поиска уже несколько месяцев новая верстка.

Что же нового

Благодаря концепции независимых блоков, поддержка и разработка страницы с результатами поиска стали проще. Те, кто был на наших субботниках, посвященных верстке, или смотрел записи (1, 2), слушал наши доклады на других конференциях — знают, насколько это удобно.

Мы пошли дальше, развивая эту идею до концепции Абсолютно Независимых Блоков, что позволяет писать очень эффективный с точки зрения производительности CSS. Один элемент — одно правило.

Тут лирико-техническое отступление: дело в том, что браузеры читают CSS-правила справа-налево. Например, если у вас написано правило .b-my-block .title a {color: #f00;}, то браузер сначала выберет все элементы <a> на странице, потом выберет все <a>, у которых есть элемент-предок с классом title, потом только те <a>, у которых элемент-предок с классом title, у которого есть элемент-предок с классом b-my-block.

Поэтому мы приняли решение, и вся новая верстка в Яндексе делается с АНБ. Правило выше должно быть записано как: .b-my-block__title__a. Двойное подчеркивание — признак того, что это элемент блока. Подробнее в клубе Блок, Элемент, Модификатор.

Конечно, это раздувает HTML: теперь у всех элементов, у которых есть CSS-свойства, появляются классы, и чем глубже находится элемент, тем длиннее у него класс.

Однако если вы уже посмотрели код страницы, то заметили, что никаких длинных классов нет: мы сокращаем все уникальные длинные имена классов до буквенных сокращений вида <div class="ac">. Такая замена происходит на всех уровнях: статическая верстка, стили, шаблоны и скрипты.

Делаем мы это с помощью маленькой утилиты jeanny, специально написанной верстальщиком поиска.

При изменении или добавлении элементов на странице существующая таблица замен сохраняется. Таким образом, закешированные стили не затрагиваются.

Отдельно про стили. Мы разделили весь CSS на ядро, которое подключается внешним файлом и кешируется, и опциональные элементы: различные колдунщики, спецсниппеты. Стили таких элементов подключаются inline в HTML-код страницы.

В результате

  • мы получили удобную в поддержке верстку, уменьшили в два раза размер CSS (было 22Кб, стало 12Кб),
  • уменьшили время отрисовки страницы, особенно это заметно в IE6/7, где скорость увеличилась более чем на 100%.

Впереди много планов и экспериментов. Следите за новостями.

<verstka/>
23 комментария
Подписаться на комментарии к посту
Шевченко Юрий
19 февраля 2010, 16:44
осталость только написать нового робота, который будет компактифицировать .co .bi{color:#666} .cp .bi{color:#666} .cq .bi{color:#666} в .co .bi,.cp .bi,.cq .bi{color:#666} и будет сразу песня.
Охренеть, круто :)
Сергей Сергеев
19 февраля 2010, 19:42
чем заняться верстальщику
От global reset тоже отказались?
Да, он просаживает скорость рендеринга.
Уже есть подтверждения? ;-)
Конечно. По моим замерам примерно на 7%
Подробности эксперимента где-нибудь посмотреть можно?
Отлично, очень любопытно, но возникло три вопроса:
1) не увеличивается ли в значительной мере исходный код страницы из-за инлайн стилей
2) почему так много инлайн вызовов JS функций
3) в статье: 5a Missing schema double download пишется что ревурсы с URL-ами вида //url IE запрашивает дважды
Любопытная тема. Но без jeanny она неэффективна, верно? А как тогда быть с семантикой, микроформатами и подобными штуками когда имена классов нужно сохранить?
если ваш проект гзипуется, то не так страшно и без jeanny, но с ней лучше. На высоконагруженных проектах никто не соблюдает ни семантику, ни микроформаты, ни css3: потому что это непроизводительно.
у вас микроформаты тормозят? х)))
кому нужны лишние классики?
[span class="ac"][/span] - 24 символа [x:ac][/x:ac] - 13 символов разница почти в два раза
Если честно, то запутался в этих классах типа ew, ex, cr, когда делал user css.

p.s. кстати, имеет ли смысл оборачивать ol.p1 в div.fe? (в чём фишка, можно было бы просто отступ задать для ol)
в тот div.fe могут быть вставлены другие элементы, а ol.p1 в свою очередь может оказаться в других метсах на этом или других проектах.
Какую роль играет ?
Обфусцировать классы или просто гзировать контент? И то, и другое!

http://clubs.ya.ru/bem/replies.xml?item_no=746