前端-CSS3动画卡顿性能优化解决方案
来源：趁你还年轻
假设一次10ms。
那么就减少了约190ms的耗时。
会有人说，辣鸡，才190ms，无所谓。
那么如果margin-left是从-200px到0呢，一次10ms，10ms*199≈2s。
还会有人说，辣鸡，也就2s，无所谓。
你忘了单线程这回事了吗？
如果网页有3个动画，3*2s=6s，就是6s的性能提升。
由于数据是猜测的，所以暂时不考虑其真实性，文章后面我使用chrome devtools的performance做了一个实验。
要知道，在"客户至上"的今天，好的用户体验是所有产品的必须遵守的一条规则，无论是对于开发者还是产品经理，追求极致的性能都是我们打造一个好的产品所必备的品质。
可能看了我的略不专业的分析后，大家对主线程，合成线程以及它们在2种性能不同动画方案上的工作流程还不是很了解，可以去看一篇翻译过来的博客（英文原版链接已经失效了）：深入浏览器理解CSS animations 和 transitions的性能问题
这篇文章完美讲述了浏览器主线程和合成线程的区别，并且举了一个高度从100px变化到200px的2种动画方案的对比，对主线程和合成线程的整个工作流程做了很详尽的讲解，真心建议认真阅读一遍。
回过头来总结下，css3动画卡顿的解决方案：
在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。
transform为我们提供了丰富的api，例如scale，translate，rotate等等，但是在使用时需要考虑兼容性。但其实对于大多数css3来说，mobile端支持性较好，desktop端支持性需要格外注意。
补充：为了增强本文的说服力，特地回家做了一个实验，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.margin-transition{
/* margin-left: 0; */
background: rgba(0,0,255,);
transition: margin-left 1s;
}
.transform-transition{
/* transform: translate(0,0); */
background: rgba(0,255,0,);
transition: transform 1s;
}
.common{
h
前端-CSS3动画卡顿性能优化解决方案 来自淘豆网m.daumloan.com转载请标明出处.
