[前端工程] Airbnb 如何透過 HTTP Streaming 優化前端效能
在 ChatGPT 問世後,你可能有注意到,ChatGPT 的回應不是一次全部回完,而是一個字一個字回。這種形式是所謂的串流 (streaming)。用串流的方式,最直接的好處就是能提升效能。
試想,假如 ChatGPT 要等一長串回覆全都產生好後再一次傳給前端,可能每次都要先等個 5 秒,然後使用者才能一次收到所有回覆。但假如用串流的形式,只要有一句話就能傳,使用者就可以一直收到回覆,在體驗上會比較好。
串流的形式不只可以用在聊天機器人的回覆上,也可以用來幫助網頁加載。Airbnb 先前在官方技術部落格發表《Improving Performance with HTTP Streaming》一文探討他們怎麼做到。這邊蠻推薦大家可以去 Airbnb 官網,然後開啟開發者工具,到 Network 區塊中調成 Slow 3G,就會看到 Airbnb 官網不是一次整個渲染,而是一個區塊一個區塊,只要資料加載完就渲染該區塊。
他們具體的作法是透過 Early Flush 這個方法,把在伺服器端渲染好的 HTML 分成三個區塊,第一個區塊是包含字體、CSS、JavaScript 等,因為這些可以比較快被處理;第二區塊是剩下的 HTML 內容;第三區塊則是需要向後端索取的資料的部分。
特別注意,為了加快速度,Airbnb 平行做伺服器端絢染 (SSR) 與客戶端的資料索取 (Client side data fetch)。在拿到前兩個區塊後,透過瀏覽器的 MutationObserver
去觀察 DOM 的變化,然後當第三區塊索取的資料好了後再塞進去。透過這個方式,幾乎每個頁面的 FMP 都提升 100 毫秒。
非常推薦大家完整讀完該文章,會更清楚如何做這塊優化。不過假如你在的公司不像 Airbnb 有專門的效能優化團隊,也不用擔心。現在前端框架都有幫忙處理這塊。舉例來說,React 18 就有支援 streaming HTML,假如搭配 Next.js 基本上是開箱即用 🙂
[後端系統設計] Slack 如何同時傳百萬則即時訊息
設計一個 Slack 是很常考的系統設計題目,這個題目的核心之一是著重在即時傳訊 (Real-time Messaging) 的設計上,相似的考題會是設計 WhatsApp、Microsoft Teams、Discord 等等。假如你對這部分沒有頭緒的話,先前 Slack 官方技術部落格分享了他們如何設計即時傳訊 (文章連結在此),非常值得一讀。
這篇文章有幾個看點,第一個是開頭提到 Slack 的使用尖峰時期 (Peak time) 是週期式的,不同時區的中午前到正中午,會是最多人湧入的。一個系統的尖峰與離峰期,是在系統設計面試最開頭要去釐清的,因為這會影響到系統如何設計來因應。
第二個是 Slack 拆分服務的方式。Slack 把服務拆成四大類,包含 Channel Servers, Gateway Servers, Admin Servers, and Presence Servers;而客戶端的部分,則是拆成兩塊,在一開始加載時,會先跟後端拿使用者的資訊、websocket 連接相關資訊,接著帶著這兩類資訊,去跟 Edge 端建立 websocket 連接,然後才開始即時傳訊。
在一個使用者傳出訊息後,會先由 Admin Servers 透過一致性雜湊 (consistent hash) 去找對應的頻道,然後把訊息帶給對應的 Channel Servers,接著 Channel Servers 會把訊息傳給每個應該收到訊息的Gateway Servers,然後由 Gateway Servers 實際傳給每個應該收到該訊息的客戶端。透過上述方式,可以有效規模化,同時傳上百萬則訊息。
在該篇文章中,Slack 工程團隊也有提及他們如何處理事件 (event),例如某個人在頻道中打字時,其他人會看到「某某某 is typing」。想了解這部分是如何實踐的,推薦可以詳細閱讀完整篇文章。
[軟體業職涯] 職涯路徑該選產品開發? 還是選基礎建設?
《The Developing Dev》是個非常推薦追蹤的電子報,作者 Ryan Peterman 在 Meta 僅花四年就從 L3 升到 L6 工程師,幾乎是以別人兩倍快的時間在升遷。先前他寫的一篇 《Staff+ Career Growth: Product or Infra?》分析了工程師職涯的兩種路徑 (產品開發路線與基礎建設路線),對於往主任工程師以上 (staff+) 升遷的影響。
他的觀察是,在升到主任工程師之前,不論選產品端 (product) 或走基礎建設 (infra),影響上並沒有那麼大,兩條路線都能順利升遷到主任工程師。只是往下一個階段升遷,這兩個路線就有區別。
從技術的角度來看,走基礎建設路線的工程師,比較能有高的技術影響力,因為一個優化就可以讓下游使用該技術的工程團隊都獲益 (這讓人想到 GPT-3.5 升級到 GPT-4 後,對世界的影響量級非常可觀)。這是走產品開發的工程師比較難有的。
但相對的,因為基礎建設路線的成果複用性高,不像產品開發需要客製化,因此基礎建設的部門人通常比產品開發部門還少;換句話說,如果是走產品開發路線的工程師,更可能往工程管理路線發展。這條路線往上爬,影響的人數也很可觀。
先前看 vgod 的《軟體工程師的修煉與成長》系列文有談到《Product vs Infrastructure》,也有類似的觀察。關於這個問題,沒有哪條路比較好,更多是個人偏好。最終如何選怎? 端看你比較偏好沈浸在技術中,有更多技術影響力;或是比較偏好面向終端使用者,並往產品與組織管理發展。
推薦連結
前陣子在 Twitter 上看有人推薦 Proxyman 這款網路代理工具,試了一下覺得非常好用。假如有在手機上開發網頁應用程式 (例如開發基於 Webview 的應用程式),可能都用過 Wireshark 或 Charles 等工具。這個 Proxyman 功能類似,但是 UI 設計上好用很多,也推薦大家試試
Edge Function 越來越成為全端開發的首要工具選擇,還不知道 Edge Function 在做什麼、為什麼要用 Edge Function 的人,這個 Deno 做的影片《Why is everyone talking about Edge》用淺顯易懂的方式說明的很清楚。
《Load Balancing》不論在系統設計面試,或是現實世界中的系統設計,平衡負載器 (Load Balancer) 都是很重要的元件之一,它能協助系統水平擴展,來應對更大的流量。這篇文章用動畫的形式描述平衡負載機制的運作,以及不同的平衡負載策略。
前兩週在 PTT 上的爆文《國泰世華工作經驗分享》,談了在銀行業 IT 工作遇到的鬼故事。只能說沒有在裡面工作,真的很難想像會遇到這些鳥事。有在考慮進銀行業的工程師,推薦一看,會更清楚將來工作上可能會遇到什麼現實問題。
這週看到一個很酷的開源專案 ReactPy,讓你能用 Python 寫 React 。純 Python 的工程師,現在越來越多工具可以讓你晉升全端了!
React Query 的核心維護者 TkDodo 寫了一篇《你可能不需要 React Query》 值得一讀。工具沒有絕對好壞,只有適用的情境。即使是社群中最熱門的工具,也不是所有場合都適用。知道在什麼情境下用什麼工具,是邁向資深工程師不可缺的能力。
這週看到 Web Dev Simplified 的圖片懶加載教學文章,覺得寫得蠻不錯的,推薦想提升網站的圖片加載體驗的人一看。
自從 Twitter 被馬斯克搞壞掉後,社群開始更多人用 Bluesky。先前 Bluesky 把他們的整個 Mobile App 開源,這篇文章分析了 Bluesky 如何架構他們的 React Native App,以及如何做狀態管理。想精進架構能力的人,推薦一讀。
目前社群最熱門的開源前端元件庫 shadcn/ui 推出了 CLI,只能說太厲害了。真的只有 shadcn 能超越 shadcn,佩服!
ExplainThis《ChatGPT 指令大全與創新應用》
以上是這期的全端雙週報,感謝閱讀到最後的你。這邊也想跟大家分享,ExplainThis 的新書《ChatGPT 指令大全與創新應用》持續在各大通路販售中。假如你有興趣全面性了解 ChatGPT,並且學習如何實作基於 ChatGPT 的應用程式,千萬不要錯過了(購買連結在此)。
如果你喜歡我們的內容,歡迎與可能感興趣的朋友分享: