提高浏览器运行性能清单

原文 ： The Runtime Performance Checklist

影响响应或动画的昂贵的输入处理程序。

Touch, parallax scrolling. 
触摸，视差滚动。

让浏览器尽可能晚的处理触摸和滚动,或绑定侦听器。

Paul Lewis的运行时性能清单中昂贵的输入处理程序

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等样式属性来实现动画，原因

   ，

每次改变都会触发

1. JavaScript
2. Style calculations
3. Layout
4. Paint Setup & Paint
5. 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

6. 降低样式计算的范围和复杂度

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

 

转载于:https://my.oschina.net/u/3261932/blog/837832