动画

GPU加速

1
2
3
transform: translate3d(0, 0, 0);
// 或
translateZ(0)

CSS3 Perspective 属性

注:3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡

计算量大的任务使用Web Worker

建议

  • 尽可能少的使用box-shadows与gradients
    box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。
  • 尽可能的让动画元素不在文档流中,以减少重排
  • 分离读写操作

setTimeout 与 setInterval

更新延迟

Timer计算延时的精确度不够。延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率(Timer resolution)。IE8及其之前的IE版本更新间隔为15.6毫秒。假设你设定的setTimeout延迟为16.7ms,那么它要更新两个15.6毫秒才会该触发延时。这也意味着无故延迟了 15.6 x 2 - 16.7 = 14.5毫秒。

requestAnimationFrame

Window.requestAnimationFrame()

工具

缓存

CSS样式性能优化

雪碧图

书籍

JavaScript网页动画设计 - Velocity.js作者 Julian Shapiro
WebKit技术内幕
Web性能实践日志

参考资料