专栏首页女程序员的日常_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 条评论
登录 后参与评论

相关文章

  • 为什么我玩游戏那么卡?

    周末,我正在准备年度述职的PPT,女朋友在一旁打王者荣耀,突然她好像是越塔送了个人头,很不高兴的问我。

    Java3y
  • 为什么我总写 Bug ?

    写代码的过程中,难免会出现各种各样的 Bug。但实际上,很多 Bug 产生的原因是类似的。于是我总结了一些自己学编程时写 Bug 的诱因,希望大家引以为戒,在以...

    程序员鱼皮
  • 为什么我这条SQL执行那么慢?

    说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你“输入URL回车之后,究竟发生了什么”一样,看看你能说...

    Java3y
  • 我 JS 写的好好的,为什么要用那么复杂的TS

    本文写给那些完全没有用过TS,也没有使用过结构化语言,对TS有一定的心智负担的前端新手同学。

    Nealyang
  • 【动画】当我们在读写Socket时,我们究竟在读写什么?

    套接字socket是大多数程序员都非常熟悉的概念,它是计算机网络编程的基础,TCP/UDP收发消息都靠它。我们熟悉的web服务器底层依赖它,我们用到的MySQL...

    Java后端技术
  • 【动画】当我们在读写Socket时,我们究竟在读写什么?

    套接字socket是大多数程序员都非常熟悉的概念,它是计算机网络编程的基础,TCP/UDP收发消息都靠它。我们熟悉的web服务器底层依赖它,我们用到的MySQL...

    老钱
  • 为什么我要写spring.factories文件?

    在阅读spring-boot相关源码时,常常见到spring.factories文件,里面写了自动配置(AutoConfiguration)相关的类名,因此产生...

    HUC思梦
  • 我为什么要坚持写作?

    有一次看到一篇冯大辉(无码科技创始人)的一篇文章,下面有个人评论了对基因编辑的看法,冯大回复“你的认知大体上处于达克效应中愚昧山峰上坡的地方”,当时我并不懂什么...

    somenzz
  • 我为什么晚上写代码?

    摘要:作为一个有点追求的程序员,应该每天练习写代码,而夜深人静的时候,似乎比较合适,至少对我来说是这样。

    Fundebug
  • 我为什么没写《SpringCloud揭秘》?

    有人肯定纳闷儿, 我写了《Spring揭秘》, 又写《SpringBoot揭秘》,为啥单单没有写《SpringCloud》揭秘呢? 1

    扶墙老师
  • 说的那么好,我为什么还是不用SaaS?

    SaaS 软件即服务(Software as a Service),用户通常只需要浏览器即可使用软件,而无需在本地安装及托管数据。通俗来讲,就是把软件的开发、部...

    李英杰同学
  • Mongodb 缓存页结构, 为什么我那么快 (1)

    MONGODB 数据库写入和并发的速度,绝非是传统数据库可以比拟的,但到底为什么插入的速度这么快,和他的数据库引擎 wiredTiger 有关,那么就看看MON...

    AustinDatabases
  • 【漫画】为什么C盘太满系统会卡?

    假期的最后一天,二毛坐高铁回到了这座一不努力就要每天吃猪脚饭的城市,转乘地铁回到了租房里。

    程序IT圈
  • 为什么我要用C写游戏

    我就是这样一个与众不同的老顽固。最近所有由我单独完成的游戏项目完完全全都是用C写的。肯定没人这样干过,所以我觉得这值得我解释下为什么我要这样做。

    哲洛不闹
  • [译] 为什么我用 JavaScript 来编写 CSS

    三年来,我设计的 Web 应用程序都没有使用 .css 文件。作为替代,我用 JavaScript 编写了所有的 CSS。

    ConardLi
  • 我将为什么而坚持写作

    很多小伙伴会有写博客的冲动,尤其是写技术博客,或者说对文学感兴趣的去写小说。然而真的去坚持并且有结果的,很少。

    RobinsonZhang
  • 写给前端新人 - 我 JS 写的好好的,为什么要用那么复杂的TS

    本文写给那些完全没有用过TS,也没有使用过结构化语言,对TS有一定的心智负担的前端新手同学。

    zz_jesse
  • 为什么 CSS 动画比 JavaScript 高效?

    讲到动画,当然是非常有意思的啦,你可以往上滑一下,看看上面的封面图,是不是相当的炫酷,以为我是代码写出来的吗?

    小丞同学
  • 为什么编程那么难?是我脑子不行吗?

     “现在,导航到那个你希望程序在终端中打开的小文件夹。好的,下面需要在PATH文件夹中创建符号链接,但是,在我们创建之前,先使用nano ~/.bash_pro...

    用户1667431

扫码关注云+社区

领取腾讯云代金券