Jesho Ng Docs

Appearance

网页的解析过程 ​

一、网页的解析过程 ​

image-20230622155720220

解析一 ​

HTML 解析过程

  • 因为默认情况下服务器会给浏览器返回index.html文件，所以解析 html 是所有步骤的开始。
  • 解析 html，会构建DOM Tree。

image-20230622155837187

image-20230622155851316

解析二 ​

生成 CSS 规则

  • 在解析的过程中，遇到 css 的 link 元素，会由浏览器负责下载对应的 css 文件。注意：下载 css 文件不会影响 DOM 的解析。
  • 浏览器下载完 css 文件之后，就会对 css 文件进行解析，解析出对应的规则树。称之为CSSOM(CSS Object Model, css 对象模型)。

image-20230622155951731

image-20230622160019110

解析三 ​

构建 Render Tree

当有了 DOM Tree 和 CSSOM Tree，就可以两个结合来构建Render Tree。

image-20230622160441323

注意：

  • link 元素不会阻塞 DOM Tree 的构建过程，但是会阻塞 Render Tree 的构建过程。因为 Render Tree 在构建时，需要对应的 CSSOM Tree。
  • Render Tree 和 DOM Tree 并不是一一对应的关系，比如对于 display 为 none 的元素，压根不会出现在 Render Tree 中。

解析四 ​

布局和绘制

第四步是在 Render Tree 上运行布局（Layout）以计算每个节点的几何体

  • Render Tree 会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸和信息等位置
  • 布局是确定 Render Tree 中所有节点的宽度、高度、位置等信息

第五步是将每个节点绘制（Paint）到屏幕上

  • 在绘制阶段，浏览器会将布局阶段计算的每个 frame 转为屏幕上实际的像素点
  • 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（img）

二、回流和重绘 ​

回流 reflow（重排） ​

  • 第一次确定节点的大小和位置，称之为布局（layout）
  • 之后对节点的大小、位置修改重新计算称之为回流

什么情况会引起回流：

  • DOM 结构发生改变（添加新的节点或者移除节点）
  • 改变了布局（修改了 width、height、padding、font-size 等值）
  • 窗口 resize（修改了窗口的尺寸等）
  • 调用 getComputedStyle 方法获取尺寸、位置信息

重绘 repaint ​

  • 第一次渲染内容称之为绘制（paint）
  • 之后重新渲染称之为重绘

什么情况会引起重绘：

  • 比如修改背景色、文字颜色、边框颜色、样式等

注意：

  • 回流一定会引起重绘，所以回流很消耗性能
  • 如何在开发者避免回流：
    • 修改样式时尽量一次性修改，比如通过 cssText、class 修改
    • 尽量避免频繁操作 DOM，可以在一个 DocumentFragment 或者父元素中将要操作的 DOM 操作完成，再一次性操作
    • 尽量避免通过 getComputedStyle 获取尺寸、位置等信息
    • 对某些元素使用 position 的 absolute 或者 fixed，并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响

三、特殊解析 ​

composite 合成

绘制的过程中，可以将布局后的元素绘制到多个合成图层中，这是浏览器的一种优化手段。

默认情况下，标准流中的内容都是会被绘制到同一个图层（Layer）中的。

而一些特殊的属性，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用 GPU 来加速绘制。因为每个合成层都是单独渲染的。 _

哪些属性可以生成新的合成层？常见的属性有：

  • 3D transforms
  • video、canvas、iframe
  • opacity 动画转换时
  • position：fixed
  • will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化
  • animation 或 transition 设置了 opacity、transform

注意：

分层确实可以提高性能，但是它是以内存管理为代价的，因此不应作为 web 性能优化策略的一部分过度使用

四、script 和页面解析的关系 ​

关系 ​

  • 浏览器在解析 html 的过程中，遇到了 script 元素是不能继续构建 DOM 树的
  • 它会停止继续构建，首先下载 JavaScript 代码，并且执行 JavaScript 的脚本
  • 只有等到 JavaScript 脚本执行结束之后，才会继续解析 html，构建 DOM 树

原因 ​

  • 因为 JavaScript 的作用之一就是操作 DOM，并且可以修改 DOM
  • 如果等到 DOM 树构建完成并且渲染在执行 JavaScript，会造成严重回流和重绘，影响页面的性能
  • 所以会在遇到 script 元素时，优先下载和执行 JavaScript 代码，再继续构建 DOM 树

这个问题也往往会带来新的问题，特别是现代页面开发中

  • 在目前的开发模式中（比如 vue,react），脚本往往比 html 页面更重，处理时间需要更长
  • 所以会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到

为了解决这个问题，script 元素提供了两个属性：defer 和 async

defer 属性 ​

defer 属性告诉浏览器不要等待脚本下载，而是继续解析 html，构建 DOM Tree

  • 脚本会有浏览器来进行下载，但是不会阻塞 DOM Tree 的构建过程
  • 如果脚本提前下载好了，它会等待 DOM Tree 构建完成，在 DOMContentLoaded（内容加载完毕）事件之前先执行 defer 中的代码
  • 多个 defer 脚本是可以保证正确的顺序执行的
  • defer 可以提高页面的性能，并且推荐放到 head 元素中
  • 注意 defer 仅适用于外部脚本，对 script 默认内容会被忽略

async 属性 ​

async 与 defer 有些类似，它也能够让脚本不阻塞页面

async 是让一个脚本完全独立的

  • 浏览器不会因 asyn 脚本而阻塞
  • async 脚本不能保证顺序，它是独立下载、独立运行、不会等待其他脚本
  • anync 不能保证在 DOMContentLoaded 之前或者之后执行

defer 和 async 怎么用 ​

  • defer 通常用于需要在文档解析后操作 DOM 的 JavaScript 代码，并且对多个 script 文件有顺序要求
  • async 通常用于独立的脚本，对其他脚本，甚至 DOM 没有依赖