1 Show paint rectangles 显示绘制矩形 2 Show composited layer borders 显示层的组合边界 3 Show FPS meter 显示FPS帧频 4 Enable continuous page repainting 开启持续绘制模式 并 检测页面绘制时间 5 Show potential scroll bottlenecks 显示潜在的滚动瓶颈。

show paint rectangles

开启矩形框，便会有绿色的框将页面中不同的元素框起来，如果页面渲染便会整块加深，举个例子：

当点击+号时，三块区域产生了重绘，这里也可以看出，每次重绘都会影响一个块级（Layer），连带反应会影响周边元素，所以一次mask全局遮盖层的出现会导致页面级重绘，比如这里的loading与toast便有所不同：

loading由于遮盖mask的出现而产生了全局重绘，而toast本身是绝对定位元素只影响了局部，这里有一个需要注意的是，因为loading转圈的动画是CSS3实现的，虽然不停的再动，事实上只渲染了一次，如果采用javascript的话，便会不停重绘。

然后当页面发生滚动时，下面的支付工具条一直呈绿色状态，意思是滚动时一直在重绘，这个重绘的频率很高，这也是fixed元素相当耗费性能的原因：

结合Timeline的渲染图

如果这里取消掉fixed元素的话：

这里fixed元素支付工具栏滚动时候是绿的，但是同样是fixed的header却没有变绿，那是因为header多了一个css属性：

.cm-header { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

这个属性会创建独立的Layer，有效的降低了fixed属性的性能损耗，如果header去掉此属性的话，就不一样了：

show composited layer borders

显示组合层边界，是因为页面是由多个图层组成，勾上后页面便开始分块了：

使用该工具可以查看当前页面Layer构成，这里的+号以及header都是有自己独立的图层的，原因是使用了：

transform: translate3d(-50%,-50%,0);

Layer存在的意义在于可以让页面最优的方式绘制，这个是CSS3硬件加速的秘密，就如header一样，形成Layer的元素绘制会有所不同。

Layer的创建会消耗额外的资源，所以不能不加节制的使用，以上面的“+”来说，如果使用icon font效果也许更好。

因为渲染这个东西比较底层，需要对浏览器层面的了解更多，关于更多更全的渲染相关知识，推荐阅读我好友的博客：

今天我们站在工程化的层面总结了前几次性能优化的一些方法，以期在后续的项目开发中能直接绕过这些性能的问题。

前端优化仅仅是前端工程化中的一环，结合之前的代码开发效率探讨（【组件化开发】前端进阶篇之如何编写可维护可升级的代码），后续我们会在前端工具的制作使用、前端监控等环节做更多的工作，期望更大的提升前端开发的效率，推动前端工程化的进程。

本文关联的代码：

https://github.com/yexiaochai/mvc

微博求粉

最后，我的微博粉丝及其少，如果您觉得这篇博客对您哪怕有一丝丝的帮助，微博求粉博客求赞！！！