两张图解释CSS动画的性能

时间: 2019-05-15阅读: 42标签: 动画

在手机上使用CSS动画时很多时候会感到卡顿,然后网上很多教程说开启GPU加速 transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?


我们从浏览器内部去理解下

JS是单线程的,但是浏览器可以开启多个线程,渲染一个网页需要两个重要的线程来共同完成:

  • Main Thread 主线程
  • Compositor Thread 绘制线程(我自己翻译的)

主线程的工作:

  1. 运行JS
  2. 计算 HTML 元素的 CSS 样式
  3. 布局页面
  4. 将元素绘制到一个或多个位图中
  5. 把这些位图交给 Compositor Thread 来处理

绘制线程的工作:

  1. 通过 GPU 将位图绘制到屏幕上
  2. 通知主线程去更新页面中可见或即将可见的部分的位图
  3. 计算出页面中那些部分是可见的
  4. 计算出在滚动页面时候,页面中哪些部分是即将可见的
  5. 滚动页面时将相应位置的元素移动到可视区

我们知道如果长时间的执行 JS 会阻塞主线程,页面就会出现各种的卡顿。

而绘制线程会尽量的去响应用户的交互,页面发生变化时,绘制线程会以每秒60帧(因为每秒60帧是最适合人眼的交互,小于60就会明显感觉到卡顿了)的间隔不断重绘页面。

GPU 在如下方面很快:

  • 绘制位图到屏幕上
  • 可不断的绘制相同的位图
  • 将同一位图进行位移、旋转、缩放 (就是动画)

但是在将位图加载到GPU内存中有点慢


关于两张图的正题来了

PS: 橙色方框的操作比较耗时,绿色方框的操作比较快速
div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

一个从 height: 100px 到 height: 200px 的动画按照下面的流程图来执行各种操作


图中有那么多的橙色方框,浏览器会做大量的计算,动画就会卡顿。

因为每一帧的变化浏览器都在进行布局、绘制、把新的位图交给 GPU 内存(这恰好是我们上面提到的GPU的短板)

虽然只改变元素高度但是很可能要同步改变他的子元素的大小,那浏览器就要重新计算布局,计算完后主线程再来重新生成该元素的位图。


使用 transform 属性的动画

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

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

流程图如下


很明显,这么少的橙色方框,动画肯定会流畅。

因为 transform 属性不会改变自己和他周围元素的布局,他会对元素的整体产生影响。

因此,浏览器只需要一次生成这个元素的位图,然后动画开始时候交给 GPU 来处理他最擅长的位移、旋转、缩放等操作。这就解放了浏览器不再去做各种的布局、绘制等操作。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9030

CSS中过渡与动画的区别有哪些?

过度是在动画基础上增加的,作用是如何实施动画,比如一个div从一个地方到另一个地方,设置时长,是匀速前进,或者从快到慢等,这种就是过渡。

css3动画添加间隔

因项目需要,需要在元素上实现动画效果,并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。在网上找了很多方法,最终的方法基本都是改动画规则

css3支持动画吗?

CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面。

用JavaScript 实现酷炫的粒子追踪动画

你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力,而同时又在后台加载一些数据呢?幸运的是,没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程

css3中动画有哪些属性?

通过CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。那么在CSS中动画属性有哪些?

使用jquery封装的动画脚本(无动画、css3动画、js动画)

自己封装好的showhide.js包含无动画、css3动画、js动画,包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlideUpDown(淡入淡出+上下滑动) fadeSlideLeftRight (淡入淡出+左右滑动)

10个常用的CSS动画库

Animista是一个在线动画生成器,同时也是一个动画库,它为我们提供了以下功能,我们可以选择想要的动画类型(例如entrance/exist),除了可以选择某个动画(例如,scale-in)外

css3动画怎么停止?

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 \\\"from\\\" 和 \\\"to\\\",等同于 0% 和 100%。

深入理解requestAnimationFrame的动画循环

requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms

Js HTML DOM动画

为了演示如何通过 JavaScript 来创建 HTML 动画,我们将使用一张简单的网页:JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。这种变化通过一个计数器来调用。当计数器间隔很小时,动画看上去就是连贯的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广