ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端列表数据太多导致页面卡顿就这么处置处罚 [打印本页]

---

作者: 汕尾海湾    时间: 2024-11-14 22:53
标题: 前端列表数据太多导致页面卡顿就这么处置处罚
实际场景

起首看以下两个实际场景：
   场景一：有一个数据列表，数据量非常大且每一个数据项都有几十列乃至更多，且后端未做分页，一次将所有的数据返回到前端，此时全部渲染用户需要等待很长时间才能看到页面，乃至用户的滑动利用都会比力卡。
场景二：同样有一个数据量非常大的数据列表，后端做了分页，前端一次请求50条数据，页面首次渲染非常快，上拉加载也很流通。随着用户不停上拉加载，页面上的dom越来越多，逐渐的上拉加载就变得卡顿了。
  在以上两个场景中就是我们平常所说的长列表无法避免的题目，紧张缘故原由是页面中的dom太多导致渲染卡顿。现在最优的方案是假造列表
什么是假造列表

   概念：假造列表是一种优化长列表加载性能的技术，通过只渲染用户当前可见的元素，极大地进步了用户体验和应用性能。
  假造列表实现原理

   假造列表的实现原理紧张是对列表的可视地区举行渲染，而对非可看法区不渲染或部分渲染。
  

• 起首需要准备两个数据源
  
  
  
  • 第一个是原始数据源，用于存放所有的应该渲染到页面上的数据
    
  • 第二个是部分数据源，用于存放要渲染到可视地区和部分不可视地区的数据，以下是部分数据源生成方式：           部分数据源依赖原始数据源和当前可视地区生成，假设我们盼望页面最多渲染100条实际数据首次渲染时，我们对原始数据举行遍历
    
    
    
    • 若原始数据源长度小于100条，则原始数据源全部加到部分数据源数组中
      
    • 若原始数据源长度大于100条，则原始数据源中前100条数据加入到部分数据源中，第100条以后的数据以 {} 的情势加入到部分数据源中。
      
          
    
    
    
    • 特别说明：部分数据源中添加 {}目标时为了占位，即页面中虽然不渲染此条数据，但依然占据位置
      
          
    
  
  
• 监听页面滚动事件，更改部分数据源
  
  
  
  • 设置监听事件
    window.removeEventListener('scroll', handleScroll);
    （留意：若利用前端框架或组件库，设置监听事件的方式可以不同，依据实际的事件监听添加方式设置监听事件）
    
  • 在监听事件 handleScroll 中更新部分数据源           根据滚动的位置，更新部分数据源中的值
    
    
    
    • 通过事件对象的scrollTop属性获取当前滚动的位置
      
    • 假设每条数据都是同样的高度，获取到一条的高度 itemHeight，则用scrollTop/itemHeight 获取到当前可视地区滚动的位置第index个
      
    • 遍历原始数据源，若当前数据在 index-50 ~ index+50 之间，则将此条数据加入到部分数据源中，否则，将{}加入到部分数据源中占位
      
          
    
  
  
• 将部分数据源遍历渲染到页面上
  

实战中假造列表的题目及相应解决方案

页面滑动过快可能会有白屏题目，在此仅提供一个思路：可利用骨架屏的方案处置处罚

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4