摘要：
在DevTools中开始渲染，向下滑动一点点滚动条，然后停止滚动。 在结果中，注意frames总是在30ftps线上面，甚至都木有很接近69ftps线的（事实上帧执行的太缓慢以致于60ftps线在图上都不显示） 打开一个帧可以看见在scrol事件之后是一个函数回调，然很多分离的layout事件，每个 阅读全文
posted @ 2016-05-05 18:12
RachelChen
阅读(432)
评论(0)
推荐(0)
摘要：
input处理函数是潜在的影响你app性能的问题，他们可以阻止帧的形成，并且可以造成多余的亦或不必要的layout的工作。 避免长时间运行input handler：它们会阻塞scroll 不要在input handler 中进行样式的改变 Debounce 你的处理函数; 存储事件值并且在下一次r 阅读全文
posted @ 2016-05-05 17:48
RachelChen
阅读(1529)
评论(0)
推荐(0)
摘要：
Paint是填充像素并且最后合成在用户的屏幕上的过程。 通常是在管道中耗费最大的，你要尽可能的避免使用paint。 动画中使用除了transform和opacity的动画属性都将触发paint paint是像素管道中耗费最大的部分，所以避免使用之 在层提升(layer promotion)和编配动画 阅读全文
posted @ 2016-05-05 17:22
RachelChen
阅读(924)
评论(0)
推荐(0)
摘要：
合成（composition）意味着将网页中已经绘画好的部分结合在一起，且展示在屏幕上。 坚持使用transform和opacity属性来操作你的动画animation 在有动画的元素上使用 will-change 或 translateZ属性 不要为所有元素创建合成器层：layers需要内存和管理 阅读全文
posted @ 2016-05-05 15:55
RachelChen
阅读(1310)
评论(0)
推荐(0)
摘要：
通过增加和移除元素，修改属性，类或者听过动画的方式来修改DOM都会导致浏览器重新计算元素的样式，且在大多是情况下重新布局页面亦或重新布局部分页面。这个过程被叫做computed style calculation。 减少选择器的复杂性 减少样式必须被计算的元素的个数 减少选择器的复杂性 减少样式必须 阅读全文
posted @ 2016-05-05 15:16
RachelChen
阅读(633)
评论(0)
推荐(0)
浙公网安备 33010602011771号