写点什么

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

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

关注

评论

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

前端三板斧头 --- 编程范式

知心宝贝

JavaScript 学习 编程 前端 三周年连更

Last Week in Milvus

Zilliz

非结构化数据 开源社区 Milvus Zilliz 向量数据库

Spider实战系列-一次真实接单经历让我抓取了某东的数据

浅辄

爬虫 三周年连更

华为云助力龙岗区人才培养生态建设,2023年龙岗产业创新人才双选会圆满落幕

科技说

华为云助力龙岗产业创新人才双选会,为深圳市打造数字经济人才高地

科技说

实力领先!华为云让网站更安全

科技怪授

华为云网站安全解决方案加固企业网站安全防护

科技怪授

华为云助力龙岗产业创新人才培养:2023大学生就业创业嘉年华活动圆满落幕

科技说

华为云等保解决方案为您提供最专业的团队,助您轻松过等保

IT科技苏辞

Postman 如何传递 Date 类型参数

Liam

Java 程序员 后端 Postman

更好地解决企业网络安全防护难题,华为云值得信赖

科技怪授

华为云等保安全服务,助力企业多快好省过等保

秃头也爱科技

华为云数据灾备,让企业上云更安心

科技怪授

Paimon 专题上线|从 0 到 1 入门新一代流式数据湖存储

Apache Flink

大数据 flink 实时计算

为什么说Flutter无法成为移动应用开发的“顶流明星”?

FinFish

flutter 前端框架 跨端框架

未来技术方向——“乐高式”可组装式开发能力

鲸品堂

技术 科技 组装式创新 企业号 4 月 PK 榜

别再只会使用简单的ping命令了,Linux中这些高级ping命令可以提高工作效率!

wljslmz

三周年连更

如何在 Go 中验证一个字符串是否是 URL?

宇宙之一粟

正则表达式 字符串 url Go 语言 三周年连更

京东技术专家首推:Spring微服务架构设计,GitHub星标128K

程序知音

Java 微服务 springboot SpringCloud java架构

华为云网站安全解决方案,助力游戏行业平台安全

科技怪授

基于Laravel的模块化开发框架,让Web应用程序开发更快更简单

ModStart

HTTP 与 RPC 接口区别

Apifox

网络协议 RPC HTTP RPC调用

华为云等保合规方案,守护企业网络安全线

IT科技苏辞

极客高赞:网络安全为什么缺人?缺什么样的人?

网络安全学海

黑客 网络安全 信息安全 渗透测试 WEB安全

华为云等保安全解决方案,为你守护网络安全

秃头也爱科技

打包python程序 | python小知识

AIWeker

Python python小知识 三周年连更

一文掌握使用 Go 标准库 sort 对切片进行排序

陈明勇

Go golang 排序 三周年连更 sort

Vue3 如何编写一个插件

程序员海军

Vue3 三周年连更

uniapp自定义富文本编辑器

格斗家不爱在外太空沉思

uni-app 三周年连更

智慧公厕是什么?智慧公厕在智慧城市中起到什么样的作用?@光明源智慧公厕科技

光明源智慧厕所

智慧城市

超级App与新零售:零售品牌如何利用小程序技术掌握未来商业机会?

FinFish

新零售 超级app 小程序技术 小程序容器技术

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