动画优化和重绘.md

###动画优化

• 动画效果在缺少硬件加速支持的情况下反应缓慢，例如手机客户端。

- 特效应该只在确实能改善用户体验时才使用，而不应用于炫耀或者弥补功能与可用性上的缺陷。
- 至少要给用户一个选择可以禁用动画效果。
- 设置动画元素为absolute或fixed。
	- `position: static`或`position: relative`元素应用动画效果会造成频繁的`reflow`。
	- `position: absolute`或`position: fixed`的元素应用动画效果只需要`repaint`。
- 使用一个`timer`完成多个元素动画。
	- `setInterval`和`setTimeout`是两个常用的实现动画的接口，用以间隔更新元素的风格与布局。。
- 动画效果的帧率最优化的情况是使用一个`timer`完成多个对象的动画效果，其原因在于多个`timer`的调用本身就会损耗一定性能。

		setInterval(function() {
		  animateFirst('');
		}, 10);
		setInterval(function() {
		  animateSecond('');
		}, 10);

	使用同一个`timer`。

		setInterval(function() {
		  animateFirst('');
		  animateSecond('');
		}, 10);

• 以脚本为基础的动画，由浏览器控制动画的更新频率。

###重绘专题

• 减少页面的重绘。
  • 减少页面重绘虽然本质不是JAVASCRIPT优化，但重绘往往是由JAVASCRIPT引起的，而重绘的情况直接影响页面性能。

		var str = "<div>这是一个测试字符串</div>";
		/**效率低**/
	    var obj = document.getElementsByTagName("body");
	    for(var i = 0; i < 100; i++){
	        obj.innerHTML += str + i;
	    }
		/**效率高**/
	    var obj = document.getElementsByTagName("body");
	    var arr = [];
	    for(var i = 0; i < 100; i++){
	        arr[i] = str + i;
	    }
	    obj.innerHTML = arr.join("");

一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。

• 使用HTML5和CSS3的一些新特性。
• 避免在HTML里面缩放图片。
• 避免使用插件。
• 确保使用正确的字体大小。
• 决定当前页面是不是能被访问。