为性能而生！Twitter 新推出的 Twitter Lite 到底是如何构建的？

做者｜Nicolas Gallagher
翻译｜运和凭

Twitter已经为其移动端推出了一个新的，更快速的网站版本，并将其命名为为Twitter Lite。Twitter 称其为性能而生，主要面向新兴市场，致力于解决链接速度缓慢、可靠性差、性能受限等问题。它具有渐进式特性，可以在大多数设备上立足3G网络于5秒内完成加载，并具备进一步的数据保护模式。那么Twitter是从哪些角度来构建Twitter Lite的呢？做者介绍了其构建思路，以及将来努力的方向。对技术细节感兴趣的淀粉，能够关注明天文章。

咱们很高兴为你们介绍全新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负责对HTMLM应用程序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/二、GraphQL以及多种替代性压缩格式以进一步下降加载时间与数据使用量。在将来的几个月中，咱们还将对Twitter Lite的辅助功能、安全性、设计、功能以及性能做出更多细节改进。

视野拓展

InfoQ主办的移动和前端开发领域的精品大会【GMTC 2017】将于6月9～10日在北京举行，做为首届以“大前端”为主题的大会，GMTC涉及移动、前端、跨平台、AI应用等多个技术领域，帮助你方方面面提升技术水平。扫描下图二维码或戳阅读原文，前往官网了解详细信息！

前端之巅

「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。推荐分享或投稿请发邮件到editors@cn.infoq.com，注明“前端之巅投稿”。