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

汇编:伯乐在线/格非咖啡

渐进式Web App，使用服务工作者缓存html和静态资源，reactjs+redux，使用ES2015。在网络条件差的场景中优化使用。

我们如何构建推特精简版

我们非常高兴地推出Twitter Lite，这是一个突破性的网络应用程序，可以从mobile.twitter.com下载。Twitter Lite响应快，用数据少，占用存储空间少空，支持在现代浏览器推送通知和离线使用。轻量级应用程序允许用户按需访问、无冲突安装，并支持渐进更新，网络正成为此类应用程序的平台。在过去的一年里，我们采用了全新的开放网络API，显著提高了性能，增强了用户体验。

建筑概述

Twitter Lite是一个客户端Java应用和一个简单的轻量级Node.js服务器。服务器处理用户身份验证，构建应用程序的初始状态，并呈现初始的HTML应用程序外壳。一旦加载到浏览器中，应用程序将直接从Twitter API请求数据。这个基础设施的简单性能帮助我们大规模提供可靠高效的卓越服务，Twitter Lite比我们服务器渲染的桌面网站便宜很多。

客户端Java应用程序是基于许多开源库开发、构建和测试的，包括React、Redux、Normalizr、Globalize、Babel、Webpack、Jest、WebdriverIO和Shate。依靠已经构建(完成)的开源软件，我们可以花更多的时间改善用户体验，提高迭代速度，处理推特特有的问题，比如处理和操纵时间轴和推特数据。

我们写过现代Java(ES2015及以后)，是巴别塔编译的，和Webpack捆绑在一起的。API响应数据首先由Normalizr处理，它允许我们删除重复的数据，将数据转换成更高效的形式，然后发送到每个Redux模块，其功能是获取、存储和检索远程和本地数据。UI由数百个React组件实现，可以实现文本渲染、虚拟列表管理、惰性加载模块、惰性渲染等多种功能。Twitter Lite总共支持42种语言，我们使用Globalize提供本地化的数字、日期和消息。

性能设计

每个月都有数亿人来mobile.twitter.com旅游。当你的网络连接缓慢、不可靠、受限或昂贵时，我们希望Twitter Lite成为你使用Twitter的最佳方式。通过一系列渐进式性能提升(称为PRPL模式)和在Android现代浏览器(如Google Chrome)上使用新功能，包括页面工作器、IndexedDB、web应用安装提示栏和web推送通知，可以获得高速可靠的网络连接。

实用性

Twitter Lite具有网络灵活性。为了覆盖地球上的每一个人，我们也需要照顾那些网络环境缓慢不可靠的人。当网络可用时，我们使用服务人员来启用临时离线浏览和即时加载，而不考虑网络条件。服务工作者缓存HTML应用外壳、静态资源和一些流行的表情符号。当无法加载脚本或数据时，我们会提供一个“重试”按钮来帮助用户从故障中恢复。总之，这些改进都提高了网络的可靠性，有助于大大加快重复访问时的加载和启动时间。

逐步加载

Twitter Lite在大多数设备上都处于3G网络环境，完成交互不到5秒。世界上大多数国家都使用2G或3G网络，因此快速的初始体验至关重要。在过去的三个月里，我们的平均加载时间缩短了30%以上，第99百分位的交互延迟时间缩短了25%以上。为了实现这一点，应用程序向浏览器发送初始的HTML响应，发送预加载关键资源的指令，服务器同时构造初始的应用程序状态。通过使用Webpack，应用程序的脚本被分解并按需加载，这意味着初始加载只需要加载可见屏幕所需的资源。(当条件允许时，服务人员提前缓存额外的资源，并允许将来即时导航到其他屏幕。这些改进让我们可以一步一步的加载应用，让人们更快的阅读和创建Tweet。

捣蛋

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

数据使用

默认情况下，Twitter Lite减少数据使用，提供较小的媒体资源，(主要)依赖缓存数据。我们已经优化了图像，以减少其对数据使用的影响:当您滚动时间线时，数据使用的影响会减少多达40%。“数据节流”的模式进一步减少了数据的使用，用一点模糊预览取代了推特上的Tweet和Direct Messages。这个图像的HEAD请求帮助我们在按钮旁边显示它的大小，以便可以按需加载。Twitter Lite只占用少量的设备存储空，相对于我们的原生应用来说，只占其体积的1-3%。

设计系统和迭代速度

增强快速迭代的能力可以帮助我们确保高质量的用户体验。我们严重依赖Flexbox进行布局规划，以及少量固定数量的颜色、字体大小和长度。Twitter Lite是由基于组件的响应设计系统构建的，可以使应用适应任何形状参数。使用UI组件有助于我们在设计(学习)和工程(学习)之间建立一个共同的词汇，更有利于现有构件的快速迭代和重用。一些非常复杂的产品功能，如混合内容的时间轴，可以通过减少到30行代码来配置Redux模块并将其与React组件连接来创建。

展望未来

在如此大的规模上构建一个快速的web应用，并保持其高速稳定的运行，对Twitter的设计、产品和工程团队/部门来说是一个巨大的挑战。我们对现阶段取得的进展感到兴奋，并尝试了HTTP/2、GraphQL等压缩格式，以进一步减少加载时间和数据消耗。未来几个月，我们将在Twitter Lite的可访问性、安全性、设计、功能和性能等方面做出更多改进。