Механизм загрузки и рендеринга в браузере

JavaScript

Эта статья предназначена только для технической проверки, записи, общения и ни на кого не направлена. Прости за любую обиду. Эта статья была впервые опубликована по адресу https://vsnail.cn/static/doc/blog/browserPerformance.html.

Я недавно читал статью«Должен ли JS располагаться внизу Body? Давайте поговорим о механизме рендеринга браузера".Начните с вопроса интервью, а затем проанализируйте механизм загрузки и рендеринга в браузере.

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

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

Механизм рендеринга в браузере

несколько концепций

  • 1. DOM: объектная модель документа. Браузер преобразует HTML в древовидную структуру данных, называемую DOM.

  • 2, CSSOM: объектная модель CSS, браузер анализирует код CSS в древовидную структуру данных.

  • 3, DOM и CSSOM генерируются в байтах → символы → токены → Узлы → Модель объекта. Этот способ генерировать конечные данные. Как показано ниже:

Фигура копируется от великого бога, визуального китайского брата, не приходи ко мне, ой. Я неоднозначная странная работа, нет денег

Процесс построения дерева DOM представляет собой процесс обхода глубины: все дочерние узлы текущего узла будут строить только следующий узел-братья текущего узла.

  • 4. Дерево рендеринга: DOM и CSSOM объединяются для создания дерева рендеринга, как показано ниже:

Вышеприведенная картина скопирована с великого бога, визуального Китая, брат, не приходи ко мне. Я дворник, и у меня нет денег.

Render Treeа такжеDOMТочно так же информация о каждом узле сохраняется в виде дерева с несколькими ответвлениями.cssсвойства, свойства самого узла и дочерние узлы узла.

Уведомление:display:noneузлов не будет добавленоRender Tree,а такжеvisibility: hiddenЗатем, поэтому, если узел сначала не отображается, установите его вdisplay:noneлучше. Подробнее см. здесь

Процесс рендеринга в браузере

  • 1. Создайте/обновите DOM и запросите css/image/js:

Запросы браузераHTMLПосле того, как код сгенерированDOMсамое начало (должно бытьBytes→charactersПосле), запускал параллельноcss,картина,jsпросьбы независимо от того, являются ли ониHEADвнутри.

Примечание: инициироватьjsЗагрузка файлаrequestЭто не нужноDOMразобраться с этимscriptУзлы, такие как: Простое регулярное сопоставление могут это сделать, хотя оно не обязательно передается обычным. Это недоразумение, что многие люди понимают механизм рендеринга.

  • 2,Create/Update Render CSSOM:

CSSЗагрузка файла завершена, начните сборкуCSSOM

  • 3.Create/Update Render Tree:

всеCSSЗагрузка файла завершена,CSSOMПосле завершения сборки иDOMгенерировать вместеRender Tree.

  • 4. Макет:

имеютRender Tree, браузер уже может знать, какие узлы находятся на веб-странице, определение CSS каждого узла и их принадлежность. Следующая операция называетсяLayout, как следует из названия, вычисляет позицию каждого узла на экране.

  • 5. Покраска:

LayoutНаконец, браузер уже знает, какие узлы видны (какие узлы видны), каковы свойства CSS каждого узла (их вычисляемые стили) и где каждый узел находится на экране (геометрия). Введите последний шаг: рисование, согласно рассчитанным правилам, рисуйте содержимое на экране через видеокарту.

Все первые 3 шага из пяти вышеперечисленных шагов используют "Create/Update" Потому чтоDOM,CSSOM,Render Treeможет быть в первый разPaintingС тех пор он много раз обновлялся, например,JSотредактированоDOMилиCSSАтрибуты.

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

Все вышеперечисленное: «Должен ли JS располагаться внизу тела?» «Давайте поговорим о механизме рендеринга браузера» резюмируется, и в тексте всегда упоминается слово «первый экран». Ради последовательности «первый экран» в этой статье также имеет то же значение, то есть ,"первый скрин без картинок"".

Возвращаясь к предыдущему вопросу интервью: «Влияет ли положение тега script на время в верхней части сгиба?»

На самом деле, из описания процесса рендеринга в браузере выше мы можем знать, что на самом делеscriptПоложение не повлияет на время над сгибом, но можно обрезать содержимое сгиба, чтобы отображалась только верхняя часть.

И «Должен ли JS располагаться внизу тела?» В статье «Разговор о механизме рендеринга браузера» также суммированы следующие моменты:

  • Если позиция тега script не находится на первом экране, это не влияет на время первого экрана.
  • Имеет смысл размещать все теги скрипта внизу тела.
  • Но с точки зрения оптимальной производительности, даже тег script внизу тела будет замедлять скорость первого экрана, потому что браузер будет запрашивать соответствующий файл js в самом начале, а это занимает ограниченное количество TCP ссылки, пропускная способность и даже процессор, необходимый для его запуска. Это одна из причин, по которой теги script имеют атрибуты async или defer.

Сомнения и заметки

Существует некоторое понимание для процесса рендеринга браузера, но все равно некоторые сомнения и обращают внимание.

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

Поняв процесс рендеринга в браузере, мы можем обнаружить, что браузер на самом деле делает первый шаг.Painting, вRender treeПосле того, как здание завершено,layoutПосле завершения расчета можно понять, что если (я имею в виду, если, конечно предполагается, что такая ситуация будет редкостью) вы хотите загрузитьjsне изменитсяdomСтруктура или стиль. Так на самом деле,scriptМесто размещения тега не влияет на время рендеринга в браузере.

Мы можем посмотреть на пример ниже.Мы написали простойwebОбслуживание, использованиеnode.jsВ качестве фона, по сути, фон просто сервер статических ресурсов.Мы немного пошевелили руками и ногами на этом сервисе, то есть если это запросbootstrap.min.js, то мы подождем 2 секунды перед возвратом, а остальные ресурсы вернутся в обычном режиме.

Пример адреса проекта:GitHub.com/разные временные улитки…

В то же время мы создали простой html-интерфейс, в этом интерфейсе представлены три css, три js, код этого интерфейса выглядит следующим образом:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/bootstrap.min.css" />
    <link rel="stylesheet" href="./style/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="./style/main.css" />
  </head>
  <body>
    <div>
      <p id="first" class="beautiful"></p>
      <p>人之初 性本善 性相近 习相远</p>
      <p>苟不教 性乃迁 教之道 贵以专</p>
      昔孟母 择邻处 子不学 断机杼<br />
      <img src="./img/1000.jpeg" alt="" style="width:200px;height:200px;margin:20px;"/>
      <p id="content"></p>
    </div>

    <script src="./js/jquery-2.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

В файле main.js есть только простая логическая обработка, которая заключается в том, чтобы вставить несколько слов в элемент, id которого является контентом.

//main.js
document.querySelector("#content").innerHTML = "请注意,请注意,重点不是美女....重点是你看到这串文字..这才是老夫的真实用意..这句话是通过js动态追加的.当你看到这句话的时候,表明这个js文件已经运行了...其实在你不知道的时候,我偷偷的将另外一个js延迟加载了..."

Хорошо, все готово, так что посмотрим, когда мы вернемся с задержкой в ​​2 секунды.bootstrap.min.jsфайл, будетmain.jsкакое влияние.

отgithubначальствоcloneВниз по проекту, затем войдите в каталог проекта, введите командуnode ./server/app.js, затем используйте хром для доступаhttp://localhost:9001/static/index.html, мы затем используемF12,Открытьchromeдля инструментов разработчика нажмитеperformance, мы можем легко получить процесс рендеринга интерфейса браузером.

Из рисунка мы видим, что93.6msВ то время, браузер начал.paintпока в2048msтолько получилbootstrap.min.jsданных, поэтомуВремя первого рендеринга такое же, какscriptместоположение не имеет значения.

2. Браузер загружается строго по порядку тегов скрипта?

На самом деле, этот ответ не понимает процесс рендеринга браузера, зная, что это точно.В противном случае невозможно обеспечить зависимость кода.Прежде чем мы разработаем, мы обычно будемjqueryФайл помещается в первую ссылку, остальные зависимостиjqueryбиблиотекаjsФайл ставится после него, это для того, чтобы последнийjsиспользование файлаjqueryВремя,jqueryБыл загружен. Через это мы также можем знать, что браузер строго в соответствии сscriptПорядок загрузки ярлыкаjsфайл.

Хорошо, мы по-прежнему используем приведенный выше пример для проверки.В приведенном выше примере мы цитируемmain.jsдокументscriptМетки размещеныbootstrap.min.jsизscriptПосле метки и в фоновом режиме будет задержка2sтолько чтобы вернутьсяbootstrap.min.jsТогда в это времяmain.jsКогда приведенное выше возвращается, когда браузер начинает синтаксический анализ и выполнениеmain.js?

Из рисунка выше мы можем знать, что текст под красивой картинкой не был отрендерен, когда я рисовал в первый раз, то есть когда я рисовал в первый раз.paint, браузер не работаетmain.js.тогда возможно, что вы бы сказали, может быть, получитьmain.jsфайл, настоящийpaintПосле этого... На самом деле, это утверждение вполне возможно, но, не будем говорить о выводе, хе-хе.. Давайте сначала посмотримchromeизperformanceПроцесс рендеринга, говорите фактами, хе-хе.

Есть 4 записи, перечисленные выше в хронологическом порядке.

Во-первых, браузер получаетmain.jsданные;

Второй — это первый запуск браузераpaint

Статья 3. Реализацияbootstrap.min.jsдокумент.

Статья 4. Реализацияmain.jsдокумент.

Тогда видно, что загрузка js-файлов происходит «параллельно».jsфайл, следующий будет выполняться после выполнения предыдущего файла.Тогда для ускорения финального эффекта рендеринга можно установить неважные или ненужные в первый раз.jsфайл, положить всеscriptзагружаются позже.Также можно дать этимscriptтег плюсdeferилиasync

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

1. Нужно ли размещать JS внизу Body? Давайте поговорим о механизме рендеринга браузера"Да ладно, что такое /code/ - стабильность...

2. Кейс-проект (exp-browserPainting)GitHub.com/разные временные улитки…

Категории