【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

Proxx:构建高效的 Web 应用

作者:Guy Nesher

  • 2019-06-21
  • 本文字数:896 字

    阅读完需:约 3 分钟

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


2019-06-21 09:406979
用户头像

发布了 391 篇内容, 共 125.9 次阅读, 收获喜欢 255 次。

关注

评论

发布
暂无评论
发现更多内容
Proxx:构建高效的Web应用_大前端_InfoQ精选文章