写点什么

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:407172
用户头像

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

关注

评论

发布
暂无评论
发现更多内容

MySql基础-笔记4 -数据表创建、删除和数据插入、查询等操作

MySQL 数据库 删除 创建

长安链入选“2022科创中国”开源创新榜

科技热闻

秒懂算法 | 莫队算法

TiAmo

算法 暴力猜解

MathType7.0简体中文汉化版下载

茶色酒

MathType2023

架构训练营一作业

null

定了!Python3.7,今年停止更新!

程序员晚枫

Python 软件 下载 版本

aspnetcore 原生 DI 实现基于 key 的服务获取

newbe36524

C# Docker Kubernetes

软件测试 | Mock是什么?

测吧(北京)科技有限公司

测试

OSS Compass开源指南针发布,我国首个开源生态健康评估平台正式诞生

极客天地

2023-02-21:请用go语言调用ffmpeg,解码mp4文件,输出视频信息和总帧数。

福大大架构师每日一题

golang ffmpeg 福大大

Unittest接口和UI自动化测试框架中的发送邮件服务如何使用?

Python 自动化测试 unittest 邮件服务

易观千帆 | 2023年1月银行APP月活跃用户规模盘点

易观分析

金融 银行 手机银行

MySql基础-笔记5 -WHERE 、UPDATE、DELETE、LIKE、UNION使用

MySQL 数据库

MySql基础-笔记6 -排序、分组、连接的使用、NULL值处理

MySQL 数据库

MySql基础-笔记9 -ALTER命令

MySQL 数据库

流处理计算平台 StreamPark 2.0.0 重磅发布,首个 Apache 版本终于来了

ApacheStreamPark

flink spark 流处理 StreamPark

【深度挖掘 RocketMQ底层源码】「底层源码挖掘系列」透彻剖析贯穿RocketMQ的消费者端的运行核心的流程(Pull模式-上)

码界西柚

Apache RocketMQ 2月日更 运行原理 拉取模式

「 Java基础-Lambda 」试试Lambda表达式?通俗易懂得嘞!

小刘学编程

Lambda 代码优化 java 高级编程

浅谈新媒体运营岗位的发展前景

石头IT视角

日日顺于贞超:供应链数字化要做到有数、有路、有人

联营汇聚

LeetCode题解:938. 二叉搜索树的范围和,BFS,JavaScript,详细注释

Lee Chen

JavaScript 算法 LeetCode

得物容器SRE探索与实践

得物技术

容器

SaaS+、SaaS的机遇都存在,但不要试图找最短成功路径,该犯的错都得走一遍

B Impact

架构实战营模块6 拆分电商系统为微服务

西山薄凉

「架构实战营」

OKR之剑·总结篇01:如何开好一场OKR复盘会

vivo互联网技术

团队管理 OKR

得物热点探测技术架构设计与实践

得物技术

热点

CorelDRAW2023软件新功能抢先看

茶色酒

CorelDraw2023

【立哥】【每日一个小知识】你所知道的牛郎织女故事是真的吗?

Lee Chen

【kafka专栏】kafka专栏目录整理(建议收藏不迷路)

石臻臻的杂货铺

kafka

自研的内存分析利器开源了!Android Bitmap Monitor 助你定位不合理的图片使用

拭心

android 性能优化 BitMap 内存优化

业务架构那点事(1)业务架构师就是在“盖房子”

涛哥 数字产品和业务架构

企业架构 业务架构

Proxx:构建高效的Web应用_大前端_InfoQ精选文章