24 марта 2013 в 19:52

Как работают браузеры: принципы работы современных веб-браузеров

Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...
Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

Возможно для кого-то это давно уже не новость, но, надеюсь, для тех, кто не слышал, будет полезно (на хабре упоминаний не нашел).

Под катом содержание перевода, чтобы решить стоит ли читать.

Содержание

Артур Заяц @zag2art
карма
187,7
рейтинг 0,3
Похожие публикации

Комментарии (28)

  • +27
    Труд, конечно, монументальный.
    Но сползшая верстка на сайте, посвященном верстке — это жесть. =(
    • +6
      Наглядный пример вёрстки, не рассчитанной на возможную локализацию.
      Англоязычная версия страницы отображается корректно.
    • +1
      Сильный труд.
      Респект и уважение!
  • +10
    Количество костылей в современных браузерах поражает.
    • 0
      Костылей? Можно поподробнее?
      • 0
        Всякие хаки для поддержки совместимости, превращающие корявую верстку в нормальный вид. Там действительно сотни методов исправляющих ошибки криворуких верстальщиков.
        • +4
          Начнем с того, что этому потакает и сам HTML. Он еще десять лет назад допускал синтаксис, который не допусим по правилам SGML (одиночные теги без закрывающего символа). HTML5 пошел еще дальше, разрешив выкидывать обязательные раннее теги. Так что костыли тут скорее норма, чем что-то из ряда вон выходящее. Какой стандарт, такая и реализация.

          Потом, вторая проблема — кросстехнологичность стандартов. CSS одинаковый как для HTML, так и для XML, SVG, MathML и прочих веток. И иногда приходится вставлять костыли для какой-то из технологий, потому что по-другому все банально не будет работать. Один из примеров — COL и COLGROUP. Вы не задумывались, почему эти два тега имеют строго ограниченный список поддерживаемых стилей? Потому что они в дереве стоят раньше, а перекрывать должны стили элементов, что находятся позже. Это мало того, что грубое нарушение всех правил CSS, но еще и проблема с repaint/reflow.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +2
              Такие вещи как OMITTAG и NET являются так называемыми features. Это расширение синтаксиса, которое может не понимать парсер. В принципе, NET и не понимают браузеры. Хотя я наверное зря бурчу, буква G как раз указывает на то, что это допустимо, хоть и на уровне фичи.

              Про блочную обертку.

              Взять тот же BODY.
              <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
              Он имел признак не обязательного тега, но вот именно в HTML5 начали диктовать еще и условия, как именно его применять
              A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.

              А это грубейшее нарушение правил парсинга SGML, на что и намекали разработчикам стандарта не раз.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Он уходит от синтаксических фич. Правила парсинга, о которых я говорил, описывают не просто общее поведение, а какие-то частности, применимые только в конкретных случаях. В SGML все просто — написано, что можно пропускать открывающий тег, значит можно всегда. HTML спецификация же говорит, что можно это делать только если… И вот это «Если» раздражает. Оно не генерализируемо и не стандартизируемо, имеет сугубо описательную характеристику.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      В плане парсинга можно было бы и не изобретать свой велосипед, со спортсменками и бриджем, а взять вполне универсальные, а самое главное простые, XML-правила. Ведь все эти замороченные условия не снимают с парсера работу, а добавляют его. Сделали проще для криворуких кодеров, но хуже для потребителей, браузеры ведь у них на компах тормозят.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Новый стандрарт на то и новый, чтобы исправлять ошибки и недочеты старого. От более строгого синтаксиса никто бы не пострадал.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              А его дописали?
                              • +1
                                Дописали и прекратили разработку ввиду оторванности от реальности, непригодности для использования и нежелания в этой связи ни одного разработчика браузеров реализовывать его поддержку.
  • +8
    Modern Web runs on C++.
  • –6
    Только не «содержание перевода», а «перевод содержания»
  • +8
    А есть ли то же самое в PDF?
    • +5
      Если вам для печати, то это делается за 5-10 минут с помощью простых манипуляций в HTML через DevTools в браузере и последующей печати (в файл в формате PDF). Вот, я уже подготовил такой PDF (в гуглодоках). Он может подойти и для чтения в электронном варианте, но ссылки в содержании являются не внутренними относительно документа, что может быть неудобным. Возможно есть специализированный софт, который может создать PDF из web-документа, удобный для чтения в электронном виде, но я не озадачивался.
  • –4
    Найдено на сайте.
    > HTML5 Rocks – это проект Google.

    Его же закроют. Доведут вёрстку до ума и закроют. Как iGoogle, например.

    В последние пару месяцев он начал активно встречаться в поиске по технологиям веба (например, про Indexed DB, но как в стиле стартовых продуктов Гугла, сделан неаккуратно.
  • 0
    Оригинал очень крутой, спасибо вам за труд, действительно, нечеловеческий объем работы!
  • –2
    Если автор поместит один элемент form внутрь другого такого элемента, последний будет игнорироваться.
    if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); }

    как это печально
  • +1
    На самом деле, очень круто, что оперирование такими структурами данных с их размерами (при больших сайтах) происходит довольно-таки быстро и плавно. Flyweight паттерны в действии :)

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