说说动画卡顿的解决方案

AlphaWatch 发布于2019-08-29 11:09 / 3299人阅读

摘要：动画卡顿解决方案前端时间用实现页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留后再缩小至顶部。参考文章深入浏览器理解和的性能问题解决动画卡顿的办法

CSS3 动画卡顿解决方案

前端时间用animation实现H5页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留700ms后再缩小至顶部。代码如下




    
    
    
    首页加载动画

在chrome上测试ok，但在提测给QA的时候发现部分机型，如华为，系统4.2，oppo系统5.1的出现卡顿情况。

百思不得其解，后来参考文章深入浏览器理解CSS animations 和 transitions的性能问题一文，将图片缩放中动画元素改成transform，如下

  @-webkit-keyframes imgSmall{
    0%{
        -webkit-transform:scale(1);
    }
    100%{
        -webkit-transform:scale(.465);
    }
  }

果然啊，卡顿问题解决了。

文章深入浏览器理解CSS animations 和 transitions的性能问题是这么解释的，现代的浏览器通常会有两个重要的执行线程，这2个线程协同工作来渲染一个网页：主线程和合成线程。

一般情况下，主线程负责：运行JavaScript；计算HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。

相应地，合成线程负责：通过 GPU将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。

假设我们要一个元素的height从 100 px 变成 200 px，就像这样：

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

主线程和合成线程将按照下面的流程图执行相应的操作。注意在橘黄色方框的操作可能会比较耗时，在蓝色框中的操作是比较快速的。

而使用transform:scale实现

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}

div:hover {
    transform: scale(1.0);
}

此时流程如下：

也就是说，使用transform,浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给GPU去处理。之后，浏览器不需要再做任何布局、绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。

为了从数量级上去证实这个理论，我打开chrome的Timeline查看页面FPS

其中，当用height做动画元素时，在切换过程的FPS只有44，我们知道每秒60帧是最适合人眼的交互，小于60，人眼能明显感觉到，这就是为什么卡顿的原因。

rendering和painting所花的时间如下：

再来看看用transform:scale

FPS达到66，且rendering和painting时间减少了3倍。

到此为止问题是解决了，隔了几天，看到一篇解决Chrome动画”卡顿”的办法，发现还能通过开启硬件加速的方式优化动画，于是又试了一遍。

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

惊人的事情发生了，FPS达到72：

总结解决CSS3动画卡顿方案

尽量使用transform当成动画熟悉，避免使用height,width,margin,padding等；

要求较高时，可以开启浏览器开启GPU硬件加速。

参考文章

深入浏览器理解CSS animations 和 transitions的性能问题

解决Chrome动画”卡顿”的办法

云服务器 GPU云服务器服务器卡顿解决方案彻底解决红米手机卡顿发表说说的js代码阿里云服务器卡顿怎么解决

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111461.html

说说动画卡顿的解决方案

摘要：动画卡顿解决方案前端时间用实现页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留后再缩小至顶部。参考文章深入浏览器理解和的性能问题解决动画卡顿的办法 CSS3 动画卡顿解决方案前端时间用animation实现H5页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留700ms后再缩小至顶部。代码如下 ...

时飞 2019-08-20 10:30 评论0 收藏0
白鹭引擎王泽：重度H5游戏性能优化技巧标题的文章

摘要：据不完全统计，这五年中，白鹭引擎累计运转的游戏和微信小游戏的流水数据约为亿。我们的引擎架构师做某一沙龙活动的演讲速记，纯纯的干货，分享给大家。王泽：各位开发者下午好！我叫王泽，是白鹭引擎的首席架构师。今天给大家分享的题目是《重度H5游戏性能优化技巧》。之所以决定用这个题目，是因为我最近几周在广深一带拜访了很多使用白鹭引擎的开发者，发现特别是在广州一带，大部分开发者都在做重度H5游...

xbynet 2019-08-23 12:12 评论0 收藏0
flip你的动画

摘要：如果你看到我的前一篇文章一篇文章说清浏览器解析和动画优化，理解本篇文章还是很简单的。，元素的终止状态。这会打断正在运行的动画，这是糟糕的。关键是确保你的预计算在用户响应的空闲时间执行，这样两个动画就不会冲突了。在vue官方文档上看到vue使用flip做动画，就去研究了一下。这是一个准则，协调js和css对动画的操作。如果你看到我的前一篇文章一篇文章说清浏览器解析和CSS（GPU）动画...

vibiu 2019-08-29 12:19 评论0 收藏0