评论

快进来看看简单易懂的分分钟提升小程序性能50%上下的性能优化

一个长列表 Web 页面,如果展示成千上万条数据,那么页面中会有数万甚至数十万的HTML节点,会巨大的消耗浏览器性能,给用户造成非常不友好的体验,此文将介绍如何用高性能虚拟列表+节流+分页进行优化

场景引入

为什么需要用到高性能虚拟列表+节流+分页请求的优化?

当有场景需求为需要将大量数据(10000条)呈现在一页上,我们不断下拉访问,页面中有大量的数据列表的时候,用户会不会有不好的体验?会不会出现滚动不流畅而卡顿的情况?会不会因卡顿而出现短暂的白屏现象(数据渲染不成功)?

通过微信开发者工具自带的调试器->Network页面,我们可以观察到当有长列表时如果不使用高性能虚拟列表+节流+分页请求的优化,会出现以下问题:

  1. FPS:每秒帧数,图表上的红色块表示长时间帧,很可能会出现卡顿。
  2. CPU:CPU消耗占用,实体图越多消耗越高。
  3. NET:网络请求效率低,一次性请求10000条的渲染效率远远低于分1000次,每次请求10条数据
  4. 内存:滑动该列表时明显能看到内存消耗大。

总结:如果需要将大量数据(10000条)呈现在一页上,可以通过高性能虚拟列表+节流+按需请求分页数据并追加显示。

优化的具体实现可拆分为以下需求(将一个大问题拆分为一个个小问题并逐个去解决):

  1. 不把长列表数据一次性全部直接显示在页面上。
  2. 截取长列表一部分数据用来填充屏幕容器区域。
  3. 长列表数据不可视部分使用使用空白占位填充。
  4. 监听滚动事件根据滚动位置动态改变可视列表。
  5. 监听滚动事件根据滚动位置动态改变空白填充。
  6. 分页从服务器请求数据,将一次性请求所有数据变为滚动到底部才再次向服务器发送获取数据的请求


更详细的实现方法请阅读我的下一篇文章:https://developers.weixin.qq.com/community/develop/article/doc/000a2618d34908e3610d5978856c13

最后一次编辑于  2021-11-12  
点赞 4
收藏
评论

1 个评论

  • 程序员小高与Bug
    程序员小高与Bug
    2022-02-07

    滚动过快白屏的问题有什么方案

    2022-02-07
    赞同
    回复 1
    • Smooth
      Smooth
      2022-03-06
      首先问题产生是过快导致还没请求新数据,可以用 requestAnimation 那个东西优化,也可以用预加载提前请求渲染一部分数据
      2022-03-06
      回复
登录 后发表内容