报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

Flipboard 发布 Web 版,在 Web 技术实现上取得突破

  • 2015-04-01
  • 本文字数:1359 字

    阅读完需:约 4 分钟

最近,Flipboard 发布了其杂志形式社交网络聚合阅读器的 Web 版本。这次发布旨在让用户在浏览器中拥有与原生应用同样的阅读体验。为了实现这个目标,开发团队不得不在 Web 技术上有所突破以满足原生应用对照版本的要求。Web 版开发团队的工程师 Michael Johnston 在 Flipboard 官方博客上详细说明了他们面对的一些问题及解决之道。

开发团队做出的第一个决定是 Web 版应该滚动展示而不是标准的翻页展示,他们认为在 Web 环境下,对于用户来说滚动看起来更自然;其次,他们希望用户拥有每秒 60 帧的体验,这意味着绘制时间应控制在 16 毫秒之内,且需要限制重排和重绘。因为存在卡顿的现象,所以在移动设备上很难做到这一点。在他们看来,DOM 非常慢,而且与 DOM 的交互终将超过这个限制。

综合考虑,他们最终决定使用 Canvas,Michael 解释说:

Canvas 是一个即时模式的绘制 API,绘制层不保留绘入对象的信息,而保留模式恰恰相反,它是声明式的 API,管理绘入对象的层次结构。Canvas 受益于即时模式方式允许直接给 GPU 发送绘制指令。

与 HTML+CSS 技术相比,Canvas 开发技术面临的困难尤其突出:它每次只能绘制一行文本,图像处理起来很复杂,重叠元素无法参考任何 z-index 属性。尽管遇到这么多弊端和困难,团队最终仍决定坚持 Canvas 技术,因为 Michael 认为:

你不可能在 DOM 中构建一个每秒 60 帧的滚动列表视图,与此相反,现今的大多数设备都提供了硬件加速的 Canvas 实现,可以直接给 GPU 发送绘制指令。这意味着我们可以非常快地渲染元素;在许多场景下,我们说的是亚毫秒级范围。

事实上,Canvas 拥有非常小的 API 集,能够减少不同浏览器间所现 bug 或不一致性的可能性。相对于处理绘制指令的严格顺序,创建开发者可以处理节点树的抽象层,无论如何都是更加必要的。为了完成这个库,团队实现了自己的滚动算法(加入了一些优化考虑,如使用脱屏 canvas 的重绘层),并在 React Canvas (一个 React 组件,能够以更自然的方式进行 Canvas 开发)之下封装所有功能。

社区对这次发布的反应褒贬不一,每一个人都赞扬团队为这个项目做出的努力以及他们无私分享他们的决策,即使是那些有争议者。一些人喜欢它的简洁设计 React Canvas 的流畅性,而不喜欢团队所做决定的其他人主要担忧可访问性的问题。Modernizr 的作者 Faruk Ateş在他的博客中写到:

Flipboard 是一个重点为文字内容的产品,这就是为工程团队将可访问性完全抛出窗外而深感遗憾的原因。整个“Web”版本竟然是在一个 HTML5 Canvas 元素中用伪 DOM(文档对象模型)实现。我也希望易用性是工程团队下一个重大计划──2.0 版本发布时要解决的问题,如果你愿意的话。

Christian Heilmann 批评了团队执着于每秒 60 帧以及无限滚动:

的确,我们需要有目标追求,也需要有可参照衡量的一些东西。但考虑到硬件的不统一,以及一个 HTML5 应用必须涉及的抽象层数量,定义一些类似每秒 60 帧基准的事情是相当幼稚的。

大量解决方案都涉及无限滚动,真的,通常这比分页还烦人。

查看英文原文: Flipboard Pushing Boundaries With Its Web Version Release


感谢卢俊祥对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流。

2015-04-01 06:553119
用户头像

发布了 63 篇内容, 共 134.3 次阅读, 收获喜欢 38 次。

关注

评论

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

下一代架构?从组装式企业到组装式应用

华为云开发者联盟

云计算 后端 数字化 华为云 12 月 PK 榜

2023年ha软件采购就选Skybility HA!6大优势看这里!

行云管家

高可用 ha 双机热备

低碳正在成为春城的新名片

极客天地

HIFIVE音加加提供曲库、评分、修音功能的K歌SDK-iOS版本

曲多多(嗨翻屋)版权音乐

ios 泛娱乐 版权音乐 K歌 K歌SDK

Flutter for Web 首次首屏优化——JS 分片优化

阿里巴巴终端技术

flutter 前端 Web 客户端

演讲实录|姚延栋:终止“试点炼狱”,智能汽车时代数字化转型与实践

YMatrix 超融合数据库

车联网 海量数据 超融合数据库 智能网联 YMatrix

浅析静态应用安全测试

华为云开发者联盟

测试 开发 华为云 12 月 PK 榜

强化学习调参技巧二:DDPG、TD3、SAC算法为例:

汀丶人工智能

强化学习 深度强化学习 12月日更 12月月更

火山引擎DataTester:无需研发人力,即刻开启企业A/B实验

字节跳动数据平台

A/B测试

两步开启研发团队专属ChatOps|极狐GitLab ChatOps 的设计与实践

极狐GitLab

团队管理 DevOps ChatOps 极狐GitLab ChatGPT

省会城市昆明分布式光伏项目落地 引领低碳化转型实践

极客天地

如何使用 Towify 在小程序中实现勾选用户协议后登录?

Towify

微信小程序 无代码

VoneBaaS与飞腾CPU完成产品兼容性互认证

旺链科技

区块链 产业区块链 VoneBaaS 12 月 PK 榜

2023年中国企业数字化技术应用十大趋势

易观分析

企业 数字化

ClickHouse 挺快,esProc SPL 更快

王磊

人工智能顶会AAAI 2023放榜!网易伏羲7篇论文入选

网易伏羲

人工智能

了不起的程序员们,瞧,你的 2023 年度惊喜终于来了!

图灵社区

程序员

喜讯+1!袋鼠云数栈技术团队获“2022年度优秀开源技术团队”

袋鼠云数栈

开源

从数据治理到数据应用,制造业企业如何突破数字化转型困境丨行业方案

袋鼠云数栈

数字化转型

【合作案例】科协基地预约小程序 | 闵行区科普资源地图

天天预约

OpenMLDB 贡献者任务第六期 | 暖冬时节,活力继续

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

瓴羊Quick BI数据填报组件,实现智能化管理和高效挖掘利用

夏日星河

广告倒排服务极致优化

百度Geek说

架构 数据结构 后端 12 月 PK 榜

熹乐科技范维肖CC:基于开源 YoMo 框架构建“全球同服”的 Realtime Metaverse Application

声网

框架 #开源

Tapdata 携手阿里云,实现数据平滑上云以及毫秒级在线查询和检索能力

云布道师

阿里云

如何在滑至页面底端添加提示?

Towify

微信小程序 无代码

chatGPT实战之「基于你的数据库,为你智能生成SQL」

非喵鱼

Java MySQL sql openai ChatGPT

选择合适的BI工具,解决中国式报表难题

对不起该用户已成仙‖

如何用 30s 讲清楚什么是跳表

飞天小牛肉

redis 面试 社招 校招 秋招

【服务故障问题排查心得】「内存诊断系列」Docker容器经常被kill掉,k8s中该节点的pod也被驱赶,怎么分析?

码界西柚

Docker Linux 12 月 PK 榜 容器内存问题

IAA品类洞察:扫描品类加快变现,如何抓住增长机遇?

易观分析

广告业 IAA

Flipboard发布Web版,在Web技术实现上取得突破_JavaScript_João Paulo Marques_InfoQ精选文章