改善html5网页性能.pdfVIP

1简介

HTML5为增强web应用的视觉效果（特别是动画）方面提供了一件利器，但也同时带

来了。尽管事实上这些并不都是新出现的，不信可以问问，比如falsh开发者，

以前是怎样克服同类问题的。

无论如何，制作动画时特别要注意的是，人们总是希望动画能更流畅。必须认识到，在

落在中间的动画效果更好。人们讨厌结结巴巴的动画。

本文主要为加强应用体验提供工具和技术指导。

2目的

我们并不使用HTML5来开发超牛超炫的可视作品。

但如果觉得性能有提升的必要，请阅读本文看看有关改进的点点滴滴；当然也可以预先

了解一些，提高工作效率。

3HTML5视觉保真

3.1硬件加速

硬件加速对于浏览器的整体渲染性能来说，是个重要的里程碑。通常的解决方案，是将

原先全部由主CPU承担的工作，改由计算机图形处理单元（GPU）承担一部分。这可以提

高移动设备的整体性能，减少资源争用。

页面以下方面可硬件加速：

常规布局合成

CSS3过渡效果（transitions）

CSS33D变形（3Dtransforms）

画布绘图

WebGL3D绘图

2/15

对画布、WebGL绘图的加速特性，也许只对某些特定应用才起作用，但前面的另外三

条应有助于所有应用的提速。

什么可以加速？

GPU加速通过将明确定义的、指定的任务分配给特定硬件处理来完成。通常来说，网

页被分解成多个“层”，这些“层”对被加速的页面来说是不变的。这些层使用传统的渲染

途径来渲染，GPU随后被用来将层合并成整个页面、应用特效。另一种可能的结果，是屏

幕上的动画对象启动时并不需要一个单一的布局。

需要把可以应用GPU加速的部分剥离出来，便于渲染引擎识别。

例如：

需要在浏览器中显示一个元素从左至右移动的效果。传统方法是使用定时器，每隔

N毫秒修改一下“left”属性。

varelem=document.getElementById(domanim),left=0;functionmove(){left+=4;

elem.style.left=left+px;returnleft430;}elem.addEventListener(click,functionloop()

{move()setTimeout(loop,1000/60);},false);

这段产生了动画，但其实浏览器并不清楚这段内容是被用来产生流畅动画的。看看

使用CSS3的过渡效果如何获得同样的外观吧：

#transanim{-moz-transition:all2sease-out;-o-transition:all2sease-out;-webkit-transition:all

2sease-out;transition:all2sease-out;}

varelem2=document.getElementById(transanim);elem2.addEventListener(click,function

loop(){elem2.style.left=430px;},false);

现在可以简单地定义一下元素的最终位置，就可以让浏览器来在指定的时间段内，向着

最终目标完成动画。

浏览器如何完成动画，与开发者无关。反过来，这也意味着浏览器有能力使用诸如GPU

加速特性来达成特定的目标。

3.2CSS魔弹

目前，多数浏览器如果得到暗示，某个HTML元素将会因使用GPU加速而获益，

它们就会照做。其中最强的暗示莫过于对元素执行3D变换。也许你现在还用不上3D变换，

但也能从中受益。简单地做以下变换：

-webkit-transform:translateZ(0);

请注意，这一变换不保证改善性能。也许只是狂飚一下GPU，费掉电量，性能没

有任何变化。所以，除非使用能带来真正的性能收益，请慎用。

当选取用于变换的元素时，请选择那些页面的逻辑主体。最好选那