写点什么

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

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

关注

评论

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

JProfiler for Mac(Java开发分析软件)v14.0.0永久激活版

Rose

通过 Pollyoyo 快速绘制图表:高效使用 PlantUML 的最佳选择

Byte

软件测试学习笔记丨Linux三剑客-grep

测试人

软件测试

新突破!同方威视主导的又一项国际标准正式发布

财见

华钦科技将发布2024财年下半年及全年财报

财见

新特性速览! Sermant 2.1.0版本重磅发布

华为云开源

开源 字节码 微服务治理 sermant

干货:TikTok限流、0播放问题怎么解决?

Ogcloud

TikTok tiktok运营 TikTok养号 tiktok矩阵 tiktok限流

Bartender 4:图标显示切换大变样,还能在菜单栏自定义文字

Rose

Sitting Ducks攻击导致每日百万域名遭劫持!

国科云

HyperMesh施加正弦荷载

智造软件

网格 载荷 Hypermesh

再谈十二要素方法论

俞凡

架构 最佳实践 云原生

万字长文解读生成式AI参考架构

俞凡

人工智能

轻松构建游戏登录能力,打造玩家流畅体验

HarmonyOS SDK

1688跨境代采业务用的接口大全

tbapi

1688代采系统 1688代采 1688代采接口

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

Apache Flink

大数据 flink

薇美姿舒客B2B订货平台:抢占末端渠道先机,实现持续增长

赛博威科技

如何实现低成本降噪?风扇噪声流体仿真解决方案

Altair RapidMiner

设计 仿真 噪音数据 altair

Kimi 探索版发布,搜索量增强 10 倍;北大&快手开源 Pyramid Flow Matching 丨 RTE 开发者日报

声网

勇气:雷军2024年度演讲

老张

自由职业 不忘初心 勇气

亚马逊云科技助力贵州省铜仁市石阡县免费乳腺癌筛查活动

财见

沉浸式娱乐新纪元,3DCAT推出5G+实时云渲染VR大空间解决方案

3DCAT实时渲染

实时云渲染 云VR VR大空间

如何快速上手一个新项目?

不在线第一只蜗牛

数据库 数据

以生态共建推动产业发展,深开鸿亮相2024开放原子开源生态大会

极客天地

云服务器的公网IP是公用的吗?

Ogcloud

云主机 云服务器 云主机厂商 云服务器租用

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