卡顿是用户在使用软件的过程中最容易直观感受的性能问题。卡顿针对不同端又有不同的测试手段。
针对卡顿,是指每一帧画面的渲染工作要在16ms内完成.当渲染时间超过16ms时,就会出现不连贯和卡顿的感觉.
前端卡顿:
卡顿耗时
渲染的步骤:
1.javascript:js实现动画效果,dom操作等.
2.style:css样式计算和应用.
3.layout:布局
4.paint:绘制
5.composite(render layer合并):合并图层并显示到屏幕上.
前端卡顿主要在请求耗时和资源消耗(js css)两方面优化。
js代码优化
调优
1.减少http请求,从而减少下载请求的时间耗时
2.利用缓存机制
3.分次加载
js引擎长时间独占线程,加载数据过多,执行时间过长,会导致页面响应时间过长.
4.CSS样式优化
可优化的地方, 尽可能一次measure, 避免重复的measure.提示开发者不要写出太复杂太多嵌套的结构.
样式计算转移到 Native 进行.分离并提前加载样式表.
4.避免页面元素重绘和重排
尽量减少dom操作,降低样式选择器的复杂度
5.模板复用,组件复用
客户端卡顿:
卡顿
过度绘制
客户端代码优化
1.避免大规模,复杂的布局,避免层级过深
2.GPU加速,避免过度绘制
3.避免主线程函数耗时过多,采用handler或者asynctask处理.
4.内存抖动,频繁gc----卡顿
由于gc导致UI卡顿,一般是由于内存抖动,频繁gc造成的.执行gc的时候所有操作都会暂停,等到gc结束,才能继续执行操作.
5.不可见区域不绘制,较少 draw 代码的执行,提高滑动效率
6.批量处理,定时上报
7.内存优化
8.事件绑定
9.资源复用
10.图片压缩
11.删除无用代码