原文 : The Runtime Performance Checklist
影响响应或动画的昂贵的输入处理程序。
Touch, parallax scrolling.
触摸,视差滚动。
让浏览器尽可能晚的处理触摸和滚动,或绑定侦听器。
1. js修改 wdith 等属性时,用className,而不是style。
2. 关于js 读和写的操作
a read-write-read-write cycle bad
for (var p = 0; p < paragraphs.length; p++) {
var para = paragraphs[p];
var width = div.offsetWidth;
para.style.left = width + 'px';
}
a read-read.....-write cycle godd
var width = div.offsetWidth;
for (var p = 0; p < paragraphs.length; p++) {
var para = paragraphs[p];
para.style.left = width + 'px';
}
3.动画布局属性
不要使用传统的 position,top,left等样式属性来实现动画,原因
,
每次改变都会触发
- JavaScript
- Style calculations
- Layout
- Paint Setup & Paint
- Composite
而新的样式
只会触
4.Paint
5.Composite
引用: 高性能的动画
4. 绘制风暴
关于流行的视差网站的优化,采用的是hack的方法(作者一点也不喜欢)
https://www.html5rocks.com/en/tutorials/speed/parallax/
5. 昂贵的绘制
通过timeline frame,查看哪些绘制是昂贵的,然后分头解决。
图中在移动端的页面是常见的,第一层的loading gif应该被隐藏(display:none或visibility:hidden),否则会一直paint,印象页面的fps。make sure to hide your animated GIFs.
6. 动画中垃圾收集
7. 昂贵的输入处理
1. 尽可能晚的bind事件
2. 事件的去抖和节流。
补充>提高渲染性能的方法
1. fastdom,加快、平滑的处理dom操作。
2. document的createDocumentFragment()方法
3. 数据的搜索和排序 使用 Wroker 方法。
4. 使用flexbox布局。
5. 优先使用渲染层合并属性、控制层数量。 说到这里我就想起了 css3 Animate
7. 字体的异步加载
很好的demo和总结网站
https://jakearchibald.com/2013/solving-rendering-perf-puzzles/
http://www.cnblogs.com/wz0107/p/4947027.html
http://www.cnblogs.com/mliudong/p/3635294.html
http://www.54gcs.cn/Program/css/gcsb0f40360788043b5b4f8f972b4322b2e.html