CSS3 GPU硬件加速
1、代码（未添加GPU加速代码）
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
} @-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
2、代码（添加GPU加速代码）
-webkit-transform: translateZ(0)
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg) translateZ(0);
opacity: 0; }
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
} @-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg) translateZ(0);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
3、代码（添加GPU加速代码）
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg) translateZ(0);
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
总结：好像没有什么大的优化，渲染和绘制时间差的不多。需要继续研究。
附：timeline用法
CSS3 GPU硬件加速的更多相关文章
- 使用CSS3开启GPU硬件加速提升网站动画渲染性能
遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...
- GPU硬件加速原理 /转
现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...
- GPU硬件加速
现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...
- [IE9] GPU硬件加速
IE9 的一个重大改进就是使用了GPU硬件加速来渲染网页. 那么GPU硬件加速到底能够带来多大的性能提升? 你可以在IE的测试案例网站(http://ie.microsoft.com/testdr ...
- GPU硬件加速相关
从android3.0开始,2D渲染开始支持硬件加速,即在view的Canvas上的绘图操作可以用GPU来加速. 硬件加速会使app消耗更多的内存. 如果配置文件中,Target API level ...
- CSS3开启硬件加速
{ transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...
- Android 显示系统：飞思卡尔平台图形界面与GPU硬件加速
图形是Android平台中的一个大主题,包含java/jni图形框架和2d/3d图形引擎(skia.OpenGL-ES.renderscript). 本文档描述了飞思卡尔设备上的一般Android图形 ...
- javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- Minimit Anima – 硬件加速的 CSS3 动画插件
Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...
随机推荐
- 使用Chrome快速实现数据的抓取（五）—— puppeteer
如果要以自动化的方式驱动Chrome进行数据抓取,必须实现Chrome Dev Protocol协议的客户端.这个协议本身并不复杂,我在之前的文章中也简单的介绍过一下. Google本身有一个Node ...
- POJ 2104 && POJ 2761 (静态区间第k大，主席树)
查询区间第K大,而且没有修改. 使用划分树是可以做的. 作为主席树的入门题,感觉太神奇了,Orz /* *********************************************** ...
- XDM、GDM和KDM
XDM.GDM.KDM是三种X Window的显示管理器 (1)XDM(默认的X Window System Display Manager)(2)GDM(gnome提供的Display Manage ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...
- 报错：405 Method Not Allowed
出现错误的原因是:静态文件不能通过post方式访问. 解决办法:改成用get方式访问.
- Git 学习（四）操作修改和版本穿梭
Git 学习(四)操作修改和版本穿梭 之前的章节,已介绍了本地Git库创建.暂存区增.删.改,以及提交版本库:可回顾下命令操作: git add 和 git commit. 光有之前章节的操作,Git ...
- Cocos2dx 3.0 过渡篇（二十七）C++11多线程std::thread的简单使用(下)
本篇接上篇继续讲:上篇传送门:http://blog.csdn.net/star530/article/details/24186783 简单的东西我都说的几乎相同了,想挖点深的差点把自己给填进去. ...
- Java – Top 5 Exception Handling Coding Practices to Avoid
This article represents top 5 coding practices related with Java exception handling that you may wan ...
- iOS：NSDate的主要几种时间形式
NSDate:时间的获取和操作 1.获取当前时间 //获取当前日期 NSDate *date = sender.date; NSLog(@"%@",date); 2.将date转换 ...
- 混沌数学之Baker模型
相关DEMO参见:混沌数学之离散点集图形DEMO 相关代码: // http://wenku.baidu.com/view/ac9b57ea172ded630b1cb65b.html class Ba ...