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 ...
随机推荐
- js异步任务处理方式
一.es6(es2015)之前:使用原始的callback函数,会陷入回掉地域 this.$http.jsonp('/login', (res) => { this.$http.jsonp('/ ...
- OllyDbg 使用笔记 （十二）
OllyDbg 使用笔记 (十二) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 演示样例程序下载地址:http://pan.baidu.com/s/1eQiV6aI 安装好程序 ...
- [Javascript]XMLHttpRequest对象实现下载进度条
摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...
- ubuntu 键盘布局修改
键盘打不出 | 符号 sudo dpkg-reconfigure keyboard-configuration 改为标准的罗技键盘
- Asp.net FileUpload+Image制作头像效果
在Web开发中会经常使用到个人信息注册,而个人信息中通常需要自己的头像或者照片.今天主要介绍一下使用FileUpload+img控件上传照片. FileUpLoad控件使用介绍 FileUpLoad控 ...
- Facebook 工程师是如何高效工作的？
编者按:Facebook 的工程师有哪些高效工作的经验呢?软件工程师访谈了多位 Facebook 的高产工程师,总结了他们的共同经验以及晋级之路,供各位参考. 成为高效开发者这件事你可以通过经验.书本 ...
- [转]C++之运算符重载(1)
在前一节中曾提到过,C++中运行时的多态性主要是通过虚函数来实现的,而编译时的多态性是由函数重载和运算符重载来实现的.这一系列我将主要讲解C++中有关运算符重载方面的内容.在每一个系列讲解之前,都会有 ...
- sudo：抱歉，您必须拥有一个终端来执行 sudo 解决办法；ssh执行sudo命令的方法；给用户增加sudo免密权限
1.supervisor使用sudo执行命令的时候,报错 2.解决办法: 编辑 /etc/sudoers 文件,将Default requiretty注释掉. sudo vim /etc/sudoer ...
- [转载] java的书
1. Java 语言基础 谈到Java 语言基础学习的书籍,大家肯定会推荐Bruce Eckel 的<Thinking in Java >.它是一本写的相当深刻的技术书籍,Java 语言基 ...
- 使用FastDateFormat来代替JDK自带的DateFormat
之前一直使用SimpleDateFormat来做Date到String的类型转换,现建议使用apache commons-lang3中的FastDateFormat. 因为JDK里自带的SimpleD ...