-webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅
2023-09-11 14:14:59 时间
前段时间,依照美拍的视频效果写了一个效果类似的网页版的动画。
电脑上安装了三种浏览器:IE、Chrome、Firefox。分别作了測试,结果显示Chrome在这方面的渲染效果最差。常常出现卡顿现象。ff表现最好。
一直百思不得其解,尤其是之前使用canvas标签做图片滤镜效果,chrome浏览器竟然显示不了滤镜效果。然而其它浏览器均能正常显示,大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么...
昨天和高人聊天,说道这个情况,他说道了transform:translate3d(0,0,0)能够触发硬件加速。然后楼主今天就百度了一下这个CSS3提供的3D效果,果然这个属性都会开启GPU硬件加速模式。从而让浏览器在渲染动画时从CPU转向GPU。
于是乎。楼主今天给文件中加入了例如以下代码:
<span style="white-space:pre"> </span>transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; -webkit-perspective:1000; -moz-backface-visibility:hidden; -moz-perspective:1000; backface-visibility:hidden; perspective:1000;然后利用Chrome的developer Tools 中的Timeline工具。检測整个动画执行性能參数。为了做到最好的对照效果,先測试了改进后的版本号,然后再測未改进版本号的,以防止因为缓存来带的影响。先測试改进版的页面。图片会缓存,这样子再測未改进版本号的,仅仅能说对未改进版本号的更有利,这种情况下进行对照。反而更能说明问题,哈哈。
改进版本号參数:
未改进參数:
未改进版本号的fps(每秒传输帧数。值越高画面就越流畅)一半多的时间都是小于30fps,而改进后的动画fps基本都超过60fps,楼主自己去围观动画效果,也发现了明显的改进。Chrome浏览器的不流畅效果得到极大的改进。当然对于整个效果。楼主CSS3与jQ动画结合使用,jQ的动画效果比不上CSS3。所以等楼主进一步改进,用强大的CSS3来完毕整个动画效果。应该就会棒棒哒~
相关文章
- Java+FlashWavRecorder实现网页录音并上传
- 网页版jupyter没有智能提示怎么办?只需两个步骤即可帮你解决!
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- PHP抓取网页获取特定信息
- jsoup抓取网页+具体解说
- 【Vue/html】如何解决csdn下载网页后打开自动跳转登陆的问题(已解决)
- 13EasyUI 布局- 为网页创建边框布局
- 网页导航的动画效果
- 如何不用 transition 和 animation 也能做网页动画
- Java网页数据采集器[下篇-数据查询]【转载】
- 《秩序之美——网页中的网格设计》——导读
- 《HTML5+CSS3网页设计入门必读》——6.3 调整字体
- 手把手教你快应用接入微信H5网页支付
- 如何测试一个网页登陆界面
- 应用市场快速下载以及网页端调起APP页面研究与实现
- iOS 9.3曝出新漏洞:打开网页链接导致应用崩溃