中文地址：http://www.cnblogs.com/rubylouvre/p/3471490.html原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css你知道我们可以在浏览器中使用css来开启硬件加速，让GPU（GraphicsProcessingUnit）发挥作用来提升性能吗？大多数现代计算机图形卡都支持硬件加速。鉴于此，我们可以借助GPU的强大功能，让我们的网站或应用程序运行得更加流畅。在桌面和移动设备上使用CSS启用硬件加速CSS动画、变换和过渡不会自动启用GPU加速，而是由浏览器的缓慢软件渲染引擎执行。那么我们如何切换到GPU模式呢？许多浏览器提供了某些触发CSS规则。现在，像Chrome、FireFox、Safari、IE9+以及最新版的Opera都支持硬件加速，当它们检测到某个CSS规则应用于页面中的DOM元素时，就会开启，最显着的特点是元素的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-变换：translateZ(0)；转换：translateZ(0)；/*其他变换属性在这里*/}在Chrome和Safari中，当我们使用CSS变换或动画时，页面可能会闪烁。下面的代码可以解决这个问题：.cube{-webkit-backface-visibility:hidden;-moz-backface-visibility：隐藏；-ms-backface-可见性：隐藏；背面可见性：隐藏；-webkit-透视：1000；-moz视角：1000；/*Othertransformpropertieshere*/}另一种在webkit浏览器中运行良好的方法是.cube{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);转换：translate3d(0,0,0);/*此处的其他转换属性*/}本机移动应用程序GPU总是得到很好的利用，这就是它比网络应用程序表现更好的原因。硬件加速在移动端尤其有用，因为它可以有效降低资源的利用率（Mike注：移动端本身资源有限）。总结只对我们需要实现动画效果的元素应用上面的方法。仅仅为了开启硬件加速就随便使用它是不明智的。小心使用这些方法，只有在它们通过测试并证明可以提高性能时才使用它们。使用GPU会导致严重的性能问题，因为它会增加内存使用量，并会缩短移动设备的电池寿命。你在你的项目中使用过这些方法吗？如果有，请分享您的精彩案例。
