浏览器渲染页面的过程

李成泽
102 阅读3分钟

浏览器渲染过程分为5个步骤

  • 浏览器将获取的HTML文档解析成DOM树
  • 处理CSS标记,构成重叠样式表CSSDOM
  • 将DOM和CSSDOM合并为渲染树（rendering tree）
  • 渲染每个元素经过计算过的，称之为布局 layout
  • 将渲染树上的各个节点绘制屏幕上，称之为 绘制painting

构建DOM树

浏览器从服务器拿到HTML文档后，遍历所有的节点生成DOM树

  1. DOM 树的构建可能会被 CSS 和 JS 的加载而阻塞
  2. display:none的元素也会在DOM树中
  3. 注释也会在 DOM 树中
  4. script 标签也会在 DOM 树中

解析CSS

浏览器会解析CSS文件并生成CSS规则树，每个CSS文件都被解析成StyleSheet对象，每个对象都会包括CSS规则

  1. CSS的解析可以与DOM的解析同步进行
  2. CSS的解析与script的执行互斥
  3. 在Wibkit内核中进行了script执行优化，只有js访问css时才会发生互斥

构建渲染树

根据DOM树和CSS规则树，浏览器可以构建渲染树了。浏览器首先遍历DOM树上的每一个可见节点，然后对每个节点找到匹配的CSS样式规并应用

  1. 渲染树和DOM树不完全对应
  2. display:none的元素不在渲染树中
  3. visiblity:none的元素在渲染树中

渲染树布局

布局阶段浏览器会遍历渲染树的所有节点，由于每个节点都是一个render对象，包括宽高，位置，背景等信息，所有浏览器会根据这些信息来确定元素在页面中的所有位置及样式

  1. float元素、absolute元素、fixed元素会发生位置便宜
  2. 脱离标准文档流就是脱离渲染树

渲染树的绘制

绘制阶段，浏览器遍历所有的渲染树节点，调用paint（）方法，将其渲染在屏幕上。

浏览器渲染过程可能出现的事情

阻塞渲染

浏览器会延迟JavaScript的执行和DOM的创建

1. CSS 被默认为阻塞渲染的资源，所以在CSSDOM构建完成之前不会处理任务已处理的内容;
2. JavaScript可以读取和修改DOM属性，还可读取和修改CSSDOM属性，所以CSS解析和script的执行互斥

因此，script标签的位置很重要，我们在实际开发中应尽量坚持以下两个原则

1. 在引入顺序上，css资源先于JavaScript资源;
2. JavaScript尽量少去影响DOM的构建;

回流和重绘 (reflow和repaint)

reflow(回流)：当浏览器发现某个部分发生了变化影响了布局，这个时候就需要倒回去重新渲染，这个过程就叫做reflow; repaint(重绘)：当改变某个元素的背景颜色、字体颜色、边框颜色等不影响布局的属性时，屏幕的一部分需要重画，但是元素的几何尺寸和位置都没有发现变化;

 diaplay:none 会触发 reflow
 visibility:hidden 会触发repaint

可以通一些操作来减少reflow

1. 用transform来做形变和位移
2. 通过绝对定位的方式来脱离当前层叠上下文，形成的render layout
3. 异步reflow

优化渲染效建议

1. 合法地去书写HTML和CSS，且不要忘了文档编码类型
2. 样式文档应该在head标签中，而脚本文档应该在body结束之前，防阻塞
3. 优化css 选择器,尽量少嵌套
4. 减少JavaScript对DOM的操作
5. 修改元素的样式，修改class是性能最高的方法
6. 尽量用transform来做形变和位移
avatar
文章
阅读
粉丝