应用卡顿与响应耗时

卡顿是用户在使用软件的过程中最容易直观感受的性能问题。卡顿针对不同端又有不同的测试手段。

针对卡顿,是指每一帧画面的渲染工作要在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.删除无用代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容