Вы действительно понимаете, как формируется дерево рендеринга?

внешний интерфейс JavaScript HTML

серия статей

Скажи, зачем ты написал эту серию?

  • Причина 1: В этой серии статей, независимо от того, являетесь ли вы фронтенд-разработчиком или бэкэнд-разработчиком, в интервью часто задают вопрос.“从浏览器输入url到页面显示经历了哪些？”Один非常Часто задаваемые вопросы, после прочтения этой серии интервьюер обязательно удивится, и вас могут принять из-за этого вопроса на собеседовании! Эй-эй.
  • Причина 2: Я в основном занимаюсь back-end направлением.Эта серия статей тоже для изучения записей, что удобно для дальнейшего использования. Преподаватель Geek Time Ли Бин тоже открыла эту рубрику.После прочтения осталось несколько вопросов, поэтому я проверю информацию и научусь в ней разбираться.

Об авторе: koala, сосредоточив внимание на совместном использовании полного стека технологий Node.js, от JavaScript до Node.js, до серверной базы данных, я желаю вам стать отличным старшим инженером Node.js. [Руководство по развитию программиста] Автор, блог Github с открытым исходным кодомGitHub.com/koala-co Nth…

что такое ДОМ

DOM — это аббревиатура Document Object Model (объектная модель документа).

Объектная модель документа W3C (DOM) — это независимый от платформы и языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа. - Это концепция, данная W3Cschool

Вышеупомянутая концепция кажется слишком "официальной". Объяснение состоит в том, что DOM представляет собой структурированное представление HTML-документов, а поток байтов HTML-файла, возвращаемый внутренним сервером механизму рендеринга браузера, не может быть непосредственно понят механизмом рендеринга браузера. В переводе на внутреннюю структуру, которую может понять механизм рендеринга, эта структура называется DOM. Кажется, я еще не закончил перевод концепции W3C».Позволяет программам и сценариям динамически получать доступ к содержимому, структуре и стилю документов и обновлять их.. На самом деле это роль DOM

  1. Отображение страницы: DOM — это базовая структура данных для создания страниц.
  2. Манипуляции со сценариями JavaScript: DOM предоставляет интерфейсы для манипулирования сценариями JavaScript, JavaScript может получить доступ к структуре DOM через эти интерфейсы, тем самым изменяя структуру и стиль документа.
  3. Безопасность: DOM — это линия безопасности, и на этапе разбора DOM отфильтровывается небезопасное содержимое DOM.

В этой статье я в основном объясню механизм рендеринга Webkit, который используется как в Safari, так и в Chrome. Webkit — это движок рендеринга с открытым исходным кодом, который изначально был разработан для платформы Linux, а затем перенесен Apple на Mac и Windows.

визуализировать деревоЧто дало окончательное формирование

Взгляните на общую схему

Следующий пример будет объяснен вокруг этого изображения и различных представлений.

парсер HTML

Поток байтов файла HTML, возвращаемый из серверной части в механизм рендеринга браузера, Первое, что нужно пройти, это парсер HTML в движке рендеринга. Он реализует преобразование потока байтов HTML в древовидную структуру DOM. В процессе возврата потока байтов HTML-файла парсер HTML разбирал его, разбирая при загрузке (здесь обратите внимание, что некоторые статьи неверны).

Пример 1: Простейший HTML-код без CSS и JavaScript, объясняющий анализатор HTML

<html>
<body>
    <div>程序员成长指北</div>
</body>
</html>

Проанализируйте, что делает синтаксический анализатор HTML на основе этого кода.

Фазовый поток в байтовые символы и токенизированные стандарты W3C

Считывает поток необработанных байтов HTML и преобразует их в отдельные символы в соответствии с указанной кодировкой файла (например, UTF-8). И преобразуйте строку в различные токены, указанные в стандарте W3C HTML5, такие как "", "" и другие строки в угловых скобках. Каждый токен имеет особое значение и набор правил.

куча байтовых потоков байтов

3C 62 6F ...

Преобразование в обычный html-файл

<html>
<body>
    <div>
    koala
        <p>
        程序员成长指北
        </P>
    </div>
</body>
</html>

Этап 2 Преобразование потока байтов в токен через токенизатор

Токенизатор преобразует поток байтов в токены один за другим.Токены делятся на токены тегов и текстовые токены.Результат окончательного преобразования приведенного выше кода в токенизаторе:

Этап 3 и этап 4 Разберите токен в узел DOM и добавьте узел DOM в дерево DOM.

Анализатор HTML поддерживает структуру стека токенов (структура данныхКакая хорошая вещь), цель этой структуры стека - вычислить отношения родитель-потомок между узлами. Токены, сгенерированные на предыдущем этапе, будут последовательно помещаться в этот стек. Ниже приведены конкретные правила:

  • Когда синтаксический анализатор HTML начнет работать, он создаст пустую структуру DOM с корнем документа по умолчанию и одновременно поместит документ Token of StartTag в нижнюю часть стека.

  • Если вы поместите StartTagToken в стек, синтаксический анализатор HTML создаст узел DOM для токена, а затем добавит узел Dom в дерево DOM и его父节点Это узел DOM, созданный соседним элементом в стеке.

  • Если токенизатор анализирует текстовый токен, он сгенерирует текстовый узел, а затем добавит текстовый узел Dom в дерево DOM (Примечание: текстовый токен не нужно помещать в стек), его父节点Это узел DOM, соответствующий токену на вершине текущего стека.

  • Если токенизатор анализирует тег EndTag, такой как элемент div EndTag в примере, анализатор HTML проверит, является ли элемент в верхней части стека Token элементом div StartTag. Если да, он извлечет элемент div StartTag из стека и разобрать элемент div сбоку.Готово.

  • Наконец, в соответствии с приведенными выше правилами токенизатор полностью анализируется, чтобы сформировать это простое дерево DOM.

К этому моменту вы должны понимать роль парсера HTML в основной диаграмме и базовый процесс отрисовки DOM-дерева, но реальность жестока.Где может быть такой простой интерфейсный код, а также JavaScript и CSS! продолжай смотреть вниз

CSS-парсер

Конечная цель синтаксического анализатора CSS — построить дерево, но дерево, которое он строит, — это дерево CSSOM. Процесс построения дерева в основном такой же, как и процесс построения дерева DOM.

Или ту картинку, не буду специально объяснять еще раз. Прямое использование этого простого примера

body { font-size: 16px }
div { font-weight: bold }
div p { display: none }

Взгляните на окончательно построенное дерево CSSOM.

Почему CSSOM имеет древовидную структуру? При вычислении последнего набора стилей для любого объекта на странице браузер начинает с самых общих правил, которые применяются к этому узлу (например, если узел является дочерним элементом элемента body, применяются все стили тела), затем применяются Более конкретные правила (т. е. правила, «нисходящие каскадом») рекурсивно оптимизируют стиль вычислений.

Возьмите дерево CSSOM выше в качестве примера для более конкретного объяснения. Любой текст, содержащийся в теге span, размещенном внутри элемента body, будет иметь размер шрифта 16 пикселей и красный цвет — директива размера шрифта нисходит от тела к элементу span. Однако, если тег span является дочерним по отношению к тегу абзаца (p), его содержимое не будет отображаться.

будь осторожен:

  1. Парсинг CSS может выполняться одновременно с парсингом DOM.
  2. Если есть только страницы CSS и HTML, CSS не повлияет на создание дерева DOM, но если на странице есть JavaScript, вывод другой, пожалуйста, продолжайте читать.

Влияние javascript на дерево DOM по сравнению с созданием дерева CSSOM

В обоих примерах JavaScript не появлялся, а затем JavaScript влиял на построение деревьев DOM и деревьев CSSOM.

  • Случай 1: на текущей странице есть только HTML и JavaScript, и JavaScript не импортируется извне

    Когда сценарий JavaScript встречается во время построения дерева DOM, синтаксический анализ DOM должен быть приостановлен, и сначала выполняется JavaScript, потому что JavaScript может управлять текущими сгенерированными узлами DOM.

    Следует отметить одну вещь: javascript можно манипулироватьТекущий сгенерированный узел DOM, если это узел DOM, который еще не был сгенерирован, он не вступит в силу, как в этом коде:

     <html>
     <body>
         <div>1</div>
         <script>
             let div1 = document.getElementsByTagName('div')[0]
             div1.innerText = '程序员成长指北'

             let div2 = document.getElementsByTagName('div')[1]
             div2.innerText = 'kaola'
         </script>
         <div>test</div>
     </body>
 </html>

    Отображаемый результат состоит из двух строк: Первая строка результатов — это руководство по развитию программиста. Вторая строка — тестовая. Потому что при выполнении третьей и четвертой строк скрипта узел DOM, соответствующий второму div, не был сгенерирован в дереве DOM.

  • Случай 2: когда на странице одновременно есть HTML JavaScript CSS, и они не импортируются извне

    Если при построении DOM-дерева встречается JavaScript-скрипт, анализ DOM должен быть приостановлен, а JavaScript должен быть выполнен первым.В то же время JavaScript должен также определить, анализируется ли CSSOM, потому что узел CSSOM может Узел CSSOM подтверждает, что синтаксический анализ завершен, и выполняет JavaScript, чтобы вернуться к созданию дерева DOM. (Итак, здесь вы также можете косвенно повлиять на создание дерева DOM с помощью разбора CSS.)

  • Случай 3: Когда на странице одновременно присутствуют Html, JavaScript, CSS и внешнее введение

    Движок рендеринга Webkit имеет оптимизацию. Когда процесс рендеринга получает поток байтов HTML-файла, он сначала запускает поток предварительной обработки. Если он сталкивается с файлом JavaScript или файлом CSS, поток предварительной обработки загружает данные заранее, авансом. Когда процесс рендеринга получает поток байтов HTML-файла, он сначала запускает поток предварительного синтаксического анализа. Если он сталкивается с файлом JavaScript или файлом CSS, поток предварительного синтаксического анализа загружает данные заранее. Если дерево DOM встречает файл JavaScript в процессе создания, следующий тип такой же, как и в случае 2.

Диаграмма влияния: Нарисовал схему, надеюсь, повлияет на вашу лучшую память:

Построить дерево рендеринга

Через дерево DOM и дерево CSSOM браузер может построить дерево рендеринга из обоих. Браузер сначала обходит каждый видимый узел, начиная с корневого узла дерева DOM, а затем находит и применяет соответствующие правила стиля CSS для каждого видимого узла. Конкретные правила заключаются в следующем:

  • Render Tree и DOM Tree точно не совпадают.

  • Обратите внимание, что visibility: hidden — это не то же самое, что display: none. Первый скрывает элемент, но элемент по-прежнему занимает пространство макета (т. е. визуализирует его как пустое поле), а второй (отображение: нет) полностью удаляет элемент из дерева визуализации, делая элемент невидимым и не являющимся частью макета. макет

Взгляните на результат окончательного составного дерева рендеринга дерева DOM и дерева CSSOM, упомянутых в предыдущем вопросе:

Какие оптимизации можно сделать в процессе формирования дерева рендеринга в этой статье?

Прочитав формирование дерева рендеринга, какие оптимизации мы можем сделать в процессе разработки? (Обратите внимание, что оптимизация здесь относится только к части формирования дерева рендеринга, другие оптимизации будут обсуждаться после серии статей)

  1. Ресурсы CSS предшествуют ресурсам JavaScript в порядке их введения. Файлы стилей должны находиться в теге заголовка, а файлы скриптов — перед концом тела, чтобы предотвратить блокировку.
  2. Минимизируйте манипуляции с DOM в JavaScript.
  3. Упростите и оптимизируйте селекторы CSS, чтобы свести к минимуму уровни вложенности.
  4. При изменении стиля элемента изменение его атрибута класса является наиболее эффективным методом.

Суммировать

Прочитав эту статью, быстро проверьте написанный вами интерфейсный код, составьте процесс формирования дерева рендеринга и подумайте, есть ли в вашем коде возможности для улучшения.Серия статей будет продолжена.В следующей статье в этом цикле статей макет и отрисовка дерева рендеринга.И необходимость появления виртуального дерева DOM, спасибо за просмотр.

Использованная литература:

Колонка Geek Time Browser

Принцип рендеринга в браузере:Хотя дней 96.git ee.IO/blog/2018/0…

Подписывайтесь на меня

Если вы считаете, что это хорошо, закажите звезду и добро пожаловать в группу, чтобы учиться друг у друга.

Категории