关于CSS3动画性能

前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了。

但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作。

通过了几年的努力和累积,总算是把信心给拿回来了。

这不,又踏上我的追求之路了。我真心是希望这是我最后一次换工作了。

阿门,愿主保佑我...

那个...好像废话说得有点多了。OK,正题时间。

是这样,面试的时候,技术官问了我一个问题,引发了我的深思~那就是CSS动画的效率问题。

这个...因为之前接触移动项目只有约1年的时间,当时对移动前端开发性能研究还没触及这一块...

唉,没办法,初次接触移动项目,问题难免多多,而且当时连动画都用得不多,何况是动画性能的研究...

所以,作为一个老实人,我如实回答了...(当然后面还有一些问题我也失水准了,以至于这一次面试我感觉十有八九是要挂了...)

面试挂了就挂了,咱解决问题的心不能凉啊~(周围众人抛来不满的表情:你小样又在说废话了...- -b)

于是各种资料查找,找到了两篇相关的文章:

http://www.w3cfuns.com/article-5598175-1-1.html

http://www.cnblogs.com/PeunZhang/p/3510083.html

目前对提升移动端CSS3动画体验的主要方法有几点:

1.在桌面端和移动端用CSS开启硬件加速

我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能。

当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。

.cube {
   -webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5);
}

如果我们不需要对元素进行3D变换,又想启动硬件加速,可以用下面的小技巧来诱使浏览器启动硬件加速。

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

使用transform: translateZ(0),不会对元素进行3D变换,但一样可以触发硬件加速。

同理,也可以使用下面的做法:

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

通过使用translate3d制作的位移动画流畅度会明显优于使用left,right,top,bottom等属性。

但这种做法同时也增加了内存的使用,而且它会加快移动端设备的电池消耗。

2.尽可能少的使用box-shadows与gradients

box-shadows(阴影)与gradients(渐变)往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。

3.尽可能的让动画元素不在文档流中,以减少重排

方法很简单,直接在动画元素上使用

position: fixed;

或者

position: absolute;
时间: 2024-10-16 13:48:12

关于CSS3动画性能的相关文章

WEB 移动端 CSS3动画性能 优化

很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显的效果: opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0); 这三个属性选其中一个放在要使用动画的元素中即可,很多时候你使用了-webkit-transform: 这个属性做了其

被解放的GPU CSS3动画加速

概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器,但是在性能上往往低于那些独立显卡. 按照类型来分,可以分为独立显卡GPU和集成绘图GPU. 独立显卡GPU 性能最高的一类绘图处理器是通过PCI-Express.PCI或AGP等扩展槽界面与主板连接的,而通常它们可以相对容易地被取代或升级(假设主板能支持升级).现在,仍然有少数显卡采用带宽有限的P

关于JS动画和CSS3动画的性能差异

本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread.如果CSS动画只是改变transforms和opacity,这时整个CSS动画得以在compositor thread完成(而JS动画则会在main thread执行,然后触发compositor进行下一步操作)在JS执行一些昂贵的任务时,main thread繁忙,CSS动画由于使用了compositor thread可以保持流畅,可

css3动画的性能优化

目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性: 原因是

CSS3动画(性能篇)

写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况. 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方

CSS3 动画卡顿性能优化解决方案--摘抄

最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了,但是遇到了CSS3动画渲染的性能问题,所以我也是被逼的,再回过头来从浏览器渲染网页的流程出发,去找动画卡顿的症结. 浏览器渲染网页的流程如下: 使用 HTML 创建文档对象模型(DOM) 使用 CSS 创建 CSS 对象模型(CSSOM) 基于 DOM 和 CSS

高性能 CSS3 动画

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况. 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方案:CSS

如何解决安卓(系统版本低) CSS3 动画问题---高性能动画

目前对提升移动端CSS3动画体验的主要方法有几点: 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack: -webkit-bac

CSS3动画那么强,requestAnimationFrame还有毛线用?

一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多指教! .... 咳咳,大家不要一副不屑的样子嘛.跟你讲,我可是很有用的.所谓人如其名,看我名字这么长,表意为"请求动画帧",明摆着一副很屌的样子! ....按照这种说法,"樱桃小丸子"就是樱桃做的丸子咯,恩,看脑袋确实蛮像的~ .... 想到明天就是国庆大假,今天我就