Home » 网页开发教学 » HTML与CSS开发教学 » 使用CSS3开启GPU硬件加速提升jQuery的动画渲染性能

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

使用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代码:

<div class="list_button">
	<ul>
		<li class="parent"><a href="#">Rate the App &#8675;</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 -->


<script>
 $('.parent a').bind('touchstart click', function(e) {
	e.preventDefault();
	$(this).siblings('.children').slideToggle(500);
}); 
</script>

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

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

<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的逻辑部分,现在是时候来定义指示浏览器卸载jQuery动画到GPU的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);
}

注意事项

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

完整代码如下

<!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 &amp; 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 &#8675;</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 -->

	<div class="list_button">
		<ul>
			<li class="parent"><a href="#">Rate the App &#8675;</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 -->

	<div class="list_button">
		<ul>
			<li class="parent"><a href="#">Rate the App &#8675;</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 -->
</div>


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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());


// 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>

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

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

QR code to CSS Hardware Accelerated Demo

查看演示

结束语

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

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


Android, iOS Development Tutorials