专栏首页女程序员的日常_Lin为什么我写动画那么卡?

为什么我写动画那么卡?

前提

1. 浏览器的两个主要线程

  • 主线程
  • 合成线程

2. 两条线程负责的事宜

  • 主线程:运行JS、计算HTML的CSS样式、页面的布局、将元素绘制到一个或多个位图中、将这些位图交给合成线程
  • 合成线程:通过GPU将位图绘制到屏幕上、通过主线程更新页面中可见部分的位图、计算出页面中哪部分是可见的、计算出哪部分即将变成可见的、当你滚动页面时将相应位置的元素移动到可视区域。

为什么会造成动画卡顿呢?

原因是主线程和合成线程调度不合理导致的。

当使用width、height、margin、padding作为transition的值时,会造成浏览器主线程的工作量较重。比如left:20px渲染到left:40px。主线程需要计算样式left:21px,left:22px,left:23px,一直到left:40px,而且每一次主线程计算样式后,合成进程都需要绘制到GPU然后再渲染到屏幕上。前后总共进行20次主线程的渲染,20次合成线程渲染,总共40次。

而如果使用transform的话,从transform:translate(0,0)到transform:translate(20px,0)。主线程只需要进行一次transform:translate(0,0)到transform:translate(20px,0),然后合成线程依次将0转换成20px。总共需要21次计算。

例子

从截图可以看出52fps,我们知道当fps大于60秒时候我们才不会感到卡顿,但是52fps必然会有卡顿的感觉。下面是各个阶段耗时:

其中有354ms在运行script,如果此时有其他的js需要执行呢,是不是就会造成阻塞?

另一种实现:

可以看到但使用这种方法时,fps是60,这样用户就没有卡顿的视觉感受了。

各个阶段耗时:

两个图对比,会发现 scripting相差巨大,使用transform各阶段耗时都大大减少。

还有就是使用的时候可以使用translate3d(40px,0,0);因为translat3d会弃用GPU加速。

当代码非常简单的时候,可能不会感觉有什么影响,但是当代码复杂,需要大量的计算时候,一点点的小小细节都是非常重要的。

参考:https://github.com/ljianshu/Blog/issues/51

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Event Loop(1)

    进程描述了CPU在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序。线程是进程中的更小单位,描述了执行一段指令所需的时间。

    用户3258338
  • HTTP

    http是一个计算机世界里专门在两点之前传输文字、图片、音频、视频等超文本数据的约定和规范。

    用户3258338
  • 温故知新-Event Loop (2)

    *注意:这种执行环境是浏览器环境、或者node 11版本及以上都是以上输出结果,node 11开始将event loop 的循环机制与js的保持一致了,所以要注...

    用户3258338
  • 写OC遇到的一个超级低级错误:

    AppCode提示: class method is called from instance context.

    望天
  • 智能算法 | 又一大进步,软件测试开销过大的问题这样解决!

    近年来,在软件开发过程中(如图一)据统计有50%的开销来自于测试环节。软件测试的主要目的是以最少的人力、物力和时间找出软件中潜在的各种缺陷和错误,通过...

    智能算法
  • C++中的左值和右值

    学C++时间也不短了,突然发现,还不知道左值和右值是什么,毕竟学C++不够系统,详细。

    种花家的奋斗兔
  • 【PAT乙级】科学计数法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • Excel公式技巧78:近似查找

    当我们在单元格E1中输入价格11.32时,使用经典的INDEX/MATCH函数组合,肯定能查到其对应的商品为“枕芯”。然而,如果输入的价格有一定的误差,例如正负...

    fanjy
  • 用有趣的方式解释梯度下降算法

    本文为3Blue1Brown神经网络课程讲解第二部分《Gradient descent, how neural networks learn 》的学习笔记,观看...

    统计学家
  • 大数据平台技术栈

    Flume是一个分布式的高可用的数据收集、聚集和移动的工具。通常用于从其他系统搜集数据,如web服务器产生的日志,通过Flume将日志写入到Hadoop的HDF...

    物流IT圈

扫码关注云+社区

领取腾讯云代金券