优化HTML5应用性能：硬件加速与技术指南
需积分: 1 176 浏览量
更新于2024-07-18
1
收藏 925KB PDF 举报
"改善HTML5网页性能的教程-译"
这篇翻译自HTML5 Rocks的文章探讨了如何优化HTML5应用程序的性能，作者Malte Ubl在2011年2月14日发表。文章强调，虽然HTML5带来了丰富的功能，但同时也提出了性能优化的挑战。为了确保流畅的用户体验，尤其是动画效果，开发者需要理解和应用一些关键的技术。
目的
文章的目标不是鼓励开发者创建复杂的HTML5视觉项目，而是为那些寻求性能提升或希望提前掌握性能优化知识的开发者提供指导。它提供了实用的工具和技术，帮助改善现有或未来HTML5应用的性能。
HTML5视觉保真与硬件加速
硬件加速是HTML5性能优化的一个关键方面。通过利用计算机图形处理单元（GPU），可以减轻CPU的负担，特别是在移动设备上，从而提升整体性能。以下是可以实现硬件加速的HTML5特性：
1. 常规布局合成 - GPU可以帮助快速处理页面布局变化。
2. CSS3过渡效果 - 当元素状态改变时，GPU可以平滑地渲染过渡效果。
3. CSS3 3D变换 - 3D转换可以利用GPU进行更高效的计算。
4. 画布绘图 - 画布上的动态绘图操作可以利用GPU加速，提高绘制速度。
5. WebGL 3D绘图 - 这种技术允许在浏览器中进行3D图形渲染，同样受益于GPU支持。
对于画布和WebGL，硬件加速的效果可能更为显著，而CSS3的过渡、3D变换和布局合成则可以广泛应用于各种网页和应用，以提高性能。
如何加速
为了实现硬件加速，开发者需要理解如何将网页内容划分为不同的"层"。不变的层可以被GPU有效地处理，从而实现加速。例如，固定定位元素、使用transform或opacity属性的元素，以及包含动画的元素，都可以考虑放入独立的层。
此外，文章还可能讨论了避免重排（reflow）和重绘（repaint）的策略，因为这些操作会严重影响性能。使用CSS3的will-change属性可以预示元素即将发生的变化，从而让浏览器提前进行优化。同时，合理使用requestAnimationFrame API可以确保动画更加流畅。
其他性能优化技巧
除了硬件加速，文章可能还涵盖了其他性能优化方法，如减少HTTP请求，压缩资源，使用正确的缓存策略，以及优化JavaScript代码。图片优化，包括使用适当的文件格式和尺寸，也是提升加载速度的重要手段。
这篇文章为开发者提供了一套全面的工具和技术，帮助他们在HTML5项目中实现更好的性能和用户体验。无论是对于新手还是经验丰富的开发者，理解并应用这些优化策略都是确保HTML5应用高效运行的关键。
改善 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);
剩余14页未读，继续阅读
3632 浏览量
10175 浏览量
397 浏览量
577 浏览量
384 浏览量
119 浏览量
1685 浏览量
804 浏览量
