company_banner

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

  • Из RSS

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


Что же нового


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

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


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

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


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


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

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


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


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


В результате


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

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


<verstka/>.

Яндекс
Как мы делаем Яндекс

Comments 46

    +10
    По первой ссылке — 3 результат позабавил (:
    0
    Красавцы!
    Надо тоже так научится жать css :)
      +1
      третий линк в результатах поиска жжот =)
        +1
        сорри, уже выше написали
          0
          в оригинальном посте ссылка такая: yandex.ua/yandsearch?text=яндекс
            0
            понимаю, но у меня почему-то искало по запросу «я»
            неплохой резалт для запроса «я» на «яндексе» =)
              0
              ссылку жжали утилитой jeanny, и она стала yandex.ua/yandsearch?text=я
              :)
        • UFO just landed and posted this here
            –1
            Вы правите серп, мы меняем Регекспы ) имхо жаль, что вы уделяете больше времени верстке, это дествительно важно, а также скорость отрисовке в броузере 6 и 7 ие, а вот этот хардкор

            yandex.ru/yandsearch?clid=14585&text=%D1%82%D0%B0%D0%BA%D1%81%D0%B8&lr=213

            был топ 10 осталось топ 4, зато директа хоть жопой жри.

              0
              Отсутствие <table class=«l-page»></table> (табличного каркаса) не попадает в разряд «нового»?
                +1
                мы не делали табличный каркас только из-за отстутсвия прогрессивного рендеринга, а с дивами намучались знатно. У страницы много состояний с длинными колдунщиками (длинее колонки) и снипетами, с max/min midth и поддрежкой ие6. Я не хочу тут тубличного холивара, но это не «новое», а «вынужденное» решение.
                –2
                Может я чего и не понимаю но зачем в стилях ( например background:url(//img.yandex.net/i/search/z-video__preview-l.gif)) присутствует двойной слеш в начале пути?

                На мой взгляд правильнее с одним слешем (если img.yandex.net просто папка):
                background:url(/img.yandex.net/i/search/z-video__preview-l.gif)

                И вообще без слеша:
                  +3
                  нет это не папка, это хост
                    +4
                    img.yandex.net не папка, а хост. // — это «текущий протокол».
                      –2
                      А смысл от него?
                      https перекидывает на http, ftp вообще не открывается.

                      В чем его прелесть, или где почитать об этих слешах подробнее?

                      • UFO just landed and posted this here
                          –2
                          Понял, это на подобии:
                          http:habrahabr.ru
                            0
                            Я имел в виду что можно набирать URL и без //
                          +3
                          Ну вообще прелесть в том, что на страницу, загруженную по https, не подргузятся ресурсы по http, а при такой форме записи она работает как для http, так и для https. Правда недавно обнаружилась одна неприятность — IE 7 и 8 запрашивают такие ресурсы по два раза.
                            +2
                            причем не все, а только css
                      0
                      Увеличение скорости на 100% это уменьшение времени на 50% или как?
                        +4
                        уменьшение времени больше, чем в 2 раза.
                        например, время reflow в ИЕ7 было ~53мс, а теперь стало ~21мс.
                        –12
                        Ещё бы поиск улучшили, было бы вообще здорово.
                          –12
                          Яндекс молодец, он самый классный. Вау, хей, я так рад, так рад.
                            +2
                            Не смешивайте тёрлое с мягким.
                              –3
                              хорошо, тёрлое не буду
                          • UFO just landed and posted this here
                              +3
                              «Москва не сразу строилась»
                              0
                              Непоследовательно как-то.

                              Принятое решение не укладывается в систему именования.

                              Отсюда вылезло некрасивое двойное подчеркивание.

                              Отчего бы не исключить дефис из имен классов?
                              И разделять слова регистром? А освободившийся дефис пустить на новые цели?

                              Вместо «bs-services» получаем «BSServices».

                              1)
                              Сервисы

                              • Крибли
                              • Крабли
                              • Бумс



                              или

                              2)
                              Сервисы

                              • Крибли
                              • Крабли
                              • Бумс



                              Второй вариант мне нравится больше…
                                +1
                                1)
                                <div class="b-services">
                                    <h2 class="b-services__head">Сервисы</h2>
                                 
                                    <ul class="b-services__list">
                                        <li class="b-services__item"><a href="">Крибли</a></li>
                                        <li class="b-services__item"><a href="">Крабли</a></li>
                                        <li class="b-services__item"><a href="">Бумс</a></li>
                                    </ul>
                                </div>
                                
                                или
                                 
                                2)
                                <div class="BSServices">
                                    <h2 class="BSServices-head">Сервисы</h2>
                                 
                                    <ul class="BSServices-list">
                                        <li class="BSServices-item"><a href="">Крибли</a></li>
                                        <li class="BSServices-item"><a href="">Крабли</a></li>
                                        <li class="BSServices-item"><a href="">Бумс</a></li>
                                    </ul>
                                </div>
                                
                                

                                Второй вариант мне нравится больше…
                              • UFO just landed and posted this here
                                  0
                                  Какая разница, как в спецификации, если все классы потом минифицируются.
                                  • UFO just landed and posted this here
                                    +1
                                    Можно использовать только — и _
                                      +2
                                      www.w3.org/TR/CSS2/grammar.html

                                      class
                                      : '.' IDENT
                                      ;

                                      ident -?{nmstart}{nmchar}*

                                      nonascii [\200-\377]
                                      unicode \\{h}{1,6}(\r\n|[ \t\r\n\f])?
                                      escape {unicode}|\\[^\r\n\f0-9a-f]
                                      nmstart [_a-z]|{nonascii}|{escape}
                                      nmchar [_a-z0-9-]|{nonascii}|{escape}
                                      • UFO just landed and posted this here
                                          +1
                                          Ага, 12 лет назад.
                                          • UFO just landed and posted this here
                                              +1
                                              Действительно.
                                      0
                                      скорей бы вы еще и склейщик CSS релизнули в опенсорс :) жду еще с Яндекс.Субботника
                                        0
                                        А то что на странице 340 раз повторяется class="" это не важно? Это ведь 2,720 bytes.

                                        <table class=«w g-js»>
                                        <tr>
                                        <td class=«x»><strong>Поиск</strong></td>
                                        <td class=«x»><a class=«z»>Почта</a></td>
                                        <td class=«x»><a class=«z»>Карты</a></td>


                                        Можно ведь просто:
                                        <table class=«w g-js td_x_z»>
                                        <tr>
                                        <th>Поиск</th>
                                        <td><a>Почта</a></td>
                                        <td><a>Карты</a></td>

                                        Уменьшая вес CSS вы увеличиваете вес самого HTML файла, а ведь кишируеться именно CSS файл.

                                        Оптимизируйте саму страницу сначала, ее очень хорошо можно урезать, там слишком много ненужного кода. (IMHO)
                                          +1
                                          во-первых, css кешируется только тот, который надо кешировать, остальной выливается в style в head
                                          во-вторых, ваше предложение обязывает использовать каскад, а если читать внимательно текст, то можно понять что мы от него избавляемся в пользу скорости рендеринга страниц.
                                          в-третьих, html гзипуется.

                                          так что
                                          А то что на странице 340 раз повторяется class="" это не важно? Это ведь 2,720 bytes.

                                          получается наименее важным.
                                          –1
                                          уменьшили время отрисовки страницы, особенно это заметно в IE6/7, где скорость увеличилась более чем на 100%

                                          Ну да, Гугл уже отказался от поддержки IE6, а вы увеличивайте в нем скорость, да.
                                            +3
                                            Гугл точно не отказался от поддержки ИЕ6 на Поиске

                                          Only users with full accounts can post comments. Log in, please.