如何写出高性能的CSS3动画菜鸟攻略_css3动画基础指南

小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?
我们从浏览器内部去理解下JS是单线程的,但是浏览器可以开启多个线程,渲染一个网页需要两个重要的线程来共同完成:Main Thread 主

如何写出高性能的CSS3动画菜鸟攻略

小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?

如何写出高性能的CSS3动画菜鸟攻略_css3动画基础指南

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

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

主线程的工作: 

绘制线程的工作: 

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

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

GPU 在如下方面很快: 

关于两张图的正题来了

PS: 橙色方框的操作比较耗时,绿色方框的操作比较快速_  

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

div:hover {
    height: 200px;
}

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

如何写出高性能的CSS3动画菜鸟攻略_css3动画基础指南

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

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

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

使用 transform 属性的动画

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

流程图如下

如何写出高性能的CSS3动画菜鸟攻略_css3动画基础指南

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

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

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

chrome中执行对比

把上面的demo代码在浏览器中执行下看下效果,demo地址:http://ccforward.github.io/demos/css/animation.html

海计划公众号
(0)
上一篇 2020/04/06 04:09
下一篇 2020/04/06 04:09

您可能感兴趣的内容

  • vConsole菜鸟教程vue移动端调试_调试基础指南

    当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成,之后才在手机端测试,如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面,经过调试之后还要重新发包。当然还有更加奇怪的现象,由于手机浏览器和Web

    2020/03/26
  • Emmet菜鸟教程_一款编辑器插件,支持多种编辑器支持

    Emmet菜鸟教程 官方网址:https://emmet.io/ GitHub:https://github.com/emmetio 简介描述:一款编辑器插件,支持多种编辑器支持 …

    2020/03/12
  • 8个Python爬虫框架小白知识_爬虫入门基础

    小编收集了一些较为高效的Python爬虫框架。分享给大家。1.ScrapyScrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架。 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中。用这个框架可以轻松爬下来如亚马逊商品信息之类的数据。项目地址:https://scrapy.org/2.PySpiderpyspider 是一个用pyt

    2020/03/24
  • bootstrap组件有哪些?bootstrap常用组件推荐基础教程_bootstrap菜鸟指南

    这篇文章主要整理bootstrap中常用的组件,比如:表格、表单验证、文件上传、加载效果、复选下拉框、时间组件、弹出框等。bootstrap表格组件 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的。Bootstrap Table它是开源的,我们直接进到它的源码里面git下来就好了。Bootstrap Tab

    2020/04/05
  • Axios中的取消请求源码解析入门教程_源码基础知识

    前言在开发中,为了活动动态数据,因此我们需要与后台通过请求进行交互,获取动态数据来展现给用户看。有些一些网站对实时信息要求还更高,比如股票类、聊天类、直播类等。本章内容涉及思想层面东西比较多,如果出现知识盲点无所谓,主要就是体会Promise的运用思想!思想!思想!(小白也可以试试)当下流行的http库http库在当下作为请求交互来说,是比较主流的,今天就给

    2020/03/20
  • 三大Web服务器对比分析(apache ,lighttpd,nginx)基础入门_服务器基础入门

    一、软件介绍(apache lighttpd nginx)1、lighttpdLighttpd是一个具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模块等特点。lighttpd是众多OpenSource轻量级的web server中较为优秀的一个。支持FastCGI, CGI, Auth, 输出压缩(output compress), URL重写

    2020/03/30
  • JavaScript 异常指南攻略_异常攻略教程

    JavaScript 错误 – Throw 和 Try to Catchtry 语句使您能够测试代码块中的错误。catch 语句允许您处理错误。throw 语句允许您创建自定义错误。finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。错误总会发生!当执行 JavaScript 代码时,会发生各种错误。错误可能是程序员的编码错误,

    2020/03/23
  • 移动端尺寸基础知识使用指南_移动端基础入门

    初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。现象首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×85

    2020/03/31
  • Mpx入门百科_滴滴开源小程序框架

    Mpx入门百科 官方网址:https://didi.github.io/mpx GitHub:https://github.com/didi/mpx 简介描述:滴滴开源小程序框架 …

    2020/03/06
  • 男生怎样做容易追到女生,帮你快速追上女神基础知识入门_福利菜鸟教程下载

    小编教你快速追上你的女神。一起来学习一下吧!首先,在你决定追女生之前先要确认她有没有男朋友然后还要了解女生的星座、爱好、三围、喜欢的偶像以及喜欢吃些什么等问题调查完之后就开始追记住一定要做到三点坚持不要脸坚持不要脸这些事情完成后,就开始去追吧!1制造偶遇 ​从她身边的人下手。收拢她的好朋友,知道她随时爱去哪里,来制造偶遇.2.帮助她解决生活中的一些事情

    2020/03/23
  • jBox入门指南_模态框、提示、通知的 jQuery 插件

    jBox入门指南 官方网址:https://stephanwagner.me/jBox GitHub:https://github.com/StephanWagner/jBox 简…

    2020/03/11
  • Logaster菜鸟知识_在线免费创建简单logo及名片设计

    Logaster菜鸟知识 官方网址:https://www.logaster.cn/ 简介描述:在线免费创建简单logo及名片设计 Logaster 是一个专业的在线LOGO图标制…

    2020/03/10
  • Tina.js小白知识_一款轻巧的渐进式微信小程序框架

    Tina.js小白知识 官方网址:https://tina.js.org GitHub:https://github.com/tinajs/tina 简介描述:一款轻巧的渐进式微信…

    2020/03/11
  • HTTP请求过程入门指南_请求新手入门

    一次完整的HTTP请求过程当我们在web浏览器的地址栏中输入: www.baidu.com,然后回车,到底发生了什么过程概览1.对www.baidu.com这个网址进行DNS域名解析,得到对应的IP地址2.根据这个IP,找到对应的服务器,发起TCP的三次握手3.建立TCP连接后发起HTTP请求4.服务器响应HTTP请求,浏览器得到html代码5.浏览器解析h

    2020/03/26
  • 在vue里使用codemirror的两种用法小白攻略_用法使用攻略

    这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能。代码显示这里用的是vue-codemirror插件。第一种用法:1、安装:npm install vue-codemirror –save2、在main.js中引入import VueCodeMirror from ‘vue-codemirror’
    import ‘codemirror/li

    2020/03/26
  • 装饰器模式在React中实际使用场景入门百科_模式入门教程

    首先简要的介绍一下问题,我们公司大部分项目都是使用umi+Ant Design Pro 构建(下面的Pro都指代它),因为场景的不同,我们总是要根据不同的场景区分和抽离布局组件,在Pro中的layouts文件夹里面已经为我们提供了不同场景的布局组件。大部分页面包含了通用的导航、侧边栏、顶部通知、页面标题等元素,这时候我们会使用BasicLayout作为布局组

    2020/03/26