http://www.cnblogs.com/PeunZhang/p/3510083.html
你知道我们可以在浏览器中用css开启硬件加速,使GPU (
Graphics Processing Unit) 发挥功能,从而提升性能吗?
现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。
在桌面端和移动端用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可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
你有在项目中使用过这些方法吗?如果有,请分享你的精彩案例吧。
作者:白树
出处:http://peunzhang.cnblogs.com/
分享到:
相关推荐
**CSS3开启硬件加速的使用和坑** 在前端开发中,CSS3的硬件加速能够显著提升页面动画的性能,尤其是在移动设备上。然而,如果不合理使用,也会带来一些副作用。本文将详细介绍如何开启CSS3硬件加速,以及需要注意的...
在CSS中,可以通过开启`translate3d(0, 0, 0)`、`transform: translateZ(0)`或`will-change`属性来触发硬件加速。在滑块组件中,这些技术可以用于平滑地移动图片或内容,确保滑动效果丝般顺滑。 接下来,HTML5在这...
标题中的问题“为什么IE9浏览器无法开启GPU硬件加速”涉及到的是浏览器性能优化的一个关键特性——GPU硬件加速。GPU(图形处理单元)硬件加速是现代浏览器为了提升网页渲染速度和提高用户体验而采用的技术,尤其是在...
本文将深入探讨如何在移动端实现高性能的CSS3动画,并开启GPU加速。 首先,了解移动端开发面临的挑战至关重要。在移动设备上,我们需要考虑流量、功耗以及流畅度。流畅度直接影响到动画的视觉感受,而流量和功耗则...
示例中提到的使用transform属性中的translate3d来控制元素的位置,这比直接改变top属性的方式更佳,因为它可以开启硬件加速,提高动画性能,同时避免页面的重排和重绘,从而减少性能开销。 在上面的代码片段中,...
4. 利用硬件加速:通过设置`transform: translateZ(0)`或`backface-visibility: hidden`,可以开启GPU加速,将动画工作从CPU转移到GPU,显著提升性能。 5. 组合动画:Repaintless.css可能将多个动画组合在一起,...
此外,也可以尝试开启硬件加速,通过添加`transform: translateZ(0)`或者`backface-visibility: hidden`来强制浏览器使用GPU进行渲染。 为了实现抛物线轨迹,我们需要计算物体的初始位置、结束位置以及运动路径。这...
AgentWeb和VasSonic是两个在Android应用开发中用于优化...开发者可以参考这个示例代码来学习如何在自己的应用中实现H5首页的加速。通过阅读和理解代码,可以更好地理解这两个工具的使用方法,并将其应用到实际开发中。
3. CSS3硬件加速:通过开启`translateZ(0)`或者`will-change`属性,利用GPU加速渲染,提升动画性能。 总结,CSS3图文轮播弹性切换特效结合了CSS3的关键帧动画、过渡、变换、Flexbox布局等特性,实现了无JavaScript...
1. **启用硬件加速**:在应用的AndroidManifest.xml中,为相应的Activity添加`android:hardwareAccelerated="true"`属性,这将开启硬件加速,提高WebView性能。 2. **禁用JavaScript缓存**:在某些情况下,禁用缓存...
此外,为了使动画更加平滑,我们还需要开启硬件加速。这可以通过在元素上设置`will-change`属性或者使用`transform: translateZ(0)`来实现。硬件加速可以利用GPU来处理复杂的动画,提高性能并减少浏览器的渲染压力。...
未来的优化趋势将更加注重软硬件协同优化,例如进一步优化纹理内存管理、利用GPU加速等手段来提升整体性能。同时,通过深入分析前端代码,可以更有针对性地进行渲染内核或WebView层面的优化。 #### 结论 页面滚动...
此外,为了使翻转动画平滑,我们需要开启硬件加速。这可以通过在父元素上设置`backface-visibility: hidden;`和`-webkit-backface-visibility: hidden;`(针对旧版Webkit浏览器)来实现。这两个属性告诉浏览器在不...
另外,CSS3硬件加速特性如`transform`和`opacity`也可以帮助提高动画性能。 7. **可扩展性与二次修改** 这个火焰燃烧特效的代码设计应该是模块化和可扩展的,使得有能力的开发者可以轻松地进行二次修改,添加新的...
此外,为了提高性能和避免不必要的渲染,可以考虑使用requestAnimationFrame或者使用CSS3的`transform: translateZ(0)`开启硬件加速,以减少大量动态效果对浏览器性能的影响。 在实际应用中,这种动态文字阴影效果...
在开发Vue应用时,我们经常会使用第三方UI库如Vant来加速前端界面的构建。然而,在实际使用过程中,有时会遇到一些意想不到的...在开发过程中,遇到类似的动画问题时,可以尝试通过开启硬件加速来优化性能和用户体验。
为了保证动画流畅,开发者可能考虑了CSS3硬件加速特性,如开启`translate3d(0,0,0)`或`will-change`属性,这可以利用GPU来处理动画,提高性能。 7. **浏览器兼容性**: CSS3的新特性在不同浏览器上的支持程度不一...
本资源“纯CSS3抽屉打开关闭动画特效.zip”聚焦于利用CSS3实现一个交互式的抽屉式动画效果,它允许用户通过鼠标点击来开启和关闭“抽屉”,提升了用户体验和界面的动态感。 抽屉式设计在现代网页和应用中广泛使用,...
3. **利用硬件加速**:通过开启`transform: translateZ(0)`或`will-change`属性,可以触发GPU渲染,显著提升动画性能。 4. **分离布局和视觉属性**:将影响布局的属性(如宽度、高度)与不影响布局的属性(如颜色、...
【网站性能稳定性优化步骤】 网站性能优化是提升用户体验和系统效率的关键环节,它涉及多个层面,包括前端页面加载速度、后端服务器响应时间、数据库查询效率以及资源利用等。以下是一套详细的网站性能稳定性优化...