[W3Conf] Ariya Hidayat： “流畅的用户界面与硬件加速”

Ariya Hidayat (@ariyahidayat) 在 Sencha 工作，并创建了 PhantomJS 和 Esprima。他谈论了前端 Web 性能。

这些是我从他在旧金山 W3Conf 上的演讲中记录的笔记，作为这个现场博客系列的一部分。

过度简化的建议：“使用 translate3d 进行硬件加速。”

浏览器很复杂：用户界面 - 浏览器引擎 - 渲染引擎 - 图形堆栈 - JavaScript 引擎 - 网络引擎。

将内容传送到像素也很复杂。绘制到屏幕只是漫长链条的最后一步。我们大多熟悉 DOM 树，但还有一个渲染树。

样式重新计算很简单（例如更改背景颜色）。布局更改更难，因此速度更慢/“更昂贵”（例如更改元素的位置）。有很多属性会更改布局。

不同的笔刷/填充有不同的开销。没有填充很简单，渐变更难，纹理最难。这个概念适用于各种属性。例如 CSS 变换：缩放比处理透视更简单。

GPU 针对游戏进行了优化。对像直线这样简单的事情来说效率不高（《使命召唤》不需要直线）。 Web 没有可预测的内容（像游戏那样）。 Web 主要由文本组成。游戏主要由图像组成。

GPU = 低内存；强大的处理能力；数据传输是瓶颈；需要大量能量。

那么，我们如何利用针对游戏优化的 GPU 在 Web 上使用呢？

流畅的动画是 Web 上的一个巨大目标。因此：尽可能将动画推送到 GPU 上。效率较低 = 循环并移动一个方框。效率更高，将方框放入缓冲区并移动缓冲区。一个很好的例子是 WebKit 的落叶演示。它使合成器能够确定叶子的位置。

#w3conf @ariyahidayat：动画机制 → 初始化缓存图像，然后您只操作位图的位置等。

— Faruk Ateş (@KuraFire) 2013 年 2 月 22 日

translateZ(0) 如果已经使用动画，则不需要。

很酷的东西

“这不仅仅是汽车的速度，还包括交通状况。”

避免超负荷。

如果更改颜色，则需要重新上传，因此不利于性能。 **但有一个技巧！** 它使用两倍的内存，但您可以使它平滑。

有关所有这些内容的更多信息：Jank Busters。

“图形编程充满了技巧。它永远都会这样。”

评论