蒲公英 · JELLY技術周刊 Vol.20

性能優化是一條無盡的路，我們總是可以找到各種途徑去提升體驗，不論是響應時間還是按需加載，亦或是根據架構或者元件有針對性的優化都會是不錯的方法。如果你在使用 Vue3，那麼本期内容會告訴你如何完成高性能的渲染函數；React 的開發者也可以在本期中找到 TS 和 React 的最佳實踐；同樣本期中你也會找到新一代 Web 性能體驗的名額，學無止境，術有乾坤，讓我們開啟本期的内容吧。

登高遠眺

天高地迥，覺宇宙之無窮

前端架構

TypeScript + React 的最佳實踐

使用 TypeScript 編寫 React 應用的類型 Cheatsheets，也可以看做是 TypeScript + React 最佳實踐。它介紹了我們在使用 React 各種特性時最佳的 TypeScript 類型寫法，幫助你解答各種類型上的問題。看完這篇，媽媽再也不用擔心我不會寫 tsx 了。

Vue3 Compiler 優化細節，如何手寫高性能渲染函數

Vue3 通過編譯時和運作時相配合，讓 diff 性能進一步得到提升。文章詳細介紹了 Compiler 會對模闆分析出哪些關鍵資訊，運作時又是怎樣利用這些資訊對 diff 進行優化的。假如我們不編寫 template 而是直接編寫渲染函數，作者也在文末介紹了我們怎麼樣編寫渲染函數能夠讓 diff 進入優化模式。文章整體内容非常硬核，需要花費一定時間的進行閱讀，希望讀者能堅持到到最後。這裡姑且引用文章中的最後一句："Don't stop learning..."，共勉。

基礎技術

Core Web Vitals--聚焦新一代Web性能體驗名額

對于如何衡量使用者體驗，Google提供了多個工具（Lighthouse等等），在Chrome83中新增了Core Web Vitals名額。主要關注使用者體驗的3個方面：加載、互動性和視覺穩定性。對應的名額為：LCP、FID、CLS。降低使用者門檻。

美國人如果把根域名伺服器封了，中國将會從網絡上消失？

自從美國宣布“清潔網絡”行動後，很多懂點網絡的人，第一反應是，美國人會下手根域名伺服器嗎？這裡先給出簡要回答：不排除這種可能性，但并不是沒有辦法。一句話原因：雖然根不在我們手裡，但我們有鏡像。

圖形程式設計

“親親抱抱舉高高”？這款遊戲滿足你對VR的所有期待

虛拟現實的概念在近幾年被提及的越來越頻繁，但對于大衆來說似乎還是一款“科幻”産品。由 Valve 公司出品的《半衰期》VR 遊戲，結合 VR 裝置操作上更為多樣的操控裝置，進行了不同于以往滑鼠鍵盤操控遊戲的互動嘗試，使得遊戲中的角色動作更為接近真實世界，也産生了更多的可能性。

人工智能

3D特效師可以下班了

還記得“搶錢大樓” SM 娛樂公司門口的電子屏海浪嗎？一看就很貴。但 DeepMind 和斯坦福等一衆科學家研究出了一款圖網絡模拟器——GNS 架構，轉變思路，由目前市場上普遍使用的通過實體規律進行 CG 計算，轉向機器學習以實作實體模拟器的方案。這将大大降低 CG 特效的門檻，可能将深遠地影響到這一市場。

滄海拾遺

滄海拾遺，積跬步以至千裡

京喜小程式跨端開發實戰

京喜小程式的在跨端開發上的開發與優化實戰文，詳細講述了 19 年雙十一期間，京喜改版中面臨的一系列問題，以及相關的思考。其中對于 Web、小程式、RN 三端詳細提出了很多思路和實踐集錦，很值得借鑒。

小程式體驗評分滿分優化

同樣是京喜小程式，曆經多次改版和優化後，在 Audits 評分中已經獲得了滿分。文中提到了多種優化的細節和方法，嘗試了很多優化的可能，相信這些思路能夠在其他的項目中，也能夠得到應用，并大幅提升性能和使用者的體驗。

「蒲公英」期刊，每周更新，我們專注于挖掘「基礎技術、工程化、跨端架構技術、圖形程式設計、服務端開發、桌面開發、人工智能、設計哲學、前端架構」等多個大方向的業界熱點，并加以專業的解讀；不僅如此，我們還會推介精選凹凸技術文章，向大家呈現團隊内的研究技術方向。

擡頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物緻知，我們登高遠眺、滄海拾遺，以求積矽步而至千裡。

蒲公英 · JELLY技術周刊貢獻指南