A4--車薇--酷家樂前端性能保障體系.pdf

《A4--車薇--酷家樂前端性能保障體系.pdf》由會員分享，可在線閱讀，更多相關《A4--車薇--酷家樂前端性能保障體系.pdf（45頁珍藏版）》請在三個皮匠報告上搜索。

1、酷家樂前端性能保障體系車薇群核科技(酷家樂)測試開發專家車薇酷家樂、阿里巴巴等互聯網公司具備13年測試開發經驗。多年全站性能優化、質量架構、專項保障經驗；熟悉toB、toC不同行業領域體系技術架構；具備海外全球化復雜網絡應對策略、及跨國多機房端到端性能保障體系；多項（6-8）國家個人專利獲得者?？峒覙窚y試開發專家，酷家樂全站性能優化負責人目錄CONTENTS!01 !#$%&()*02 +,-%&./03 01%&./04 01背景酷家樂酷家樂云設計工具介紹假如你是一位馬上要裝修的業主戶型是不是要改一下?地面用什么瓷磚？臥室做幾個衣柜，用什么顏色？客廳沙發用什么款式，怎么擺放？.酷家樂云設計工

2、具是一款在線家裝設計工具5分鐘搞定裝修設計10秒鐘生成效果圖1分鐘生成3D虛擬樣板間面臨的性能問題&挑戰大方案打不開，國際網絡延遲大，體驗差黑白屏、崩潰操作模型&畫布卡頓渲染慢，出不了圖方案加載慢，打不開性能年年優化，但缺乏體系化，前端性能是重災區性能專項技術攻堅，解決大場景問題、解決黑白屏、圖片性能問題面臨的問題挑戰1挑戰202設計工具性能保障體系!性能標準&卡口流程!#性能監控!$性能技術治理!%性能基建設計工具性能保障體系標準統一、指標細化、基線對比&卡口策略，版本常態化性能保鮮對預加載、懶加載、包體積優化、場景幀率卡頓等常見的前端優化性能技術原理進行剖析性能自動化框架、性能API及專項

3、檢查方法性能監控體系及性能度量作為很重要的一環，通過監控發現問題，結合性能標準，進行專項治理。設計工具性能標準2022之前2022之后VS指標豐富，體系化標準化指標單一，非標準化!#$%&()*工具發版性能卡口流程參照設計工具版本發布流程，要求雙周大版本實施性能卡口，卡口范圍包含方案加載耗時、核心場景平均幀率/最長幀/最后幀&內存增長、包體積卡點，線下性能基線新老版本對比性能退化超5%卡住不予以發布卡口要求局部/小范圍：當期修復不了可走緊急報備，進入限期整改流程嚴重/大范圍：方案加載耗時超20%&內存增長超10%，核心場景幀率退化超50%，屬紅線不能就緊急報備，當期必須修復性能監控度量體系性能

4、度量及性能監控體系作為很重要的一環，通過監控發現問題，進行專項治理，結合性能標準等進行長效治理。性能監控體系產品介紹設計工具性能主要有哪些問題加載慢原因&技術手段性能基建如何發現卡頓原因&技術手段性能基建如何發現黑白屏-內存泄漏&崩潰技術原因&防止手段性能基建如何發現如何做到防、治相結合？加載慢常見原因方案加載慢進入云圖工具方案打開慢方案加載失敗，提示無法訪問頁面從主工具進入全屋定制方案打開慢Coohom國際站進方案99%卡住了二級入口功能耗時長進入施工圖紙慢單操作耗時長：圖紙自動標注慢瞬時行為耗時長：刪除墻、渲染手動燈光-3D放置各類光源瞬時性能耗時久，存在明顯的阻力業務側常見的加載慢問題有

5、哪些？性能特征是什么？性能加載治理-Prefetch預加載、包體積瘦身總 體 策 略：空 間 換 時 間，異 步 化，并 行Prefetch要點在啟動階段，利用瀏覽器的空閑時間在預加載后續會使用到的資源和數據，需保證幾點不能阻塞主線程不能占用太多內存不能占用太多帶寬性能加載治理-懶加載名詞定義 延時加載：代碼和數據在云圖啟動階段不加載，推遲到功能被激活的時刻再加載 按需加載：在云圖啟動階段，根據權限點等來決定是否加載某個插件，在后續云圖使用的過程中，不會動態的調整這個是否加載的結論4 40%0%!哪些是 延時加載 ，哪些是按需加載？針對產品形態的切分方式：代碼加載的時間變化，數據注入（docu

6、ment source）時間變化用戶的體感的影響：!#$%&()*+,-./0123456*78-9./01,-:;#$/?A78-BCDE#$%&工具性能體系-防-性能自動化框架關系圖工具性能體系-防-加載性能自動化檢測API工具方案加載耗時API：第一次無緩存、第三次打開方案有緩存驗證方案細分耗時-應用程序啟動：openDesignAppStart加載類-單操作耗時：Performance getPerfInfo()瞬時行為-渲染阻塞耗時：Performance getInstantPerfInfoGoogle Lighthouse加載耗時：Performance getInstantPe

7、rfInfo工具性能體系-防-方案加載性能看板版本發布前的卡口發現，7月中定制方案加載耗時明顯增高了，版本優化后基線回到正常水位卡頓常見原因畫布操作工具2/3D視圖操作畫布：平移、縮放、拖拽畫布，畫布視角切換戶型操作操作組合家具：旋轉&拖拽戶型繪制行為慢：畫墻/畫梁/畫柱/畫地板分割線等模型操作全屋定制-組合柜體拖入、拖拽卡頓操作定制門窗幀率低辦公，拖拽裝配體卡頓，kata連接卡頓渲染光源操作：復雜方案，照明燈效全開后操作卡頓業務側常見的卡頓有哪些原因？場景幀率治理-屏幕卡頓掉幀原因卡頓掉幀原因屏幕顯示原理平均幀 連續操作的平均幀率穩定幀 去除前后3幀最大幀耗時 丟幀卡頓主要參考指標最后幀耗時

8、丟幀卡頓主要參考指標掉一幀間隔時間多久呢？場景幀率治理-找尋性能瓶頸 瀏覽器-Performance，進行性能profile 環境對比，找尋性能瓶頸&問題幀率優化BP刪除不必要的更新避免高頻調用低效接口React框架一些不推薦寫法等場景幀率性能-防-幀率性能自動化檢測API場景幀率性能-防-性能卡頓系數組合看板黑白屏-內存泄漏-治!#$%&()*+,-./01+2345678,-9:+;?AA#(BC+DDEEEFGHIJKLM6DN+OCPQRSTU+VWXYZ+GC_7EK+FG9a6EEbcde+fghijklmFnaop+qorstuvv,-./wxyzyz#XYZiz|+45?黑白屏

9、-內存泄漏-防內存泄漏原因全局變量：用的太多，作用域不對事件監聽器：用完忘記移除定時器：未清理的定時器循環引用：兩個或多個對象相互間引用，也不會被回收內存溢出：一次性處理大數據導致內存不足而溢出內存泄漏模型FGHIJKL=HIMNOP34QR2ST-UNVWXinitYZVW-_aS7bcd-,efghiUjkEUlk-mnopLNqrst-uOvwfghi-HI_xyEzbbzbbdd|!m效果&總結形成一套體系標準流程&保障機制：研發過程&線上全覆蓋，版本卡口攔截問題，線上長效性能保鮮防治一體化：防結合性能檢測能力持續發現問題，治問題驅動結合架構分治，深入技術總結優化經驗值效果：工具半年攔

10、截性能問題30+，覆蓋密度95%，運行性能自動化任務3萬+03大場景性能專題什么是大場景辦公行業P99復雜度定義面積：XX-XX 平方房間：房間數XX，墻體數XX左右家具：家具數量XX-XX左右，定制柜XX左右定制組合柜：XX個門窗：XX-XX（對應XX門窗）參數化總節點數：XXXX 左右單模型復雜度：XX節點硬裝面數：XX場景面片數：XX左右怎么算復雜大場景？如何定義？最key的性能瓶頸在那里？大場景性能專題-防大場景性能專題-治根因是什么？發現了問題怎么治理？大場景主要優化技術模型凍結：凍結全方案，解鎖局部，進行按需加載的模式，操作僅對局部非凍結模型場景吸附源優化：移除部分吸附源，如2D場

11、景吸附源只計算2D圖形，可移除吸附門窗邏輯隱藏節點優化：降低隱藏節點的占比，讓顯示效率很高，進行節點抑制模型簡化：轉換屏風、轉接柱的3D套層模型大場景性能優化成果客戶大場景性能項目成果-2023H1 kada裝配性能提升了XX倍 大方案加載、進入定制、設計可支撐至XX平，滿足方案設計-報價-下單全流程跑通 定制交互提升了XX倍 有效性檢測更新也有較大提升 導出施工圖速度提升了XX倍+導出算量清單突破XX節點數限制，導出報表突破XX限制04圖片性能專題圖片性能專題EE!ZO“”YZQ?pZCnZCn+O O Z+mF“”mF+ZyDE6EE+Zy9aBCZy9aBC Q-Z為什么要做圖片性能呢？

12、+,-./0123456789:;?62ABCDEFGHIJ26圖片性能標準大類細類備注（標準）圖片圖片大小統一口徑推進圖片大小不超過500kbWebp格式轉化jpg圖壓縮比例：4:3，原圖75%png圖壓縮比例：20:1，原圖的5%，收益非常高bmp：不能轉webp，不建議使用bmp格式尺寸裁剪業務場景關聯尺寸比例（1600 x900、500 x500等），可與webp疊加Q值壓測Q值壓縮（Q90、Q70、Q50等），可與webp/尺寸裁剪策略疊加圖片域名收斂多域名下，域名解析耗費太多動圖&短視頻GIF、MP4短視頻視頻播放器每秒幀數控制視頻播放器碼率：低700kb/秒、中1.2mb/秒、高

13、1.5mb/秒TAB頁播放器對象控制最大3個，播放結束內存回收機制監控類圖片監控圖片大小監控：大小、類型、可區分場景，超閥值告警不同業務場景下的圖片壓縮策略監控圖片異常：4XX異常CDNCDN-圖片緩存命中率（盡量避免圖片回源比例高）CDN-圖片優化配置規則圖片壓縮策略KLM4NIJHEIF 壓縮TPG 壓縮SVG 壓縮1 ：2065KB 1335.2KBimage/autoorient,1/resize,m_fill,w_240,h_240,limit_0/quality,Q_85/sharpen,1/format,webp圖片優化效果性能優化-展望未來利用云端海量的CPU運算及GPU渲染能力發揮到極致實現1萬平，甚至去探索10萬平，支持更大更復雜的方案，更好服務商空&辦公、室外建筑等大型生態行業客戶隨著AI、AR等技術的飛度發展，酷家樂也會擁抱和全面迎接AI時代的到來全球化做深做廣，擁抱全人類，升級改造為標準的跨國多機房標準模式，完善全球化網絡拓撲節點和國家邊緣節點加速策略，讓性能體驗絲般順滑重云端更智能更大更復雜國際化感謝聆聽關注酷家樂公眾號感謝聆聽關注QECon公眾號