浅析如何利用时间分片高性能渲染十万级数据

最新推荐文章于 2024-07-09 10:46:36 发布

短暂又灿烂的

最新推荐文章于 2024-07-09 10:46:36 发布

阅读量243

点赞数

分类专栏：优化方案前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42232156/article/details/120525647

版权

优化方案同时被 2 个专栏收录

38 篇文章 1 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

前端

266 篇文章 11 订阅

订阅专栏

本文探讨了一次性渲染大量数据时如何避免页面卡顿，重点介绍了时间分片技术，包括使用定时器、requestAnimationFrame以及DocumentFragment进行优化，解决了页面卡顿和闪屏现象，提升了用户体验。

摘要由CSDN通过智能技术生成

　　在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法：

1、时间分片

2、虚拟列表

　　我们首先来看一下“时间分片”的原理。

一、最粗暴的做法（一次性渲染）

　　我们先来看看最粗暴的做法，一次性将大量数据插入到页面中：

<ul id="container"></ul>

  let now = Date.now()
  let total = 100000
  let ul = document.getElementById('container')
  for (let i=0; i<total;i++) {
    let li = document.createElement('li')
    li.innerHTML = i
    ul.appendChild(li)
  }
  console.log('JS运行时间：', Date.now() - now)
  setTimeout(_ => {
    console.log('渲染总运行时间：&#