性能優(yōu)化最佳實(shí)踐

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

模擬原生環(huán)內(nèi)存占用最后減少了87%懶加Frames情況,實(shí)際操作流 炸天