Proxx：构建高效的 Web 应用

Proxx是谷歌 Chrome 团队推出的一款 JavaScript 游戏。该项目展示了如何开发快速平滑的 Web 应用，这些应用在多种平台和输入设备上提供了相近的用户体验。

Proxx 项目的独到之处在于它主要针对的是智能功能机。智能功能机是低价智能机替代设备，在印度和非洲广为使用。根据Counterpoint的市场研究报告，智能功能机在 2019 年至 2021 年期间的销量有望达到 3.7 亿部。

相对于智能机，智能功能机的硬件非常简单。它不支持触控，屏幕相对较小，大多采用 240x320 分辨率的 QVGA 屏，CPU 的处理能力也相对较弱。

这些硬件的局限性给 Web 开发人员提出了新的挑战。大多数开发人员并未习惯于针对如此受限的资源开发 Web 应用。

为解决智能功能机的性能受限问题，Proxx 项目使用了一种“Web Worker”技术。该技术支持以后台线程方式运行 JavaScript 代码。

Proxx 将游戏逻辑分散为多个独立线程，确保只有与用户界面相关的计算是在主线程中完成。这种设计确保了应用的平滑渲染，特别是在配备较差的设备上运行的时候。

Proxx 团队使用了 Canvas 和 WebGL 技术来渲染游戏。由此实现了两个独立的层，一层用于后台动画，一层用于显示表格。这种设计让后台可以使用规模更小的画布，降低内存消耗。

与游戏的交互是通过一个隐藏的 DOM 网格来处理的，该网格位于画布层之上。这种简化的事件处理机制让 Proxx 团队能够易于支持屏幕阅读器。

Proxx 团队选择使用Preact来管理 DOM 的渲染和交互。Preact 是 React 的一个更简洁的替代方案，它提供了近似于 React 的渲染 API，但体积只有 3KB。

Proxx 团队使用Puppeteer在服务器上预渲染初始屏幕，进一步改进了项目的加载时间。

最后，Proxx 团队使用了Rollup。Rollup 是一种 JavaScript 模块捆绑器，相较广为使用的 Webpack 库，Rollup 进行了一些优化。 具体地说，Rollup 可在主线程和 Web 工作线程间共享依赖项，避免代码重复加载。

Proxx 团队计划于今年晚些时候公布更多的开发进展。

如果开发人员现在有兴趣深入了解，可访问项目的网站，或是观看Google I/O大会的Proxx演讲。

Proxx 的源代码可在GitHub代码库上找到。Proxx 基于 Apache 2 开源许可。

查看英文原文： Proxx: Building Fast Web Applications