写点什么

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

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

关注

评论

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

IDC:阿里云位居2021年中国关系型数据库市场第一

Lily

Apache APISIX 在微软云 ARM 和 x86 服务器上的性能测试对比

API7.ai 技术团队

API网关 APISIX 微软云

元宇宙|高阶音频处理能力,让声音「声临其境」

融云 RongCloud

音视频技术

基于SpringBoot的OnlineMusicPlayer项目

bug郭

签约计划第三季 8月月更

编译器优化:何为SLP矢量化

华为云开发者联盟

开发 编译器 SLP

实时云渲染——让元宇宙从科幻走入现实

Finovy Cloud

云渲染 GPU渲染

招生报名小程序开发笔记二:功能需求设计

CC同学

一张图,理清微服务架构路线(收藏)

C++后台开发

微服务 微服务架构 Linux服务器开发 C/C++后台开发 C/C++开发

2022年了,你还不会手撕轮播图?

知心宝贝

JavaScript 算法 前端 可视化 签约计划第三季

PHP 项目对接视频号原来如此简单,小白也能轻松完成【带附件】

CRMEB

武汉链(基于ETH)BSN官方DDC链上数据解析

BSN研习社

区块链

袋鼠云数栈基于CBO在Spark SQL优化上的探索

袋鼠云数栈

离线数仓建设,企业大数据的业务驱动与技术实现丨03期直播回顾

袋鼠云数栈

云图说丨初识云速建站服务

华为云开发者联盟

云计算 网站 华为云 搭建网站

招生报名小程序开发笔记一:开发背景和技术方案的选型确定

CC同学

当科学家决定搞点“花里胡哨”的东西

图灵教育

你的数据是如何泄露的?企业和个人应该这样做……

火绒安全

安全漏洞 数据泄露 黑客攻击

开源一夏 | jQuery scroll() 滚动加载列表 获取腾讯云图片像素信息

六月的雨在InfoQ

开源 COS ​jQuery 8月月更

阿里内部流出的绝密文档JDK源码学习笔记(2022版)限时分享

Java工程师

Java 源码 jdk

【接入指南 之 云云接入】快速接入HONOR Connect平台(上)

荣耀开发者服务平台

IoT 新手指南 万物互联 荣耀 honor

DTMO直播预告|Taier的Web前端架构解析

袋鼠云数栈

走好数据中台最后一公里,为什么说数据服务API是数据中台的标配?

袋鼠云数栈

在小程序中SVG的打开方式

Geek_99967b

小程序 SVG

实时开发平台建设实践,深入释放实时数据价值丨04期直播回顾

袋鼠云数栈

黄东旭,TiDB的灵魂骑手,和他的叛逆“问答”

B Impact

招生报名小程序开发笔记三:数据库设计

CC同学

直播预告 | Authing 如何打造云原生 SaaS 产品架构?

Authing

一步一图带你深入剖析 JDK NIO ByteBuffer 在不同字节序下的设计与实现

bin的技术小屋

网络编程 Netty nio Java Concurrency java nio

2022-08微软漏洞通告

火绒安全

microsoft 终端安全 安全漏洞

金融信创爆发年!袋鼠云数栈DTinsight全线产品通过信通院信创专项测试

袋鼠云数栈

如何读取redis的手机号验证码数据,实现自动化登录测试

Liam

程序员 测试 自动化测试 测试开发 测试自动化

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