浅析前端页面渲染机制

最新推荐文章于 2024-07-29 15:46:22 发布

凉寻

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量502

点赞数

文章标签：前端 javascript firefox

本文链接：https://blog.csdn.net/qq_35980082/article/details/121921275

版权

浏览器基础结构

浏览器基础结构主要包括如下 7 部分：

用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；
浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；
渲染引擎（Rendering engine）:负责解析用户请求的内容（如 HTML 或 XML，渲染引擎会解析 HTML 或 XML，以及相关 CSS，然后返回解析后的内容）；
网络（Networking）:负责处理网络相关的事务，如 HTTP 请求等；
UI 后端（UI backend）:负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口；
JavaScript 解释器（JavaScript interpreter）:负责解析和执行 JavaScript 代码；
数据存储（Data storage）:负责持久存储诸如 cookie 和缓存等应用数据。

浏览器内核

各大主要浏览器使用内核也是有差别的，大致可以分为以下几类：

Trident 内核：IE
Webkit 内核：Chrome,Safari
Gecko 内核：FireFox

网络

当用户访问页面时，浏览器需要获取用户请求内容，这个过程主要涉及浏览器网络模块：

用户在地址栏输入域名，如 baidu.com，DNS（Domain Name System，域名解析系统）服务器根据输入的域名查找对应 IP，然后向该 IP 地址发起请求；
浏览器获得并解析服务器的返回内容(HTTP response)；
浏览器加载 HTML 文件及文件内包含的外部引用文件及图片，多媒体等资源。

DNS 预解析（DNS prefetch）

浏览器 DNS 解析大多时候较快，且会缓存常用域名的解析值，但是如果网站涉及多域名，在对每一个域名访问时都需要先解析出 IP 地址，而我们希望在跳转或者请求其他域名资源时尽量快，则可以开启域名预解析，浏览器会在空闲时提前解析声明需要预解析的域名，如：

图图图图

多线程

我们通常说 JavaScript 执行是单线程的，但是浏览器网络部分通常是有几个平行线程同时开启，但是也会有限制，一般为 2-6 个。

渲染引擎及关键渲染路径（Critical Rendering Path）

渲染引擎所做的事是将请求内容展现给我们，默认支持 HTML,XML 和图片类型，对于其他诸如 PDF 等类型的内容则需要安装相应插件，但浏览器的展示工作流程基本是一样的。

通过网络模块加载到 HTML 文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径（Critical Rendering Path）：

1.构建 DOM 树(DOM tree)：从上到下解析 HTML 文档生成 DOM 节点树（DOM tree），也叫内容树（content tree）；

2.构建 CSSOM(CSS Object Model)树：加载解析样式生成 CSSOM 树；

3.执行 JavaScript：加载并执行 JavaScript 代码（包括内联代码或外联 JavaScript 文件）；

4.构建渲染树(render tree)：根据 DOM 树和 CSSOM 树,生成渲染树(render tree)；

渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。

5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；

6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过 UI 后端模块完成；

为了更友好的用户体验，浏览器会尽可能快的展现内容，而不会等到文档所有内容到达才开始解析和构建/布局渲染树，而是每次处理一部分，并展现在屏幕上，这也是为什么我们经常可以看到页面加载的时候内容是从上到下一点一点展现的。

单线程

不同于网络部分的多线程渲染引擎是单线程工作的，意味着渲染流程是一步一步渐进完成的。

解析文档(parser HTML)

在详细介绍浏览器渲染文档之前，先应该理解浏览器如何解析文档：解析文档的顺序，对于 CSS 和 JavaScript 如何处理等。

解析顺序

浏览器按从上到下的顺序扫描解析文档；

解析样式和脚本

脚本：或许是由于通常会在 JavaScript 脚本中改变文档 DOM 结构，于是浏览器以同步方式解析，加载和执行脚本，浏览器在解析文档时，当解析到<script>标签时，会解析其中的脚本（对于外链的 JavaScript 文件，需要先加载该文件内容，再进行解析），然后立即执行，这整个过程都会阻塞文档解析，直到脚本执行完才会继续解析文档。就是说由于脚本是同步加载和执行的，它会阻塞文档解析，这也解释了为什么现在通常建议将<script>标签放在</body>标签前面，而不是放在<head>标签里。现在 HTML5 提供 defer 和 async 两个属性支持延迟和异步加载 JavaScript 文件
改进：针对上文说的脚本阻塞文档解析，主流浏览器如 Chrome 和 FireFox 等都有一些优化，比如在执行脚本时，开启另一个线程解析剩余的文档以找出并加载其他的待下载外部资源（不改变主线程的 DOM 树，仅优化加载外部资源）。
样式：不同于脚本，浏览器对样式的处理并不会阻塞文档解析，大概是因为样式表并不会改变 DOM 结构。
样式表与脚本：你可能想问样式是否会阻塞脚本文件的加载执行呢？正常情况是不会的，但是存在一个问题是通常我们会在脚本中请求样式信息，但是在文档解析时，如果样式尚未加载或解析，将会得到错误信息，对于这一问题，FireFox 浏览器和 Webkit 浏览器处理策略不同：当存在有样式文件未被加载和解析时，FireFox 浏览器会阻塞所有脚本；而 Webkit 浏览器只会阻塞操作了改文件内声明的样式属性的脚本。

构建 DOM 树

DOM，即文档对象模型（Document Object Model）,DOM 树，即文档内所有节点构成的一个树形结构。

假设浏览器获取返回的如下 HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./theme.css" />
    <script src="./config.js"></script>
    <title>关键渲染路径</title>
  </head>
  <body>
    <h1 class="title">关键渲染路径</h1>
    <p>关键渲染路径介绍</p>
    <footer>@copyright2017</footer>
  </body>
</html>

首先浏览器从上到下依次解析文档构建 DOM 树，如下：

图图图图

构建 CSSOM 树

CSSOM，即 CSS 对象模型（CSS Object Model），CSSOM 树，与 DOM 树结构相似，只是另外为每一个节点关联了样式信息。

theme.css 样式内容如下：

html,
body {
  width: 100%;
  height: 100%;
  background-color: #fcfcfc;
}
.title {
  font-size: 20px;
}
.footer {
  font-size: 12px;
  color: #aaa;
}

构建 CSSOM 树如图：

图图图图

执行 JavaScript

上文已经阐述了文档解析时对脚本的处理，我们得知脚本加载，解析和执行会阻塞文档解析，而在特殊情况下样式的加载和解析也会阻塞脚本，所以现在推荐的实践是<script>标签放在</body>标签前面。

构建渲染树(render tree)

DOM 树和 CSSOM 树都构建完了，接着浏览器会构建渲染树：

渲染树，代表一个文档的视觉展示，浏览器通过它将文档内容绘制在浏览器窗口，展示给用户，它由按顺序展示在屏幕上的一系列矩形对象组成，这些矩形对象都带有字体，颜色和尺寸，位置等视觉样式属性。对于这些矩对象，FireFox 称之为框架（frame）,Webkit 浏览器称之为渲染对象（render object, renderer），后文统称为渲染对象。

这里把渲染树节点称为矩形对象，是因为，每一个渲染对象都代表着其对应 DOM 节点的 CSS 盒子,该盒子包含了尺寸，位置等几何信息，同时它指向一个样式对象包含其他视觉样式信息。

渲染树与 DOM 树

每一个渲染对象都对应着 DOM 节点，但是非视觉（隐藏，不占位）DOM 元素不会插入渲染树，如<head>元素或声明 display: none的元素，渲染对象与 DOM 节点不是简单的一对一的关系，一个 DOM 可以对应一个渲染对象，但一个 DOM 元素也可能对应多个渲染对象，因为有很多元素不止包含一个 CSS 盒子，如当文本被折行时，会产生多个行盒，这些行会生成多个渲染对象；又如行内元素同时包含块元素和行内元素，则会创建一个匿名块级盒包含内部行内元素，此时一个 DOM 对应多个矩形对象（渲染对象）。

渲染树及其对应 DOM 树如图：

图图图图

图中渲染树 viewport 即视口，是文档的初始包含块，scroll 代表滚动区域，详见 CSS 之视觉格式化模型(Visual Formatting Model)
渲染树并不会包含显式或隐式地 display：none;的标签元素。

布局（Layout）或回流（reflow，relayout）

创建渲染树后，下一步就是布局（Layout）,或者叫回流（reflow,relayout），这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对 DOM 进行修改，这时候可能需要重新进行布局，也可称其为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或者回流方法，实现其布局或回流。

流（flow）

HTML 采用的是基于流的方式定位布局，其按照从左到右，从上到下的顺序进行排列，详见 CSS 定位机制。

全局布局与局部布局对渲染树的布局可以分为全局和局部的，全局即对整个渲染树进行重新布局，如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等；而局部布局可以是对渲染树的某部分或某一个渲染对象进行重新布局。

脏位系统（dirty bit system）

大多数 web 应用对 DOM 的操作都是比较频繁，这意味着经常需要对 DOM 进行布局和回流，而如果仅仅是一些小改变，就触发整个渲染树的回流，这显然是不好的，为了避免这种情况，浏览器使用了脏位系统，只有一个渲染对象改变了或者某渲染对象及其子渲染对象脏位值为"dirty"时，说明需要回流。

表示需要布局的脏位值有两种：

“dirty”–自身改变，需要回流 “children are dirty”–子节点改变，需要回流

布局过程

布局是一个从上到下，从外到内进行的递归过程，从根渲染对象，即对应着 HTML 文档根元素，然后下一级渲染对象，如对应着元素，如此层层递归，依次计算每一个渲染对象的几何信息（位置和尺寸）。

几何信息-位置和尺寸，即相对于窗口的坐标和尺寸，如根渲染对象，其坐标为（0， 0），尺寸即是视口尺寸（浏览器窗口的可视区域）。

每一个渲染对象的布局流程基本如：

计算此渲染对象的宽度（width）；
遍历此渲染对象的所有子级，依次：
1. 设置子级渲染对象的坐标
2. 判断是否需要触发子渲染对象的布局或回流方法，计算子渲染对象的高度（height）
设置此渲染对象的高度：根据子渲染对象的累积高，margin 和 padding 的高度设置其高度；
设置此渲染对象脏位值为 false。强制回流在渲染树布局完成后，再次操作文档，改变文档的内容或结构，或者元素定位时，会触发回流，即需要重新布局，如请求某 DOM 的"offsetHeight"样式信息等诸多情况：

DOM 操作，如增加，删除，修改或移动；变更内容；激活伪类；访问或改变某些 CSS 属性（包括修改样式表或元素类名或使用 JavaScript 操作等方式）；浏览器窗口变化（滚动或尺寸变化）

$("body").css("padding"); // reflow
$("body")[0].offsetHeight; // relow

有过 CSS3 动画开发经验的同学可能会有经历，如下入场动画：

.slide-left {
  -webkit-transition: margin-left 1s ease-out;
  -moz-transition: margin-left 1s ease-out;
  -o-transition: margin-left 1s ease-out;
  transition: margin-left 1s ease-out;
}

然后执行如下脚本：

var $slide = $(".slide-left");
$slide
  .css({
    "margin-left": "100px",
  })
  .addClass("slide-left");
$slide.css({
  "margin-left": "10px",
});

我们会发现并没有效果，为什么呢？因为对 margin-left 的修改并没有触发回流，元素 margin-left 值的改变被缓存，如果我们在中间强制触发回流：

    var $slide = $('.slide-left');
    $slide.css({
    	"margin-left": "100px"
    });
    console.log($slide.css('padding');
    $slide.addClass('slide-left');
    $slide.css({
    	"margin-left": "10px"
    });

再看就达到了预期效果。

绘制（painting）

最后是绘制(paint)阶段或重绘（repaint）阶段，浏览器 UI 组件将遍历渲染树并调用渲染对象的绘制（paint）方法，将内容展现在屏幕上，也有可能在之后对 DOM 进行修改，需要重新绘制渲染对象，也就是重绘，绘制和重绘的关系可以参考布局和回流的关系。

全局与局部绘制

与布局相似，绘制也分为全局和局部绘制，即对整个渲染树或某些渲染对象进行绘制。

触发重绘

我们已经知道很多操作可能会触发回流，那么什么时候可能触发重绘呢，通常，当改变元素的视觉样式，如 background-color,visibility，margin，padding 或字体颜色时会触发全局或局部重绘，如：

$("body").css("color", "red"); // repaint
$("body").css("margin", "2px"); // reflow, repaint

页面渲染优化

浏览器对上文介绍的关键渲染路径进行了很多优化，针对每一次变化产生尽量少的操作，还有优化判断重新绘制或布局的方式等等。

在改变文档根元素的字体颜色等视觉性信息时，会触发整个文档的重绘，而改变某元素的字体颜色则只触发特定元素的重绘；改变元素的位置信息会同时触发此元素（可能还包括其兄弟元素或子级元素）的布局和重绘。某些重大改变，如更改文档根元素<html>的字体尺寸，则会触发整个文档的重新布局和重绘，据此及上文所述，推荐以下优化和实践：

HTML 文档结构层次尽量少，最好不深于六层；
脚本尽量后放，放在</body>前即可；
少量首屏样式内联放在<head>标签内；
样式结构层次尽量简单；
在脚本中尽量减少 DOM 操作，尽量缓存访问 DOM 的样式信息，避免过度触发回流；
减少通过 JavaScript 代码修改元素样式，尽量使用修改 class 名方式操作样式或动画；
动画尽量使用在绝对定位或固定定位的元素上；
隐藏在屏幕外，或在页面滚动时，尽量停止动画；
尽量缓存 DOM 查找，查找器尽量简洁；
涉及多域名的网站，可以开启域名预解析

浏览器渲染事件日志

1.发起请求； 2.解析 HTML； 3.解析样式； 4.执行 JavaScript； 5.布局； 6.绘制

凉寻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析前端页面渲染机制

浏览器基础结构浏览器基础结构主要包括如下 7 部分：用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；渲染引擎（Rendering engine）:负责解析用户请求的内容（如 HTML 或 XML，渲染引擎会解析 HTML 或 XML，以及相关 CSS，然后返回解析后的内容）；网络（Networking）:负责处理网络相关的事务，如 HTTP 请求等；UI 后端（UI
复制链接

扫一扫