改善 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页未读，继续阅读
吴魏^o^
- 粉丝: 4
- 资源: 31
我的内容管理
展开
最新资源
- 岩石滑动与断层冲击地压：声发射特征分析
- 新时代煤炭工业八大战略新取向剖析
- 开采强度对华亭矿区冲击地压危险性的影响分析
- 新安煤矿探采对比：影响安全生产的关键因素与技术支撑
- 210MW循环流化床锅炉引风机变频改造优化与节能效果
- 浅埋煤层开采沉陷预测：方法应用与影响分析
- 优化巷道过陷落柱支护方案：数值模拟与现场试验
- 坚硬顶板定向断裂爆破技术：安全高效采煤新方案
- 北航2019算法课作业解析：投资策略与凸子多边形优化
- 断层破碎带垮冒下堆积体边界抗力分布关键影响因素
- 哈拉沟选煤厂优化末煤系统提高效率与处理能力
- 瓦斯涌出影响下采动煤体蠕变失稳研究
- 提升煤矿装载效率的可控箕斗定量装载设备设计
- 水分调控下烟煤瓦斯吸附特性对比研究
- 重介质悬浮液密度控制硬件设计与选型探讨
- 坚硬顶板巷道支护参数设计：现场测试与数值分析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
