爲性能而生！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，註明「前端之巔投稿」。