![](https://csdnimg.cn/release/download_crawler_static/6902041/bg3.jpg)
改善 HTML5 网页性能(译) mobitest@163.com
3 / 15
对画布、WebGL 绘图的加速特性,也许只对某些特定应用才起作用,但前面的另外三
条应有助于所有应用的提速。
什么可以加速?
GPU 加速通过将明确定义的、指定的任务分配给特定硬件处理来完成。通常来说,网
页被分解成多个“层”,这些“层”对被加速的页面来说是不变的。这些层使用传统的渲染
途径来渲染,GPU 随后被用来将层合并成整个页面、应用特效。另一种可能的结果,是屏
幕上的动画对象启动时并不需要一个单一的布局。
需要把可以应用 GPU 加速的部分剥离出来,便于渲染引擎识别。
例如:
需要在浏览器中显示一个元素从左至右移动的效果。传统方法是使用脚本定时器,每隔
N 毫秒修改一下“left”属性。
这段脚本产生了动画,但其实浏览器并不清楚这段内容是被用来产生流畅动画的。看看
使用 CSS3 的过渡效果如何获得同样的外观吧:
#transanim { -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -webkit-transition: all
2s ease-out; transition: all 2s ease-out; }
var elem2 = document.getElementById('transanim'); elem2.addEventListener('click', function
loop() { elem2.style.left = '430px'; }, false);
现在可以简单地定义一下元素的最终位置,就可以让浏览器来在指定的时间段内,向着
最终目标完成动画。
浏览器如何完成动画,与开发者无关。反过来,这也意味着浏览器有能力使用诸如 GPU
加速特性来达成特定的目标。
3.2 CSS 魔弹
目前,多数浏览器如果得到强烈的暗示,某个 HTML 元素将会因使用 GPU 加速而获益,
它们就会照做。其中最强的暗示莫过于对元素执行 3D 变换。也许你现在还用不上 3D 变换,
但毫无疑问也能从中受益。简单地做以下变换:
-webkit-transform: translateZ(0);
请注意,这一变换不保证改善性能。也许只是狂飚一下 GPU,费掉更多电量,性能没
有任何变化。所以,除非使用之后能带来真正的性能收益,请慎用。
当选取用于变换的元素时,请选择那些页面的逻辑主体。最好选那些需要特效,又不包
含其他元素的。
有两个非常有用的命令行选项,可以用 Chrome 来调试 GPU 加速:
(1) --show-composited-layer-borders 对 GPU 级控制的元素加红框。便于确认
在 GPU 层发生的控制。.
(2) --show-paint-rects 所有非 GPU 改变的,被绘制并在其重绘区域周围带有浅色
的框线。可以观察浏览器对于绘制区域的优化。
Safari 有类似的运行选项,参见 described here.
var elem = document.getElementById('domanim'), left = 0; function move() { left += 4;
elem.style.left = left + 'px'; return left < 430; } elem.addEventListener('click', function loop()
{ move() && setTimeout(loop, 1000 / 60); }, false);