GaoQ's Blog
编程
AI
3D
SEO
关于

浏览器渲染与JS渲染

预计阅读时间: 5 分钟

1. 浏览器内核

"浏览器内核

浏览器内核又称排版引擎(layout engine)、浏览器引擎(browser engine)、页面渲染引擎(rendering engine)

常用的浏览器内核

  • Webkit: Safari
  • Blink: Chrome、Edge、Android Webview。 - 是Webkit的一个分支
  • Gecko: Firefox

浏览器渲染过程

从输入网址到展示内容浏览器经历的过程

"浏览器渲染过程
  1. link元素不会阻塞Dom tree的解析过程,但会阻塞render tree的生成,因为需要Dom tree和cssom合成render tree,具体取决于浏览器的优化
  2. Render tree 和Dom tree不是一一对应的关系,因为display:none的元素不会出现在render tree上
  3. 渲染树会表示显示哪些节点,但不包含每个节点的尺寸、位置信息
  4. 布局确定呈现树(display tree)中的所有节点的宽高、和位置信息
  5. 绘制,把布局阶段的结果转换成屏幕上的实际像素点,对可见部分进行绘制

推荐阅读 浏览器如何工作

回流/重排 (reflow) 与 重绘 (repaint)

1. 回流

"什么是回流

Dom元素大小位置等属性修改后,渲染引擎会重新进行布局(layout)生成新的render tree的过程

触发回流的操作

  • Dom结构修改
  • 改变了布局,如(width、height、pading等)
  • 窗口resize(修改了窗口尺寸)
  • 调用getComputedStyle 方法获取尺寸、位置信息(取决于浏览器实现)

2. 重绘

"什么是重绘

从render tree重新绘制的成像素点的过程

触发重绘的操作

  • 修改背景颜色、文字颜色、边框颜色、样式等不影响布局的属性(不触发layout)

3. 差异

  • 回流的性能消耗比较大,因为需要重新计算布局,并且再次执行重回的过程
  • 重绘消耗比较小,因为不需要重新计算布局
"回流一定会重绘,重绘不一定回流

基于浏览器引擎的优化

1. 适当使用合成图层(layers)

"合成图层

生成图层的时候,某些属性会生成新的图层

  • 可以利用GPU硬件加速,提升性能
  • 不会引起回流,性能更高

产生合成图层的属性

  • position:fixed
  • 3D Transform
  • video、canvas、iframe元素
  • animation 或 transition 设置了opacity或者transform

2. Dom tree构建优化

"Dom Tree构建

Dom Tree解析是同步的，遇到script标签，会等待script下载完成后执行，如果js文件较大或执行报错，会阻塞Dom tree的继续构建

尽管 浏览器会做优化，即使js报错，script标签之前的内容仍会被渲染

利用上异步加载，可以提升性能，缩短首屏渲染时间，可以通过在script标签添加defer或async属性实现

defer

  • 不阻塞Dom tree构建,异步下载
  • 下载完成不会立即执行,而是等Dom tree构建完成,DomContentLoaded事件回调之前执行
  • 多个script标签,可以保证执行顺序和书写顺序一致

async

  • 完全独立,不阻塞Dom tree构建,异步下载
  • 下载完成立即执行
  • 多个带async属性script标签不能保证执行顺序

2. JS解析与执行

"JS解析

由浏览器引擎解析html获得js源代码，发送到js引擎，先进行词法分析，生成token，再进行语法分析，生成抽象语法树(AST)，最后进行执行

"AST

抽象语法树：AST， Abstract Syntax Tree

词法分析： 把代码语句中的语句token化,生成各类token

语法分析： 把上面的token分类,分析语句的作用,对应的语法规则

中文版 AST解析

关于js如何执行，参考JS执行原理