卡頓是用戶在使用軟件的過程中最容易直觀感受的性能問題缤谎。卡頓針對(duì)不同端又有不同的測(cè)試手段琐馆。
針對(duì)卡頓瀑粥，是指每一幀畫面的渲染工作要在16ms內(nèi)完成.當(dāng)渲染時(shí)間超過16ms時(shí),就會(huì)出現(xiàn)不連貫和卡頓的感覺.
前端卡頓：
渲染的步驟:
1.javascript:js實(shí)現(xiàn)動(dòng)畫效果,dom操作等.
2.style:css樣式計(jì)算和應(yīng)用.
3.layout:布局
4.paint:繪制
5.composite(render layer合并):合并圖層并顯示到屏幕上.
前端卡頓主要在請(qǐng)求耗時(shí)和資源消耗(js css)兩方面優(yōu)化。
js代碼優(yōu)化
1.減少http請(qǐng)求,從而減少下載請(qǐng)求的時(shí)間耗時(shí)
2.利用緩存機(jī)制
3.分次加載
js引擎長(zhǎng)時(shí)間獨(dú)占線程,加載數(shù)據(jù)過多,執(zhí)行時(shí)間過長(zhǎng),會(huì)導(dǎo)致頁面響應(yīng)時(shí)間過長(zhǎng).
4.CSS樣式優(yōu)化
可優(yōu)化的地方, 盡可能一次measure, 避免重復(fù)的measure.提示開發(fā)者不要寫出太復(fù)雜太多嵌套的結(jié)構(gòu).
樣式計(jì)算轉(zhuǎn)移到 Native 進(jìn)行.分離并提前加載樣式表.
4.避免頁面元素重繪和重排
盡量減少dom操作,降低樣式選擇器的復(fù)雜度
5.模板復(fù)用,組件復(fù)用
客戶端卡頓：
客戶端代碼優(yōu)化
1.避免大規(guī)模,復(fù)雜的布局,避免層級(jí)過深
2.GPU加速,避免過度繪制
3.避免主線程函數(shù)耗時(shí)過多,采用handler或者asynctask處理.
4.內(nèi)存抖動(dòng),頻繁gc----卡頓
由于gc導(dǎo)致UI卡頓,一般是由于內(nèi)存抖動(dòng),頻繁gc造成的.執(zhí)行g(shù)c的時(shí)候所有操作都會(huì)暫停,等到gc結(jié)束,才能繼續(xù)執(zhí)行操作.
5.不可見區(qū)域不繪制萍诱，較少 draw 代碼的執(zhí)行悬嗓，提高滑動(dòng)效率
6.批量處理,定時(shí)上報(bào)
7.內(nèi)存優(yōu)化
8.事件綁定
9.資源復(fù)用
10.圖片壓縮
11.刪除無用代碼
