一、渲染过程
- 处理HTML标记数据并生成DOM树。
- 处理CSS标记数据并生成CSSOM树。
- 将DOM树与CSSOM树合并在一起生成渲染树。
- Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。
- Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
布局和绘制涉及到两个名词: reflow(重排/回流)和repain(重绘)。页面在首次加载时必然会经历reflow和repain
- composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。
Q2LVfg.md.png
Q2LepQ.md.png
图一也叫做像素管道，这里就不多做阐述了
二、常见问题
1、DOM树是怎么构建的
- 浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串
- 将字符串转换成Token，如：<html>、<body>等
- 生成节点对象并构建DOM
2、token是如何拆分的
举个栗子
<p class="a">abc</p>
- <p“标签开始”的开始
- class=“a” 属性
-
“标签开始”的结束
- abc 文本
- </p> 标签结束
QRDFN8.md.png
3、除了script标签，还有什么会阻塞DOM的构建
是CSSOM，造成CSSOM影响DOM构建的原因还是由于script标签的中途插入，当JS想修改样式时，必须拿到完整的CSSOM，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟JS执行和DOM的构建，直至完成CSSOM的下载和构建
4、渲染树包括了什么
render tree只包含了用于渲染页面的节点
为了形成渲染树，浏览器大致做的事情如下:
- 从DOM树根节点开始，遍历每一个可见的节点和对应的样式 一些节点是完全不可见的（比如 script标签，meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出
- 一些节点是通过CSS样式隐藏了，这些节点同样被忽略——例如上例中的span节点在render tree中被忽略，因为span样式是display:none;
- 对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式 显示可见节点（节点包括内容和被计算的样式）
5、浏览器包含哪些进程
- 主进程（负责协调，主控），只有一个
- 第三方插件进程：每种类型的插件对应一个进程
- GPU进程：最多一个，用于3D绘制等。
- 浏览器渲染进程
6、渲染进程包括了什么
浏览器是多进程的，浏览器的渲染进程是多线程的；
- GUI渲染线程，用于布局绘制等
- JS引擎线程
- 事件触发线程
- 定时触发器线程
- 异步http请求线程
QRRKt1.md.png
三、关于图层
1、概念
上面提到了composite，浏览器渲染的图层大致分为2种：普通图层、复合图层
- 普通文本流属于1个复合图层，无论里面多少元素都在这个复合图层里
- absolute和fixed 虽然可以脱离普通文档流，但是无法脱离默认复合层，所以absolute中信息的改变，仍然会影响整个复合层的绘制
- 通过硬件加速的方式可以声明一个新的复合图层，不会影响到默认复合图层
2、复合图层的创建条件有什么？（硬件加速）
- 拥有具有3D变换的CSS属性，如translate3d,translatez
- CSS3动画的节点
- video、canvas、iframe、webgl元素
- 拥有CSS加速属性的元素(will-change)，一般配合opacity与translate使用
- 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
- 如果有滚动条，滚动条也会单独生成一个图层
- flash
3、复合图层作用
独立于普通文本流中，改动可以避免整个页面的reflow和repaint，提升性能，但是也要注意不要过度使用，否则资源也会消耗过度，适得其反
网友评论