«Сотня непобедимых ядов (2)» шутит о «браузерном рендеринге»

Всем привет, Линь Сансинь снова здесь. смотрел его с десяток раз《康熙王朝》а также《雍正王朝》, сегодня, позвольте мне сказать вам“九龙夺嫡”эти вещи, кстати浏览器渲染(собственно говоря浏览器渲染, Кстати“九龙夺嫡”, хе-хе), если вы считаете, что это хорошо, не забудьте дать赞Ой.

Ведь я тоже писатель с мечтами!

Представление главного героя (введение модуля)

Пожалуйста, запомните соответствующие отношения, это поможет вам лучше понять отношения между модулями позже.

Канси (браузер)

Говоря о нашем императоре Канси, это было бы здорово: он захватил Аобая, трижды сражался и отправился в экспедицию в Гердан. Но не откладывайте его роман. «Девять сыновей захватывают наследника», грубо говоря, это то, что девять вонючих мальчишек сражаются друг с другом за трон собственного отца, так что неудивительно, что у этих вонючих мальчишек, из-за которых император Канси столько рождений? Конечно, самыми выдающимися среди девяти сыновей являются大阿哥胤禔(HTML解析器)，老三胤祉（绘图模块），老四胤禛（JS引擎），老八胤禩（CSS解析器），老十三（布局Layout模块）

Большой Брат (парсер HTML)

Личность: старший сын Канси, сильный и крепкий, любит драться, но у него нет мозгов (он попал в плен в бою, позорный)
Навык: только разборHTML标签, кстати парсить инлайнstyle标签стиль, сборкаDOM树

Восьмой брат (парсер CSS)

Личность: восьмой сын Канси, он хорошо работает на поверхности.
Навык: анализlinkНабросайте красивые стили в тегах, создайтеCSS树

Четыре брата (движок JS)

Личность: четвертый сын Канси, самый умный сын, чернобрюхий мужчина (позже император Юнчжэн).
Навык: тайно манипулировать различными样式а такжеDOM节点(Добавить, удалить, изменить, проверить или связать события)

Тринадцать братьев (модуль макета)

Личность: Прямолинейный, прямолинейный, очень преданный всем братьям (настолько преданный, что не подходит для императора)
Навык: положитьDOM树а такжеCSS树объединить и сделать布局图纸(Не несет ответственности за рендеринг, предоставить только чертежи)

Три брата (модуль рисования)

Личность: Литератор, хорош в каллиграфии и живописи, хорош в живописи (маньчжуры - нация верхом, странно, что литераторам можно передать трон вам)
Навык: Принять власть из рук старых тринадцати图纸,а также绘制выйти и показать вам, ребята

Грубый процесс рендеринга

Big Brother (парсер HTML) анализирует теги HTML, когда они встречаются с ними, и строит дерево DOM.
Myaa (парсер CSS) анализирует стиль CSS в теге ссылки и строит дерево CSS.
Старший брат и восьмой брат передают свое дерево DOM и дерево CSS четвертому брату (движок JS)
Siage (движок JS) обрабатывает код js в скрипте и выполняет такие операции, как привязка событий, изменение дерева CSS и дерева DOM в соответствии с кодом js.
Thirteen Age (модуль макета) сочетает в себе модифицированное дерево CSS и дерево DOM, дерево рендеринга и чертежи макета дизайна, которые передаются Sanjia (модуль рисования)
Kangxi (браузер) просит различные ресурсы изображений, аудиоресурсов и т. Д., Чтобы три князья вместе
Брат Сан (модуль рисования) мастер живописи.Сразу по этому рисунку и материалам, предоставленным Хуан Амой, он нарисует всю страницу на всеобщее обозрение.

Отношения между братьями (отношения между модулями)

Прежде чем читать следующее содержание, вы должны сначала понять истину:解析а также渲染два процесса,解析Не обязательно渲染(то есть вы пока не видите эффекта страницы),渲染объяснил解析Все кончено, это как: у тебя есть деньги (解析) не обязательно будет покупать виллу (渲染), но если купить виллу (渲染) значит ты действительно богат(解析)

парсер HTML

 <style>
     // 6万行css样式
     .box { background: red } // 最后一行
 </style>
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>

Q: Парсер HTML отвечает за синтаксический анализHTML标签, кстати парсить инлайнstyle标签Если в теге стиля более 60 000 строк стилей, не удастся ли проанализировать и отобразить следующие теги div из-за слишком медленного анализа?

отвечать:不会, парсер HTML异步解析А также不блокировать渲染. Большой брат (HTML-парсер) прошёлся сверху вниз, наткнулся на тег style и обнаружил, что в нём слишком много стилей, посчитав, что парсинг занял много времени, он отправил четырёх солдат парсить следующие четыре тега div Во-первых, визуализируйте его первым, чтобы повысить эффективность.

Вызванная проблема: Из-за того, что в стиле слишком много стилей, солдаты закончили синтаксический анализ и рендеринг тега div, но старший брат не закончил синтаксический анализ стиля в стиле, поэтому тег div с class="box" отображается первым (без стиля). Когда Большой Брат закончит синтаксический анализ тега стиля, он назначит стиль .box отображаемому тегу div, в результате чего тег div появится на странице.无样式 -> 有样式эффект, так называемый闪屏现象

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

Парсер HTML и парсер CSS

 // index.css里
  // 6万行css样式
  .box { background: red } // 最后一行


 // html代码
 <link href="index.css"></link> // 引入
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>

Q: Парсер CSS отвечает за синтаксический анализlinkВнешний стиль в теге, тогда вопрос: тег ссылки имеет более 60 000 строк внешнего стиля.Не будет ли синтаксический анализ слишком медленным, чтобы следующие теги div не могли быть проанализированы и отображены?

отвечать:不会Заблокировать следующий тег div解析,но会Заблокировать следующий тег div渲染, то есть,CSS解析器Анализируя 60 000 строк стилей в теге ссылки,HTML解析器Я привел несколько солдат для анализа следующих тегов div, но они только анализируются, а не отображаются. Подождите, покаCSS解析器Разобрав 60 000 строк стилей, объедините их сразуCSS树а такжеDOM树и отображать его на странице

Почему: потому что это позволяет избежать闪屏现象а также提高渲染性能. сказано выше闪屏现象он появляется на странице无样式 -> 有样式Эффект очень плохой, так как же его избежать? Лучший способ - подождать, пока最终的DOM树а также最终的CSS树После того, как комбинация будет завершена, визуализируйте ее за один раз, чтобы страница не отображалась.无样式 -> 有样式Такая проблема. Множественные рендеринги теперь превращаются в однократные рендеринги, что естественным образом повышает производительность рендеринга.

Вызванные проблемы: если синтаксический анализатор CSS работает слишком медленно, страница никогда не завершит окончательный рендеринг, и будет короткий период времени.白屏现象

Как решить проблему: Суть в ускорении скорости загрузки внешнего стиля:

Ускорение внешних ресурсов с использованием узлов CDN

Сжатие внешних файлов стилей (используя сборщики, такие как webpack, gulp и т. д.)

Оптимизируйте код файлов стилей

Парсер HTML и движок JS

// index.js文件
  // 6万多行代码，对dom进行了一系列操作

// html页面
 <script src="index.js"></script> // 引入
 <div id="box"></div>
 <div></div>
 <div></div>
 <div></div>

В: Движок JS тайно манипулирует различными样式а такжеDOM节点(добавлять, удалять, изменять, проверять или привязывать события), не будут ли следующие теги div анализироваться и отображаться из-за того, что выполнение ссылочного кода тега скрипта слишком медленное?

отвечать:会Заблокируйте синтаксический анализ и рендеринг следующих тегов div, подождите, покаJS引擎поместите весь код JS加载а также执行завершено, оно будет выпущеноHTML解析器Разобрать DOM и визуализировать его одновременно

Почему: Чтобы привести контрпример, пока Си Аг (движок JS) медленно выполнял 60 000 строк кода, Канси приказал Большому Брату (парсеру HTML) игнорировать Си Ага и смело анализировать HTML, и Большой Брат немедленно привел со своими солдатами сразу же закончил разбор всех тегов div, а затем, полный чувства выполненного долга, хотел пойти в Канси, чтобы попросить награду, и в это время четвертый брат еще не закончил выполнение своего JS-кода, старший брат побежал, побежал , побежал.Момент перед Канси, четвертый брат только что закончил выполнение кода JS и удалил все теги, которые только что разобрал старший брат (ведь у четвертого брата есть возможность манипулировать DOM), когда Канси это увидел , Лэй Тин был в ярости: «WDNMD!!! Босс, разве вы не говорили, что все решено? Где это?? Осмелитесь солгать мне?» Он отругал старшего брата. Старший брат подумал про себя: «Четвертый брат, ВДНМД, посмеет стереть успех анализа Лао-цзы!» Позже, когда Канси узнал об этом, он сформулировал свод правил: в будущем четвертый брат будет выполнять сначала напишите код, а потом отправьте старшего брата парсить HTML, чтобы старший брат не делал бесполезной работы!

Проблема: если код JS выполняется с ошибкой или выполняется слишком медленно, последующий HTML никогда не будет проанализирован, и страница всегда может быть пустой.

Как решить проблему: Суть в том, чтобы изменить порядок выполнения кода JS или оптимизировать скорость выполнения JS:

<script async></script> плюсasyncатрибут, код JS будет загружаться и выполняться асинхронно (в случае нескольких тегов script скрипт не будет выполняться в порядке страницы, но тот, кто загрузит его первым, выполнит его)

<script defer></script> плюсdeferатрибут, код JS будет загружен асинхронно (если есть несколько тегов script с установленным defer, все скрипты будут выполняться по порядку и будут выполняться вDOMCotentLoadedперед исполнением)

Поместите тег скрипта в конец страницы

Оптимизируйте код JS для ускорения выполнения

Парсер CSS и движок JS

следуйте вышеизложенномуHTML解析器和JS引擎Аналогично, простоDOM树а такжеCSS树разница

JS-движок и JS-движок

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>

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

<script src="index1.js"></script>
<script src="index2.js"></script>
<div></div>

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

<script src="index1.js" defer></script>
<script src="index2.js" defer></script>

Он будет загружаться асинхронно, то есть низ может загружаться быстрее, чем верх, но конечное выполнение кода все равно будет выполняться сверху вниз по порядку, и выполняться до DOMContentLoaded

<script src="index1.js" async></script>
<script src="index2.js" async></script>

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

небольшое сомнение

Вопрос. Почему синтаксический анализатор CSS может блокировать только рендеринг HTML, но не синтаксический анализ HTML, а механизм JS может блокировать как синтаксический анализ, так и рендеринг HTML?

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

DOMContentLoaded и загрузка

Давайте посмотрим на общий процесс рендеринга:

Big Brother (парсер HTML) анализирует теги HTML, когда они встречаются с ними, и строит дерево DOM.
Myaa (парсер CSS) анализирует стиль CSS в теге ссылки и строит дерево CSS.
Старший брат и восьмой брат передают соответствующие деревья DOM и CSS четвертому брату (движку JS)//DOMContentLoadedпроисходит здесь
Siage (движок JS) обрабатывает код js в скрипте и выполняет такие операции, как привязка событий, изменение дерева CSS и дерева DOM в соответствии с кодом js.
Brother Thirteen (модуль Layout Layout) объединяет модифицированное дерево CSS и дерево DOM в дерево рендеринга и разрабатывает чертеж макета, который передается Brother Three (модуль рисования)
Канси (браузер) запрашивает различные ресурсы изображений, аудиоресурсы и т. Д. И вместе передает их трем старшим братьям.
Брат Сан (модуль рисования) мастер живописи.По этому рисунку и материалам, предоставленным Хуан Амой, я нарисую всю страницу на всеобщее обозрение//onloadпроисходит здесь

Эпилог

JavaScriptЭто мозг, работающий в браузере, и браузер (Канси) должен предпочитать JavaScript (четыре старших брата), поэтому, в конце концов, он должен быть四阿哥胤禛ты выиграл, поздравляю雍正帝!

Юнчжэн также является одним из моих любимых.推行新政,火耗归公,摊丁入亩,士绅一体当差一体纳粮,派年羹尧平定罗布赞旦增阿拉布坦叛乱Подождите, все отлично!

Если вам интересно, вы можете пойти посмотреть《雍正王朝》,а также《大明王朝》Это верно для пика китайских костюмных драм!