Как посмотреть под обложками и посмотреть, как отображается HTML? - PullRequest
Новая
       16

Как посмотреть под обложками и посмотреть, как отображается HTML?

6 голосов
/ 02 марта 2010

Например: 

<input name="abutton" type="button" value="This is not a button" />

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

Давайте использовать Mozilla в качестве примера. Я немного погуглил и нашел это , так что я думаю, что я на правильном пути. Тем не менее, первое предложение говорит само за себя:

Реорганизация страницы: механизм компоновки, используемый в Mozilla (который известен под многими именами), начался как проект по созданию нового механизма компоновки для Mozilla и стал механизмом компоновки Mozilla и основой для почти полного переписывания конец 1998 года.

Смешение.

Вот список частей, которые, как я знаю, существуют (с этой страницы Mozilla):

  • HTML-анализатор и XML-анализатор
  • Реализация DOM
  • CSS-парсер и система стилей
  • HTML-анализатор и XML-анализатор
  • Код для разметки и рендеринга на основе CSS и HTML

Может кто-нибудь объяснить с точки зрения непрофессионала, как модель браузера Mozilla отображает кнопку?

1 Ответ

4 голосов
/ 02 марта 2010

Так что это действительно очень сложный вопрос. Я работал над проектом Mozilla пару лет назад, и вот как это работает, насколько я помню:

  1. HTML разбирается на узлы, подобные тем, которые указаны в стандарте DOM. Это дерево представляет структуру данных в документе.
  2. Из этого дерева DOM создается другое параллельное дерево, называемое деревом фреймов. Это дерево представляет визуальную информацию в дереве - здесь реализованы такие вещи, как блочная модель.
  3. Как только Mozilla проработает все взаимозависимости и построит удовлетворительное дерево рамок, дерево рамок будет окрашено. Здесь есть несколько шагов (дерево просмотра, дерево виджетов), которые, как я считаю, сейчас устарели и, в любом случае, были специфичны для Mozilla. Дело в том, что это дерево кадров затем передается графической подсистеме (которая в конечном итоге обращается к ОС) для рендеринга.

Большинство современных браузеров размечают страницы («перекомпоновка» в терминах Mozilla) постепенно, поэтому все это происходит почти одновременно, когда загружаются различные ресурсы, поэтому это не совсем точно.

Для получения информации о Mozilla я бы порекомендовал #developers на irc.mozilla.org. Для получения информации о WebKit вы можете попробовать #webkit на chat.freenode.net.

Обратите внимание, что я больше не являюсь разработчиком Mozilla и не имею никакой связи с проектом с 2008 года, поэтому вполне возможно, что я ошибаюсь. Не стесняйтесь поправлять меня.

...