前言

最近再弄快成长移动端官网,了解了下CSS3硬件加速的相关知识,发现系列的性能分析和chrome dev tool的相关技巧,便有这些笔记。

避免重绘或者减少重绘成本

我们知道要评价一个页面的是否有流畅的交互体验,页面渲染应该在每秒60帧以上。即60FPS以上),根据FPS的定义:1000 ms / 60 Hz = 16.6 ms。而chrome开发者工具恰好提供了一个很好的工具Enable continuous page repainting,可以非常方便地测试你的页面在webkit浏览器中的渲染时间。(不必像很麻烦地在Timeline标签页中查看绘制状态,而是可以在Elements标签页调试DOM和样式,同时随时查看绘制状态,因为浏览器会持续不断地重绘页面的可见部分)

下面的网站,采用大图作为背景图,并且发生了重绘,这意味着当你滚动页面时,整个页面都发生了重绘