使用CSS3开启GPU硬件加速提升jQuery的动画渲染性能

“移动网页确实是太慢了！”

作为一名移动Web开发人员我常被问到, 为什么移动原生应用程序Native App可以为用户提供那么丰富及流畅的用户体验，反观Web应用程序则不行？那么往后我们应该弃Web App投Native App吗？其实，不！Web应用程序也可以做到一样的流畅！

怎样才能优化Web应用程序的用户体验呢？

其实在现今的市场里，大多数的智能手机都具备有GPU（图形处理器）。原生应用程序Native App之所以能够为用户提供流畅的用户体验是因为它能够直接启动GPU。也就因为这一点，Web应用程序的用户体验大大的落后于Native App。有鉴于此，其实我们可以好好的利用GPU来加速提升Web应用程序里的动画渲染性能。让它跑起来一点都不卡！

本文将会与你讨论如何使用CSS3开启GPU硬件加速提升Web应用程序里的jQuery动画渲染性能。

使用CSS3开启GPU硬件加速

在Web应用程序里使用的jQuery动画并不是由GPU驱动，我们需要使用CSS3来指示浏览器开启GPU硬件加速，卸载jQuery的动画到GPU处理。那要怎么开启GPU硬件加速呢？

答案是。。。启用CSS3 3D渲染。尽管我们的jQuery动画都没有3D元素，但通过启用3D渲染，我们可以强制浏览器将jQUery驱动的动画卸载到GPU来加速给处理好。

以下显示一般我们所用的jQuery accordion代码：

[javascript]
<div class="list_button">
<ul>
<li class="parent"><a href="#">Rate the App ⇣</a>
<ul class="children">
<li><a href="#">1 Star</a></li>
<li><a href="#">2 Stars</a></li>
<li><a href="#">3 Stars</a></li>
<li><a href="#">4 Stars</a></li>
<li><a href="#">5 Stars</a></li>
</ul>
</li>
</ul>
</div><!– END list_button –>

正如你以上所看到的，传统上我们使用jQuery toggleSlide()的方法来切换滑动的accordion，而toggleSlide()并不会启动GPU, 所以接下来我们便来看看如何使用CSS3替代toggleSlide()的方法。

在我们还没正式使用CSS3前，我们首先要做的是查看用户的浏览器是否能够支援CSS3 3D渲染操作。

[javascript]
<script>
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
transitionEndEvent = ‘webkitTransitionEnd transitionend’,
cssTransitionsSupported = thisStyle.WebkitTransition !== undefined || thisStyle.transition !== undefined,
has3D = (‘WebKitCSSMatrix’ in window && ‘m11’ in new WebKitCSSMatrix());

// 如浏览器是能够支援CSS3 3D渲染操作
if(cssTransitionsSupported && has3D ) {
if($(‘.children’).length > 0) {
$(‘.children’).addClass("accordion_css3_support");
}
}

$(‘.parent a’).bind(‘touchstart click’, function(e) {
e.preventDefault();
//如浏览器是不能够支援CSS3 3D渲染操作
if(!cssTransitionsSupported || !has3D ) {
$(this).siblings(‘.children’).slideToggle(500);
} else {
$(this).siblings(‘.children’).toggleClass("animated");
}
});
[/javascript]

我们已经完成了JavaScript的逻辑部分，现在是时候来定义指示浏览器卸载jQuery动画到GPU的CSS。

[css]
.accordion_css3_support {
display: block;
max-height: 0;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all 0.5s linear;
transform: translate3d(0,0,0);
transition: all 0.5s linear;
-webkit-backface-visibility:hidden;
-webkit-perspective: 1000;
}

.children.animated {
max-height: 1000px;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
[/css]

注意事项

除了使用transform: translate3d（0,0,0）开启GPU处理器之外，我们也需要使用-webkit-backface-visibility: hidden; 和 -webkit-perspective: 1000;，来解决可能会面对动画闪烁的问题。

完整代码如下

[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo: Replacing jQuery Animation With CSS Hardware Accelerated | onlyWebPro.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="description" content="Web Development Tutorial Replacing jQuery Animation With CSS Hardware Accelerated for mobile web">
<meta name="keywords" content="CSS, Hardware Accelerated, jQuery, Animation, CSS Animation, jQuery Animation, Mobile, iOS, Mobile Web" />
<link href=’http://fonts.googleapis.com/css?family=Roboto+Slab:400,700′ rel=’stylesheet’ type=’text/css’>
<link href=’http://fonts.googleapis.com/css?family=Roboto:400,700′ rel=’stylesheet’ type=’text/css’>
<style>
body {
background: #3DA938;
color: #2d762a;
font-family: ‘Roboto’, Arial, Helvetica, sans-serif;
font-size: 14px;
}

h1 {
color: #2d762a;
font-family: ‘Roboto Slab’, Arial, Helvetica, serif;
font-size: 24px;
}

a {
color: #fff;
text-decoration: none;
}

.info {
margin-bottom: 30px;
}

.site_wrapper {
margin: 0 auto;
padding: 15px 15%;
}

.list_button {
background: #fff;
border-radius: 4px;
}

.list_button ul {
list-style-type: none;
padding: 0;
}

.list_button a:first-child {
border-top: none;
}

.list_button a {
border-top: 1px solid #eee;
color: #2d762a;
display: block;
font-weight: bold;
padding: 15px 20px;
text-decoration: none;
}

.children {
display: none;
}

.accordion_css3_support {
display: block;
max-height: 0;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all 0.5s linear;
transform: translate3d(0,0,0);
transition: all 0.5s linear;
-webkit-backface-visibility:hidden;
-webkit-perspective: 1000;
}

.children.animated {
max-height: 1000px;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
</head>
<body>

<div class="site_wrapper">
<div class="info">
<h1>Demo: Replacing jQuery Animation With CSS Hardware Accelerated</h1>
<p>Most smartphones these days have GPU (Graphic Processing Unit) that suitable for hardware acceleration. Following is the example of the accordion using CSS hardware accelerated.<br />
<br /> *this example is only works in webkit browser such as Safari & Chrome.
</p>
<p>Click here to continue reading the tutorial – <a href="http://www.onlywebpro.com/2014/05/01/replacing-jquery-animation-with-css-hardware-accelerated/" target="_blank"><strong>Replacing jQuery Animation With CSS Hardware Accelerated</strong></a></p>
</div>

<div class="list_button">
<ul>
<li class="parent"><a href="#">Rate the App ⇣</a>
<ul class="children">
<li><a href="#">1 Star</a></li>
<li><a href="#">2 Stars</a></li>
<li><a href="#">3 Stars</a></li>
<li><a href="#">4 Stars</a></li>
<li><a href="#">5 Stars</a></li>
</ul>
</li>
</ul>
</div><!– END list_button –>

// Switch to CSS3 Transform 3D if supported & accordion element exist
if(cssTransitionsSupported && has3D ) {
if($(‘.children’).length > 0) {
$(‘.children’).addClass("accordion_css3_support");
}
}

$(‘.parent a’).bind(‘touchstart click’, function(e) {
e.preventDefault();
//If browser not support transition or 3D transform (for webkit browser only)
if(!cssTransitionsSupported || !has3D ) {
$(this).siblings(‘.children’).slideToggle(500);
} else {
$(this).siblings(‘.children’).toggleClass("animated");
}
});

</script>
</body>
</html>
[/html]

为了体验GPU硬件加速启用前后的效果，您可以使用您的移动设备浏览器查看以下演示：

Android native browser, iOS Safari & Chrome (支援CSS3开启GPU硬件加速);
Firefox mobile (不支援CSS3开启GPU硬件加速)

查看演示

结束语

正确的使用CSS3开启GPU硬件加速，能够大幅的提升Web应用程序的流畅度。但必须注意的一点是，您必须要小心的使用这些方法。过于的滥用GPU可会引起不必要的性能问题，例如影响用户移动设备的电池寿命等等。

请注意，我们上面提到的例子可能只适用于一些Webkit的浏览器，如iOS Safari浏览器和Chrome浏览器。