為性能而生！Twitter新推出的Twitter Lite究竟是如何構建的？

作者｜Nicolas Gallagher翻譯｜運和憑

Twitter已經為其移動端推出了一個新的，更快速的網站版本，並將其命名為Twitter Lite。Twitter 稱其為性能而生，主要面向新興市場，致力於解決連接速度緩慢、可靠性差、性能受限等問題。它具備漸進式特性，能夠在大多數設備上立足3G網路於5秒內完成載入，並具有進一步的數據保護模式。那麼Twitter是從哪些角度來構建Twitter Lite的呢？作者介紹了其構建思路，以及未來努力的方向。

我們很高興為大家介紹全新Twitter Lite，一款已經於http://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為其提供本地化數字、日期以及消息格式。

為性能而生

每個月，都有上億用戶訪問http://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/2、GraphQL以及多種替代性壓縮格式以進一步降低載入時間與數據使用量。在未來的幾個月中，我們還將對Twitter Lite的輔助功能、安全性、設計、功能以及性能作出更多細節改進。

英文原文鏈接：

https://blog.twitter.com/2017/how-we-built-twitter-lite

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回復「加群」。推薦分享或投稿請發郵件到editors@cn.infoq.com，註明「前端之巔投稿」。

推薦閱讀：