Web 动画性能

性能影响一切

技术:去除布局颠簸

由设置和获取的交替而导致的UI性能降低称为布局颠簸。

解决办法：批量操作 DOM 的设置和获取

// 糟糕的做法
var currentTop = $("element").css("top"); // 获取
$("element").style.top = currentTop + 1; // 设置
var currentLeft = $("element").css("left"); // 获取
$("element").style.left = currentLeft + 1; // 设置

jQuery 元素对象（JEO）

// 糟糕做法:未缓存JEO
$("#element").css("opacity", 1);
// ...... 一些中间代码......
// 再次将JEO实例化
$("#element").css("opacity", 0);

// 恰当优化做法：
// 缓存jQuery元素对象
var $element = $("#element");
$element.css("opacity", 1);
// ...... 一些中间代码 ......
// 复用了缓存的JEO,避免了一次DOM查询
$element.css("opacity”, 0);

强制给值：明确地为动画设置初始值，避免一开始对页面进行获取的操作

// 设置translateX从初始值0变动至500像素的动画
$element.velocity({ translateX: [ 500, 0 ] });
// 设置opacity从初始值1变动至0的动画
$element.velocity({ opacity: [ 0, 1 ]);

批量添加 DOM

var $body = $("body");
var $newElements = [ "<div>Div 1</div>", "<div>Div 2</div>", "<div>Div 3</div>" ];
var html = "";
$newElements.each(function(i, element) {
html += element;
});
// 一次性添加
$(html).appendTo($body);

技巧:避免影响临近的元素

很多CSS属性，一经改变，就会造成临近元素尺寸或位置的调整，包括: top 、 right 、 bottom 和 left，所有的 margin 和 padding 属性，border 厚度，以及 width 和 height 尺寸

尽可能设置 CSS 的 transform 属性( translateX 、translateY 、 scaleX 、 scaleY 、 rotateZ 、 rotateX 和 rotateY )的动画

$element.velocity({ top: "100px" });
// 更快:使用translateY
$element.velocity({ translateY: "100px" });

技巧:减少并发加载

错开动画

$elements.velocity({ opacity: 1 }, { stagger: 300 });

多动画序列

$images
.velocity({ opacity: 1 })
.velocity({ boxShadowBlur: "50px" });

技巧:不用持续响应滚动(scroll)和调整大小(resize)事件

问题

// 当滚动浏览器窗口时,执行一个行为
$(window).scroll(function() {
// 这里写的任何行为都会在用户滚动时,每秒钟触发多次
});
// 当浏览器窗口的大小改变时,执行一个行为
$(window).resize(function() {
// 这里写的任何行为都会在用户调整窗口大小时,每秒钟触发多次
});

解决方法：对事件句柄进行反跳(debounce)

定义一个时间间隔,在此时间间隔内,事件句柄回调将仅会被调用一次

技巧:减少图片渲染

• 尽可能将基于图形的图片转成SVG元素
• 减少要渲染的图片
• 多图时,错开切换可见性的动画时间

在旧浏览器上降级动画

• 产品决策：减少整个网站的动画
• 技术决策：只针对低端设备减少动画（使用全局动画乘数技术）