标签：动画 浏览器 必看 渲染 Composite DOM 图层 前端开发

参加浏览器渲染的一些概念

DOM（文档对象模型）
CSSOM（CSS对象模型）
Render Tree (渲染树)
Layout（布局）
Paint（绘制）
Rasterize (栅格化)
Layer（图层）
Composite（合成）

渲染过程

首先DOM、CSSOM大家耳熟能详， 二者就是文档加载之后创建的对象模型。前者描述了结构，后者描述了样式。

接着会将二者结合起来生成渲染树

上图中，我们可以看到，DOM中存在的一些元素比如head，因为是没必要显示的，所以不会出现在渲染树中的。即使是body中的节点，若设置了display:none，依旧是不会出现在渲染树中的。

当得到了渲染树之后，页面还不能够被渲染。这就好像我们有一些色块（盒模型），但我们不知道每一个盒子的位置，所以无法拼出完整的图形。

这时候Layout布局就出场了，他就是为了定位刚刚渲染树中各个节点的位置，使之能够拼成完整的可渲染的图层。

数一数，到目前为止，我们得到了文档DOM，渲染树，并且得到渲染树各个元素的所在的位置。似乎已经可以进行渲染了。的确，但此时渲染并非渲染到屏幕上，而是渲染到Layer图层上，这个概念和PS中的图层差不多，因为CSS是有z-index属性的，也就是展示给我们的页面其实并非是二维的，所以绘制的过程会在多个图层进行。图层与图层之间可能相互重叠，所以此时的渲染并不会真的出现在屏幕上。

（题外话：在Chrome中，Paint绘制分为两部分，一部分是准备绘图使用的列表数据，一部分是将数据已像素的形式栅格化(Rasterize )到图层上。）

有了渲染好的图层，才算是一切准备就绪，接下来会将各个图层按照层级与顺序关系合成(Composite)到到一起进而显示到屏幕上。

好了，总结一下整个流程如下，一图胜千言：

长出一口气，现在我们知道了从服务返回的字符串如何最终转换为了精美的网页。但不妨思考一个问题，我们为什么要知道这个呢？答案很简单，因为我们当我们想提升页面的响应速度，尤其是动画的时候这些概念就变的尤为重要。

提升动画性能

我们知道，实现动画方式多种多样，比如：

• jquery有animatin的api
• css 有keyframes动画（改变left，height样式等）
• css3 的transform

但实际使用以上三种形式实际上有本质的区别，因为他们各自的触发的浏览器重新渲染的时机是不同的。通过JS或者CSS改变盒模型均会导致Layout -> Paint -> Composite的整个流程。相对而言，transform 仅仅是触发Composite 合成，不会重排也不会重绘。要知道这二者都是非常耗性能的。

其实不触发重排重绘也仅仅有transform以及opacity两个样式。但对于大部分动画都已经足够了。

本文仅仅是讲了浏览器渲染的原理，浏览器的机制还有很多，比如Chrome的多进程模型等等，有兴趣的可以深入探索。

标签：动画,浏览器,必看,渲染,Composite,DOM,图层,前端开发
来源： https://blog.csdn.net/weixin_43459866/article/details/113274128

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。