Vue性能優化最佳實踐阿里巴巴移動事業群高級前端工程 劉欣Vue.js+Scra了 了ProfileChromeDevTools的Profiles發現內存泄漏問題Snapshot1:Snapshot1: 首屏占用內存132MBSnapshot230次后占用內存811MBHeapSnapshotsSummaryProfileHeapSnapshotsSummaryProfileHeapSnapshotsComparison-對比兩個堆快照的內存情況Vue小課堂1數據驅動視 數據是雙向綁定指令(Directives特殊的帶有前綴v的特性。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到DOM上。Observer、Directive、Watcher數 減少ObserverDirective、Watcher組件內不嵌套組件,一個卡片只有一個組件（減少Watcher）（減少Directive）卡片的事件托管到列表容器上（減少Directive）… 10??40?????30300???1200?? 10??10?????30300???300??優化后占用內存～30M優化后占用內存～30M,下降了625 Keep越往下加載,DOM越多,想不卡都難!盡量減少DOM移除視窗外不可見的DOM列表最多只有30張卡片,DOM優化后占用內存～20M優化后占用內存～20M75 Vue小課堂2把一個普通對象?? Vue實例作?的data選?，Vue.js將遍歷它的屬性，用Object.defineProperty將它???用戶看不到getter/setters，但是在內部它? Vue.js追 ，在屬性被? Object.freeze(Vuev1.0.18releaselogv-partia減少Vue編譯組件產生的去掉無用的getter/setterv-partiaObject.freeze(優化后占用內存～10M優化后占用內存～10M,下降了875K.OTimelinTimeline控制板介紹60FP顯示器刷新頻率:60Hz60次/秒)60FPFPS-framespersecon1s/60=16.6m一幀盡量在16.6ms內完成藍色:網絡和HTML黃色:JavaScrip 運紫色:計算樣式和布局(RecalculateStyleLayoutUpdateLayerTree)綠色:繪制和合成(Paint,CompositeLayers多于16ms完成的幀一般包括多個ImagDecode事件(代表一 完成 加載完成 觸發Paint事(繪制到對應顯示區域)60FP大量的Paint 實現 懶加載的Frames情絕大部分時間達到60FPS,實際操作流暢細小卻同樣重borderradiusboxshadow盡量少地觸發Layout和Pain只使用transform/opacity來實現動畫效果合并組內存占用減少625移除視圖外DO內存占用進一步減少了75%

模擬原生環內存占用最后減少了87%懶加Frames情況,實際操作流 炸天