CSS开启硬件加速来提高网站性能
CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。
那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。
现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,
最显著的特征的元素的3D变换。
例如:
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(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 */
}
在webkit内核的浏览器中,另一个行之有效的方法是
.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 */
}
原生的移动端应用(Native mobile applications)总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。
硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用(注:移动端本身资源有限)。
总结
只对我们需要实现动画效果的元素应用以上方法,如果仅仅为了开启硬件加速而随便乱用,那是不明智的。
小心使用这些方法,如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。
使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
个人微信公众号Yopai,喜欢的可以关注哦!!
CSS开启硬件加速来提高网站性能的更多相关文章
- 用CSS开启硬件加速来提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...
- 用CSS开启硬件加速来提高网站性能(转)
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...
- 使用css来开启硬件加速来提高网站性能
一.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器,这样就可以使得animation与transition更加顺畅.我们可以在浏览器中用css开启硬件加速 ...
- CSS开启硬件加速提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/i ...
- CSS开启硬件加速 hardware accelerated
作者:孙志勇 微博 日期:2016年12月6日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...
- 提高网站性能的 5 个 Grunt任务//////////////////z
提高网站性能的 5 个 Grunt任务 时间 2015-03-06 09:13:02 极客头条 原文 http://hugnew.com/wordpress/提高网站性能的-5-个-grunt任务 ...
- css实现硬件加速
原文请点击一下链接: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-c ...
- PHP提高网站性能的一些方法
前段时间面试问到了这个问题,回答的不是很全面,就去问了度娘,得到了一些比较全的答案,由于出处较多就没法确定原文出处了.下面是分享的答案. 一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量 ...
- 利用 squid 反向代理提高网站性能(转载)
本文在介绍 squid 反向代理的工作原理的基础上,指出反向代理技术在提高网站访问速度,增强网站可用性.安全性方面有很好的用途.作者在具体的实验环境下,利用 DNS 轮询和 Squid 反向代理技术, ...
随机推荐
- maven_nexus私服搭建
搭建很简单,但是新版本运行方式有所区别,于此记录一下: 1.下载程序包:http://www.sonatype.org/nexus/downloads/ 官网比较慢,下了一小时.期间在csdn花了一积 ...
- 简单DI
<?php class DI { private $container; public function set($key, $obj, ...$args) { $this->contai ...
- request - cookie操作(二)
from urllib import request,parsefrom http.cookiejar import CookieJarheaders = { "User-Agent&quo ...
- 【Flink】深入理解Flink-On-Yarn模式
1. 前言 Flink提供了两种在yarn上运行的模式,分别为Session-Cluster和Per-Job-Cluster模式,本文分析两种模式及启动流程. 下图展示了Flink-On-Yarn模式 ...
- C++ hdu 例题:不要62 题解
例题:不要62 同步数位DP 需要统计区间[l,r]的满足题意的数的个数,这往往可以转换成求[0,r]-[0,l) 基本思想与方法 有了上述性质,我们就可以从高到低枚举第一次<n对应位是哪一位. ...
- 装饰器&递归
装饰器 1.开放封闭原则 在源码不改变的情况下,增加一些额外的功能 对扩展是开放的,对修改是封闭的 1.1 开放原则:增加额外新功能 1.2 封闭原则:不要改变源码 2 装饰器 满足开放封闭原则, ...
- 走进python
python史 1.python之父 Guido van Rossum 2.python的优缺点 优点:开发效率高,可跨平台,可嵌入,可扩展,优雅简洁 缺点:运行稍慢,代码不能加密,不能实现真正的多线 ...
- 01(a)一元函数_多元函数_无约束极值问题的求解
1. 一元函数的极值问题 (函数光滑) 对于一个一元函数$f(x)$,怎么才能找出它的极值呢? 1.1根据定义:如果存在一点${{x}_{0}}$,在点${{x}_{0}}$的某个领域$U({{x} ...
- C#语言注释详解
C#语言注释有三种形式 C#语言注释有三种形式 第一种是多行注释: /* */ 例如: /* int a=1; int b=2; int c=3; */// 第二种是单行注释: 例如: // int ...
- C#中的委托和事件(上篇)
每一个初学C#的程序猿,在刚刚碰到委托和事件的概念时,估计都是望而却步,茫然摸不到头脑的.百度一搜,关于概念介绍的文章大把大把的,当然也不乏深入浅出的好文章.可看完这些文章,大多数新手,估计也只是信心 ...