做淘宝客优惠券网站还是APP赚钱,长治网站建设培训文件,东阳网站推广,网站开发如何给用户发邮件卡顿渲染耗时如图#xff1a; 卡顿表现有如下几个方面#xff1a;
网络图片渲染耗时大上下滑动反应慢#xff0c;甚至画面不动新增一页数据加载渲染时耗时比较大#xff0c;上下滑动几乎没有反应#xff0c;画面停止没有交互响应
背景
实际上这套数据加载逻辑已经运行…卡顿渲染耗时如图 卡顿表现有如下几个方面
网络图片渲染耗时大上下滑动反应慢甚至画面不动新增一页数据加载渲染时耗时比较大上下滑动几乎没有反应画面停止没有交互响应
背景
实际上这套数据加载逻辑已经运行了快一年多了之前也没有这些问题的。笔者是后面接手的也没觉得有问题。也许是最初数据量小当时看不出来 运行到今天设计业务数据量是3650条实际业务数据条数是1100条左右这个业务数据量原本也不是特别大。所以也没觉得有问题。 直到其他业务组的数据接入后数据量起来了这个列表数据就卡顿的几乎不能用了而不凑巧被领导知道了于是就有了本次优化
原本的设计如下
列表布局 android.support.v4.widget.NestedScrollViewandroid:idid/nestedScrollViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:fillViewporttrueapp:layout_behaviorstring/appbar_scrolling_view_behaviorlive.bingoogolapple.refreshlayout.BGARefreshLayoutandroid:idid/mRefreshLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:layout_behaviorstring/appbar_scrolling_view_behaviorandroid.support.v7.widget.RecyclerViewandroid:idid/recycleView_playbackandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:background#FFFFFFFFandroid:nestedScrollingEnabledfalseandroid:paddingLeft20dpandroid:paddingRight10dpandroid:paddingBottom8dpapp:layout_behaviorstring/appbar_scrolling_view_behavior //live.bingoogolapple.refreshlayout.BGARefreshLayout/android.support.v4.widget.NestedScrollViewRecyclerView.Adapter数据加载和下面类似
RecyclerView.Adapter 是用于在 RecyclerView 中展示数据的关键组件之一。下面是使用 RecyclerView.Adapter 的基本步骤
创建自定义的 Adapter 类首先需要创建一个继承自 RecyclerView.Adapter 的自定义 Adapter 类该类负责管理数据集合并将数据绑定到 RecyclerView 的 ViewHolder 上。
public class MyAdapter extends RecyclerView.AdapterMyAdapter.MyViewHolder {// 适配器的代码
}创建 ViewHolder 类在自定义的 Adapter 类中需要创建一个继承自 RecyclerView.ViewHolder 的内部类用于表示 RecyclerView 中的每个子项的视图。
public class MyAdapter extends RecyclerView.AdapterMyAdapter.MyViewHolder {public static class MyViewHolder extends RecyclerView.ViewHolder {// ViewHolder 的代码}
}实现 Adapter 的方法在自定义的 Adapter 类中需要实现一些方法例如 onCreateViewHolder、onBindViewHolder、getItemCount 等。这些方法用于创建 ViewHolder、绑定数据到 ViewHolder、获取数据集合的大小等操作。
public class MyAdapter extends RecyclerView.AdapterMyAdapter.MyViewHolder {Overridepublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {// 创建 ViewHolder}Overridepublic void onBindViewHolder(MyViewHolder holder, int position) {// 绑定数据到 ViewHolder}Overridepublic int getItemCount() {// 获取数据集合的大小}
}在 onCreateViewHolder 方法中创建 ViewHolder在 onCreateViewHolder 方法中需要创建并返回一个 ViewHolder 对象用于表示 RecyclerView 中的每个子项的视图。
public class MyAdapter extends RecyclerView.AdapterMyAdapter.MyViewHolder {Overridepublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {// 创建 ViewHolderView itemView LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);return new MyViewHolder(itemView);}
}在 onBindViewHolder 方法中绑定数据到 ViewHolder在 onBindViewHolder 方法中需要将数据绑定到 ViewHolder 上以便在 RecyclerView 中显示。
public class MyAdapter extends RecyclerView.AdapterMyAdapter.MyViewHolder {Overridepublic void onBindViewHolder(MyViewHolder holder, int position) {// 绑定数据到 ViewHolderMyData data dataList.get(position);holder.bindData(data);}
}将 Adapter 与 RecyclerView 关联最后需要将自定义的 Adapter 与 RecyclerView 关联起来以便在 RecyclerView 中展示数据。
RecyclerView recyclerView findViewById(R.id.recycler_view);
MyAdapter adapter new MyAdapter(dataList);
recyclerView.setAdapter(adapter);在上面的代码中dataList 是数据集合R.layout.item_layout 是每个子项的布局文件。通过以上步骤就可以使用 RecyclerView.Adapter 在 RecyclerView 中展示数据了。
Glide图片加载库使用 Glide.with(context).load(imgUrl).into(holder.imageview);BGARefreshLayout上拉加载更多组件使用方式叠加NestedScrollView BGARefreshViewHolder bgaNormalRefreshViewHolder new BGANormalRefreshViewHolder(this, true);mRefreshLayout.setRefreshViewHolder(bgaNormalRefreshViewHolder);nestedScrollView findViewById(R.id.nestedScrollView);if (Build.VERSION.SDK_INT Build.VERSION_CODES.M) {nestedScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {Overridepublic void onScrollChange(View view, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {NestedScrollView toNesstedScrollView (NestedScrollView) view;if (scrollY 5|| toNesstedScrollView.getChildAt(0).getMeasuredHeight() view.getMeasuredHeight()) {return;}int height toNesstedScrollView.getChildAt(0).getMeasuredHeight()- view.getMeasuredHeight();if (scrollY height) {// 为BGARefreshLayout 设置代理if(mRefreshLayout.getDelegate()null){mRefreshLayout.setDelegate(XXXXActivity.this);}mRefreshLayout.beginLoadingMore();}}});}内存上到没有太多可书写的基本没有涉及内存方面的问题
设定优化方向和目标
画面卡顿的由来
Android 屏幕渲染 16ms 柱形图是指在 Android 应用程序中屏幕渲染所花费的时间以柱形图的形式进行可视化展示。这个柱形图通常用于监测应用程序的性能特别是在绘制 UI 时所花费的时间。 在 Android 中每秒钟需要渲染 60 帧的屏幕即每帧的时间限制为 16 毫秒1 秒 1000 毫秒 / 60 帧 ≈ 16.67 毫秒。如果屏幕渲染超过 16 毫秒就会导致丢帧屏幕卡顿。 柱形图中的每个柱子代表一帧的渲染时间。如果柱子的高度超过 16 毫秒就表示该帧的渲染时间超过了理想的 16 毫秒限制。柱形图越高表示渲染时间越长应用程序的性能可能会受到影响。 通过观察柱形图开发者可以判断应用程序在绘制 UI 时是否存在性能问题并进行相应的优化。优化的目标是尽量保持每帧的渲染时间在 16 毫秒以内以确保流畅的用户体验。
蓝色部分表示绘制时间或者在Java层创建和更新display list的时间。在一个View 实际被渲染前它需要先转换为GPU能识别的格式。简单来说可能就是几个绘制命令复杂一点我们可能在嵌入了一条从canvas获取的自定义路径。这一步完成之后输出结果就会被系统作为display list缓存起来。蓝色部分记录了这一帧对所有需要更新的view完成这两步花费的时间。当它很高的时候说明有很多view突然无效invalidate了或者是有几个自定义view在onDraw函数中做了特别复杂的绘制逻辑 优化方向一清理布局xml中并没有用到或者被设置无效invalidate的view组件减少布局嵌套层级红色部分代表执行时间也就是Android 2D渲染引擎OpenGL执行display list的时间。为了将变化绘制在屏幕上Android需要使用OpenGL ES API来绘制这些display list信息OpenGL最终将数据传给了GPU然后GPU渲染到屏幕上。View越复杂OpenGL绘制所需要的命令也越复杂。如果红色这一段比较高复杂的view都可能是罪魁祸首。还有值得注意的是比较大的峰值这说明有些view重复提交了也就是绘制了多次而它们可能并不需要重绘 优化方向二采用局部更新view策略橙色部分代表处理时间更进一步就是CPU告诉GPU渲染已经完成的时间。这部分是阻塞的CPU会等待GPU知道确认收到了命令如果这里比较高说明GPU做的任务太多了通常是由于很多复杂的view绘制从而需要过多的OpenGL渲染命令去处理
看下面这张渲染耗时图柱都破了屏幕了底部那条红线就没放眼里蛤
开启渲染耗时图柱开关
一般都在开发者选项-GPU呈现模式分析
设定优化目标为京东首页在同一机型上的交互表现
京东首页交互流畅度如下
分以下阶段进行解析当前问题的症结点
当前的设计是否满足交互流畅度。流畅度是否能达到京东首页的体感设计数据只加载文字加载文字后再加载静态图片测试验证当前布局、数据逻辑加载的交互体感情况。如不满足那基本就能确定是布局和数据加载逻辑有缺陷则需要进行重构或重写在第1条满足的基础上测试同一个网络图片加载到所以列表子项里展示。记录交互体感和京东首页进行对比分析测试单列动态图片加载效果并记录再次测试双列动态图片加载效果并记录
请看下一章 【Android】画面卡顿症结点分析二
smartApi接口开发工具推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具由于开发人力就作者一个所以人力有限因此v1.0.0版本功能进行精简大功能项有
api参数填写api请求响应数据展示PDF形式的分享文档Mock本地化解决方案api列表数据本地化处理再加上UI方面的打磨
下面是一段smartApi使用介绍
下载地址
https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwdcsdn
