我们很高兴为大家介绍全新Twitter Lite，一款已经于mobile.twitter.com上正式发布的渐进式Web应用（PWA）。Twitter Lite拥有快速与交互式特性、使用更少数据、占用更低存储空间且可在现代浏览器当中支持推送通知与离线使用模式。目前，Web已经成为轻量级应用程序的运行平台，可轻松实现按需访问、顺畅安装以及逐步更新等优势。在过去一年中，我们采用了多种新型开放式Web API，并显著提升了性能水平与用户体验。

架构概述

Twitter Lite是一套移动端的JavaScript应用程序，同时亦是一款小型的简单Node.js服务器。该服务器负责处理用户身份验证、构建应用程序初始状态并将结果呈现至初始HTML应用程序shell。在被加载至浏览器当中后，应用程序将直接通过Twitter API请求相关数据。这种基本架构的简单特性使得我们能够提供卓越的服务可靠性与运行效率——事实上，Twitter Lite的运行成本相较于使用服务器渲染型桌面网站要低出一个量级。

这款客户端侧JavaScript应用程序已经配合多款开源库进行了开发、构建与测试，具体包括React、Redux、Normalizr、Globalize、Babel、Webpack、Jest、WebdriverIO以及Yarn。凭借着现有开源软件，我们得以将更多时间与精力投入到提升用户体验、增加迭代速度以及推文数据与时间轴的处理与操作等相关解决方案当中。

我们编写的现代JavaScript代码（ES2015及更高）由Babel编译完成，并同Webpack加以绑定。API响应数据首先由Normalizr进行处理——其允许我们进行重复条目删除并将数据转化为更为高效的形式——而后被发送至多个Redux模块以实现对远程及本地数据的获取、存储以及检索。其UI由数百种React组件实现，其分别负责进行文本渲染、虚拟列表管理、延迟加载模块处理以及延迟渲染等任务。Twitter Lite支持42种语言，我们还利用Globalize为其提供本地化数字、日期以及消息格式。

为性能而生

每个月，都有上亿用户访问mobile.twitter.com网站。我们希望Twitter Lite能够成为解决连接速度缓慢、可靠性差、性能受限或者高成本情况下的最佳Twitter使用途径。我们得以在其中引入一系列增量性能改进（我们将其称为PRPL模式），同时充分运用Android平台之上各类现代浏览器（例如谷歌Chrome）中的各项新功能，具体包括Service Worker、IndexedDB、Web App Install Banners以及Web推送通知等。

可用性保障

Twitter Lite具备网络弹性。为了与世界范围内的每一位用户顺畅对接，我们往往需要考虑网络速度缓慢且不可靠的情况。在可用性方面，无论具体网络状况如何，我们都会利用Service Worker确保临时性离线浏览与重复访问内容的近实时加载效果。Service Worker负责对HTML应用程序shell与静态资产进行缓存，其中亦将包含部分常用emoji表情。当脚本或者数据出现加载失败时，我们提供“重试”按钮以帮助用户从故障中快速恢复。总而言之，这些变更能够共同提升可靠性，并在访问重复内容时显著加快加载与启动时间。

渐进式加载

Twitter Lite具备渐进式特性，能够在大多数设备上立足3G网络于5秒内完成加载。目前全球大部分地区仍在使用2G或者3G网络; 因此快速的初始体验可谓至关重要。在过去3个月当中，我们将平均加载时间缩短了超过30%，且99%的交互时延迟缩短了25%。为了实现这项目标，应用数据流会首先在浏览器上进行HTML响应初始化、将指令发送至预加载的关键性资源处，同时由服务器端进行应用程序状态初始化。利用webpack，应用中各脚本将进行进一步拆分并按需求加载。这意味着初始加载操作只需要当前屏幕显示内容所涉及的部分资源。（在可用性方面，Service Worker会对其它资源进行预缓存，从而支持其它屏幕显示内容的即时导航效果。）这些变更使得我们能够实现应用的渐进式加载，以确保用户能够更快查阅及发布推文。

渲染

Twitter Lite对资源占用率较高的渲染工作进行拆分。虽然我们以往一直高度关注组件渲染流程的优化，但推文本身就是一项复杂的综合性组件，因此对无数推文列表进行渲染显然需要进行额外的性能考量。我们构建起了自己的虚拟化列表组件; 其能够保证内容仅在当前视图内可见，同时利用requestAnimationFrame API渐进式渲染多个帧上的条目，且保留屏幕上的滚动位置。通过使用requestIdleCallback API将对非关键呈现内容的渲染工作推迟至空闲时段，我们成功地进一步提升了使用过程中的性能感受。

数据使用情况

Twitter Lite会在默认情况下减少数据使用量，提供体积较小的媒体资源并高度依赖缓存数据。我们对于图像进行了优化，以确保时间轴滚动操作对数据使用量的影响最多降低40%。“数据节约”模式能够进一步减少数据使用量，并通过使用体积更小的模糊预览图替换推文与Direct Messages中的图像。图像的HEAD请求能够帮助我们在按钮旁显示其具体大小，以便按需进行加载。作为体积仅为我们原生应用1%到3%大小的应用方案，Twitter Lite亦可以大大节约运行所需要的设备存储空间。

设计系统与迭代速度

提升迭代速度有助于我们始终保持高水平的用户体验。我们在很大程度上依赖于flexbox布局，同时采用一整套小巧且数量固定的本色、字体大小与长度设计规范。Twitter Lite由基于组件的响应设计系统进行构建，意味着该应用能够符合任何呈现形式。在UI组件的帮助下，我们建立起设计与工程技术团体间的共享表达词汇，鼓励双方能力协作以实现快速迭代并复用现有构建单元。我们当前最为复杂的部分功能，例如混合内容时间轴，已经能够利用30行代码完成从配置到接入Redux模块再到匹配React组件的整个创建流程。

展望未来

立足庞大的用户群体，构建这样一款快速高效且极具规模化水平的Web应用程序无疑给Twitter公司的设计、产品与工程研发团队带来了巨大挑战。我们对于自身取得的成绩感到振奋，并尝试利用HTTP/2、GraphQL以及多种替代性压缩格式以进一步降低加载时间与数据使用量。在未来的几个月中，我们还将对Twitter Lite的辅助功能、安全性、设计、功能以及性能作出更多细节改进。

查看原文链接：How we built Twitter Lite