卡頓是用戶在使用軟件的過程中最容易直觀感受的性能問題。卡頓針對(duì)不同端又有不同的測(cè)試手段。

針對(duì)卡頓，是指每一幀畫面的渲染工作要在16ms內(nèi)完成.當(dāng)渲染時(shí)間超過16ms時(shí),就會(huì)出現(xiàn)不連貫和卡頓的感覺.

前端卡頓：

卡頓耗時(shí)

渲染的步驟:

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)化

調(diào)優(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.刪除無用代碼