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 ...
随机推荐
- rpm管理环境包和代码包
Author: JinDate: 20140610System: CentOS release 6.5 (Final) 06-09-2014c零:问题配置文件问题,不打包使用的配置文件参考配置文件后缀 ...
- 小程序swiper 快速滑动闪屏
bindchange: function(e){ if(e.detail.source == "touch") { this.setData({ current: current ...
- 浏览器数据库IndexedDB介绍
摘要 在移动端H5页面开发的时候,为了更好的提高用户体验,可以对不常变化的数据做浏览器端数据缓存,在用户打开页面的时候,首先加载本地的数据,然后异步请求服务端,更新数据.在移动端webview中,可以 ...
- MVC使用TempData跨控制器传递信息而无需记住key的名称
通常情况下,使用TempData需要记住key的名称,本篇体验:通过帮助类,实现对TempData的设置.获取.删除. 关于传递信息的类: namespace MvcApplication1.Mode ...
- 配置使用ldap中碰到的各种问题 --- 吐血
1. LDAP Result Code 50 "Insufficient Access Rights" : 权限的问题: 解决: 使用docker部署吧, 看我其他的博客
- SHA加密算法工具类
1.利用Apache的工具类实现加密: maven: <dependency> <groupId>commons-codec</groupId> <artif ...
- memcpy实现
typedef unsigned int size_t; void * my_memcpy ( void *dest, const void *src, size_t num ) { void* re ...
- Sequential projection learning for hashing阅读笔记
真不能再挖坑了,前面挖聊很多坑都没来得及填,从今往后,能写多少就是多少.Sequential projection learning for hashing这篇文章去年就阅读了,当时阅读完没来得及做笔 ...
- nginx: [emerg] "proxy_cache_path" directive is not allowed here in /usr/local/nginx/conf/nginx.conf:43
1.它只能使用于http{ }部分,把proxy_cache_path放置于http部分即可解决此问题.注意图示的上下文
- 在Java程序中使用Hibernate
Hibernate是一种ORM框架,ORM全称为Object-Relative Database-Mapping,在Java对象与关系数据库之间建立某种映射,以实现直接存取Java对象(一般为实体类) ...