Twitter 是如何做新版手机网站的

（点击上方公众号，可快速关注）

编译：伯乐在线/飞哥的咖啡

如有好文章投稿，请点击 → 这里了解详情

Progressive Web App，用 service worker 缓存 html 与静态资源，reactjs + redux，用 ES2015。优化在网络状况不好的场景的使用。

我们是如何构建 Twitter Lite 的

我们很高兴向大家介绍 Twitter Lite，它是一款突破性的网络应用程序（Web App），可通过 mobile.twitter.com 下载获取。Twitter Lite 反应迅速、使用更少的数据、占用更少的存储空间、并支持在现代浏览器中推送通知和离线使用。轻量级应用程序允许用户按需访问，无冲突安装（install without friction），并支持渐进式更新，而网络正在成为一个此类应用的平台。在过去的一年中，我们采用了全新的开放式网络 API，显著提升了性能，增强了用户体验。

架构概述

Twitter Lite 是一个客户端 JavaScript 应用程序，也是一个简单的轻量级 Node.js 服务器。服务器处理用户身份验证，构建应用程序的初始状态，并渲染初始的 HTML 应用程序 shell。一旦加载到浏览器中，应用程序将直接从 Twitter API 请求数据。这种基础架构的简单性能帮助我们大规模地提供可靠又高效的出众服务，而且，Twitter Lite 比我们的服务器渲染的桌面网站要便宜得多。

客户端 JavaScript 应用程序的开发、构建和测试基于众多开源库，其中包括 React、Redux、Normalizr、Globalize,Babel、Webpack、Jest、WebdriverIO 和 Yarn。依赖已构建（完成）的开源软件，我们可以将更多的时间花在改善用户体验、提高迭代速度、以及处理 Twitter 特有的问题上，比如处理和操作 Timeline 和 Tweet 数据。

我们编写了现代的 JavaScript（ES2015 及更高版本），由 Babel 编译并和 Webpack 捆绑。API 响应数据首先由 Normalizr 处理，它允许我们删除重复数据，并将数据转换为更高效的表单，然后发送到各个 Redux 模块，它们的作用是获取、存储和检索远程和本地数据。该 UI 由数百个 React 组件实现，它们可以实现包括文本渲染、管理虚拟列表、延迟加载（lazy load）模块和延迟渲染等方方面面的功能。Twitter Lite 一共支持 42 种语言，我们使用 Globalize 来提供本地化的数字、日期和消息。

性能设计

每月有数亿人访问 mobile.twitter.com。当你的网络连接（速度）缓慢、（方式）不可靠、（渠道）有限或（资费）昂贵时，我们希望 Twitter Lite 能成为你使用 Twitter 的最佳方式。通过一系列的增量性能改进（称为 PRPL 模式），以及使用 Android 现代浏览器（例如 Google Chrome）上的新功能，包括页面守护者（Service Worker）、IndexedDB、网络应用安装提示条和网络推送通知，我们能够获得高速和可靠的网络连接。

实用性

Twitter Lite 具有网络弹性。为了覆盖地球上的每一个人，我们同样需要顾及那些所处网络环境缓慢且不可靠的人群。网络可用时，我们使用 Service Worker 以便在重复访问时，启用临时脱机浏览和即时加载，而不必考虑网络条件。Service Worker 对 HTML 应用程序 shell、静态资源以及一些流行的表情符号进行缓存。当脚本或数据无法加载时，我们提供“重试”按钮，帮助用户从故障中恢复。总之，所有这些改进提高了网络的可靠性，并有助于在重复访问时，大大加快加载和启动时间。

逐步加载

Twitter Lite 在大多数设备上，处于 3G 网络环境下，完成交互不超过 5 秒。世界上大多数国家都在使用 2G 或 3G 网络，所以快速的初始体验很关键。在过去的 3 个月内，我们的平均负载时间缩短超过 30%，第 99 个百分位的交互延迟时间缩短超过 25%。为了实现这一点，应用程序将初始的 HTML 响应发送给浏览器，发送指令来预先加载关键资源，而服务器同时构建初始的应用程序状态。通过使用 Webpack，应用程序的脚本被打散成颗粒碎片按需加载，这意味着初始加载只要求载入可见屏幕所需的资源。（有条件时，Service Worker 会预先缓存额外资源，并允许对其他屏幕进行即时未来导航（instant future navigations）。）这些改进允许我们逐步加载应用，可以让人们更快地阅读和创建 Tweet。

渲染

Twitter Lite 颠覆了昂贵的渲染工作。尽管我们已经注意优化组件的渲染，Tweet 仍是一个复杂的复合组件，并且渲染无穷列表的 Tweet 需要考虑额外的性能。我们实现了自己的虚拟化列表组件，它只会在 Viewport 视图中显示内容，使用 requestAnimationFrame API 以递增的方式渲染多个框架，并在屏幕上保留滚动位置。通过使用 requestIdleCallback API，将非关键的渲染延迟到空闲时间进行，从而进一步提高感知性能。

数据使用

Twitter Lite 在默认情况下减少了数据使用，提供较小的媒体资源，并（主要）依赖已缓存数据。我们已经对图像进行了优化，以减少其对数据使用的影响：当你滚动一个 Timeline 时，数据使用的影响降低多达 40%。“数据节流”模式进一步减少了数据使用，它用一个小小的模糊预览来替代 Twitter 上的 Tweet 和直接消息（Direct Messages）。这个图像的 HEAD 请求帮助我们在按钮旁显示其大小，以便按需加载。Twitter Lite 只占用很小的设备存储空间，对比我们的原生应用，它只有其 1-3% 的体积。

设计系统和迭代速度

增强快速迭代能力可以帮助我们保证高质量的用户体验。我们严重依赖 Flexbox 进行布局规划，以及较小且固定数量的颜色、字体大小和长度。Twitter Lite 是由基于组件的响应设计系统构建的，它可以让应用程序适应任何的形状参数。使用 UI 组件帮助我们在设计（学）和工程（学）之间建立一个共通的词汇表，更利于快速迭代和重新使用现有构造块。一些非常复杂的产品特性，比如与内容混合的 Timeline，可以由精简至 30 行的代码创建，以配置一个 Redux 模块并将其与 React 组件相连。

展望未来

在这么大的规模上构建一个快速的网络应用程序，并保持其高速稳定的运行，（不得不说），是对 Twitter 的设计、产品和工程等多个团队/部门的一次重大挑战。我们对现阶段取得的进展感到兴奋，并对 HTTP/2、GraphQL 和其他压缩格式进行了试验，以进一步减少加载时间和数据消耗。在接下来的几个月内，我们将对 Twitter Lite 的可访问性、安全性、设计、功能和性能进行更多的改进。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能