学习阮一峰的网页性能管理详解

发表于 | 分类于

原理：

1，HTML 部分生成 DOM Tree，CSS 部分生成 Style Rules，合并成 Render Tree
4，生成布局（layout）
5，绘制到屏幕上（painting）

重排和重绘：

网页生成的时候，至少会渲染一次。

重新渲染 = 重新生成布局（重排 reflow）+ 重新绘制（重绘 repaint）

重排必然重绘，重绘未必重排。

提高网页性能的根本：降低重排和重绘的频率和成本，尽量少触发重新渲染。

提高性能的几个技巧：

1，JS中，从性能角度考虑，尽量不要把读操作和写操作，放在一个语句里面。

1
2
3
4
5
6
7
8
9
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

2，CSS动画中，尽量重绘，少用重排。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// bad, left 属性会造成重排+重绘，transition只会重绘。
.app-menu {
  left: -300px;
  transition: left 300ms linear;
}
.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

// better,transform 属性会影响 Composite 合成阶段。
.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}

.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

// best
.app-menu {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform; // 使用 will change 属性，告知浏览器变化
}

MDN - will-change

3，样式表越简单，重排和重绘就越快。

4，重排和重绘的DOM元素层级越高，成本就越高。

5，table 元素的重排和重绘成本，要高于 div 元素。

6，不要一条条地改变样式，而要通过改变 class，或者 csstext 属性，一次性地改变样式。

1
2
3
4
5
6
7
8
9
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// good 
el.className += " theclassname";
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

6，尽量使用离线DOM，虚拟DOM的脚本库，比如React，而不是真实的网面DOM，来改变元素样式。
比如，操作 Document Fragment 对象，完成后再把这个对象加入DOM。
再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。

7，先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。

另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8，position 属性为 absolute 或 fixed 的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

9，使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染（详见后文）。

深入理解：

csstriggers.com - 重绘和重排的数据

如丝般顺滑：使用 CSS3 实现 60 帧的动画

刷新率

如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。

这意味着，一秒之内进行60次重新渲染（60 FPS），每次重新渲染的时间不能超过16.66毫秒。

如果想达到 60 帧的刷新率，就意味着 JavaScript 线程每个任务的耗时，必须少于16毫秒。

一个解决办法是使用 Web Worker，主线程只用于 UI 渲染，然后跟UI渲染不相干的任务，都放在 Worker 线程。

参考：

使用 Web Workers

Chrome的Timeline

Timeline面板提供两种查看方式：横条的是”事件模式”（Event Mode），显示重新渲染的各种事件所耗费的时间；竖条的是”帧模式”（Frame Mode），显示每一帧的时间耗费在哪里。
事件模式：
哪种色块比较多，就说明性能耗费在那里。色块越长，问题越大。
帧模式：
用来查看单个帧的耗时情况。每帧的色柱高度越低越好，表示耗时少。
帧模式有两条水平的参考线。
下面的一条是60FPS，低于这条线，可以达到每秒60帧；
上面的一条是30FPS，低于这条线，可以达到每秒30次渲染。
如果色柱都超过30FPS，这个网页就有性能问题了。

window.requestAnimationFrame()

它可以将某些代码放到下一次重新渲染时执行。
可以使用window.requestAnimationFrame()，让读操作和写操作分离，把所有的写操作放到下一次重新渲染。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  element.style.height = (currentHeight * 2) + \'px\';
} 
elements.forEach(doubleHeight); 

// 优化 
function doubleHeight(element) { 
  var currentHeight = element.clientHeight; 
// 使用window.requestAnimationFrame()，让读操作和写操作分离，把所有的写操作放到下一次重新渲染。 
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + \'px\';
  });
} 
elements.forEach(doubleHeight);

页面滚动事件（scroll）的监听函数，就很适合用 window.requestAnimationFrame() ，推迟到下一次重新渲染。

1
2
3
$(window).on('scroll', function() {
   window.requestAnimationFrame(scrollHandler);
});

最适用的场合还是网页动画。下面是一个旋转动画的例子，元素每一帧旋转1度。

1
2
3
4
5
6
7
8
9
10
var rAF = window.requestAnimationFrame;

var degrees = 0;
function update() {
  document.body.style.transform = "rotate(" + degrees + "deg)";
  console.log('updated to degrees ' + degrees);
  degrees = degrees + 1;
  rAF(update);
}
rAF(update);

深入理解：

CSS3动画那么强，requestAnimationFrame还有毛线用？

requestAnimationFrame，Web中写动画的另一种选择

creative JS - requestAnimationFrame

https://gist.github.com/joelambert/1002116

深入理解requestAnimationFrame

window.requestIdleCallback()

它指定只有当一帧的末尾有空闲时间，才会执行回调函数。
1，只有当前帧的运行时间小于16.66ms时，函数fn才会执行。否则，就推迟到下一帧，如果下一帧也没有空闲时间，就推迟到下下一帧，以此类推。 

1
requestIdleCallback(fn);

2，它还可以接受第二个参数，表示指定的毫秒数。如果在指定的这段时间之内，每一帧都没有空闲时间，那么函数fn将会强制执行。 

1
requestIdleCallback(fn, 5000); //函数fn最迟会在5000毫秒之后执行。

3，函数 fn 可以接受一个 deadline 对象作为参数。 

1
2
3
4
5
6
7
8
9
10
requestIdleCallback(function someHeavyComputation(deadline) { 
  // 只要当前帧还有空闲时间，就不断调用doWorkIfNeeded方法。
  while(deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
  // 一旦没有空闲时间，但是任务还没有全执行，就分配到下一轮requestIdleCallback。 
  if(thereIsMoreWorkToDo) {
    requestIdleCallback(someHeavyComputation);
  }
});

deadline 对象

回调函数 someHeavyComputation 的参数是一个 deadline 对象。
deadline 对象有一个方法和一个属性：timeRemaining() 和 didTimeout。

timeRemaining() 方法

timeRemaining() 方法返回当前帧还剩余的毫秒。
这个方法只能读，不能写，而且会动态更新。
因此可以不断检查这个属性，如果还有剩余时间的话，就不断执行某些任务。
一旦这个属性等于0，就把任务分配到下一轮requestIdleCallback。

didTimeout 属性

deadline 对象的 didTimeout 属性会返回一个布尔值，表示指定的时间是否过期。
这意味着，如果回调函数由于指定时间过期而触发，那么你会得到两个结果。
1，timeRemaining 方法返回 0
2，didTimeout 属性等于true
如果回调函数执行了，无非是两种原因：当前帧有空闲时间，或者指定时间到了。 

1
2
3
4
5
6
7
8
9
function myNonEssentialWork (deadline) { 
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
    doWorkIfNeeded(); 
  }
  if (tasks.length > 0) {
    requestIdleCallback(myNonEssentialWork); 
  }
} 
requestIdleCallback(myNonEssentialWork, 5000);

doWorkIfNeeded 函数一定会在将来某个比较空闲的时间（或者在指定时间过期后）得到反复执行。

深入理解：

requestIdleCallback 与前端渲染卡顿

Using requestIdleCallback

参考：

阮一峰 - 网页性能管理详解