后端返回10000条数据,前端如何渲染到页面上?

后端返回 10000 条数据,前端如何渲染到页面上?

最近一直听到一道面试题,即:后端返回 10000 条数据,前端怎么渲染到页面上?

首先想到的应该是分批处理,比如每次处理 10 条或者 20 条,然后处理的逻辑放到setTimeout里面,这样不会阻塞主逻辑和页面渲染。

所以第一版代码如下:

<h1>渲染一万条数据</h1>
<a href="https://mybj123.com" target="_blank">码云笔记</a>
<ul class="content"></ul>
<script>
  console.log(1);  
  // 总数据  
  const total = 10000, 
  // 每次处理数据  
  each = 20,  
  // 需要处理次数  
  needTimes = Math.ceil(total / each),  
  // 父容器
  content = document.querySelector('.content')  
  // 当前处理次数
  let currentTime = 0
  // 处理元素插入  
  function add() {    
    setTimeout(() =>{      
    console.log(3);     
     for (let i = 0; i < each; i++) { 
       const li = document.createElement('li')
       li.innerText = Math.floor(i+currentTime*each)
       content.appendChild(li)
      }
      currentTime++;
      if (currentTime < needTimes) add();
    },1000/60)
  }  
  add();
  console.log(2)
</script>

我们观察上面的代码,可以优化的点是add方法中的插入操作,我们知道元素的插入会消耗浏览器性能并引起页面重排,那我们把每次需要处理的元素收集起来,进行一次插入操作,这样相比之前单个元素插入就要好一些,但是这个时候如果用普通的 Dom 元素就会造成我们不需要的层级嵌套,有没有一个好的方法解决这个问题呢?

答案就是使用 createDocumentFragment

该方法创建一个新的空白的文档片段,使用方法如下:

let fragment = document.createDocumentFragment();

fragment是一个指向空DocumentFragment对象的引用,DocumentFragments是 DOM 节点。它们不是主 DOM 树的一部分。

通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树,在 DOM 树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面重排。

因此,使用文档片段通常会带来更好的性能。

优化后的代码如下:

<h1>渲染一万条数据</h1>
<a href="https://mybj123.com" target="_blank">码云笔记</a>
<ul class="content"></ul><script>
  console.log(1);
  // 总数据
  const total = 10000,
  // 每次处理数据
  each = 20,
  // 需要处理次数
  needTimes = Math.ceil(total / each),
  // 父容器
  content = document.querySelector('.content')
  // 当前处理次数
  let currentTime = 0
  // 处理元素插入
  function add() {
    setTimeout(() =>{
      console.log(3);
      const fragment = document.createDocumentFragment()
      for (let i = 0; i < each; i++) {
        const li = document.createElement('li')
        li.innerText = Math.floor(i+currentTime*each)
        fragment.appendChild(li)
      }
      content.appendChild(fragment)
      currentTime++;
      if (currentTime < needTimes) {
        add();
      }
    },1000/60)
  }
  add();
  console.log(2)
</script>

接下来我们主逻辑中能优化的点就是 setTimeout 了,我们知道 setTimeout 的执行时间会受到任务队列影响,并不一定完全按照第二个参数设置的毫秒数执行,而且上面我们设置了间隔时间假定为一秒 60 帧,是写死的。那针对这一部分我们有什么办法优化呢?

答案就是使用 requestAnimationFrame

window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画

该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()

那它有什么优点呢?

  1. requestAnimationFrame会把每一帧中的所有 DOM 操作集中起来,在一次重绘或重排中完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒 60 帧。由系统决定回调函数的执行时机,不会引起丢帧,不会卡顿;
  2. 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这就意味着更少的的 CPU,GPU 和内存使用量;
  3. requestAnimationFrame是由浏览器专门为动画提供的 API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了 CPU 开销。

优化后的代码如下:

<h1>渲染一万条数据</h1>
<a rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9iYWlkdS5jb20=" target="_blank">百度一下</a>
<ul class="content"></ul>
<script>
  console.log(1);
  // 总数据
  const total = 10000,
  // 每次处理数据
  each = 20,
  // 需要处理次数
  needTimes = Math.ceil(total / each),
  // 父容器
  content = document.querySelector('.content')
  // 当前处理次数
  let currentTime = 0
  // 处理元素插入
  function add() {
    console.log(3);
    const fragment = document.createDocumentFragment()
    for (let i = 0; i < each; i++) {
      const li = document.createElement('li')
      li.innerText = Math.floor(i+currentTime*each)
      fragment.appendChild(li)
    }
    content.appendChild(fragment)
    currentTime++;
    if (currentTime < needTimes) {
      window.requestAnimationFrame(add)
    }
  }
  window.requestAnimationFrame(add)
  console.log(2)
</script>

至此,个人认为就是比较完美的答案了,相关特性大家可以 copy 代码测试一下,本人亲测有效

如果您有更好的方法,欢迎评论区讨论!感谢阅读!

「点点赞赏,手留余香」

5

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 后端返回10000条数据,前端如何渲染到页面上?

发表回复