渲染 10W 条数据

alpha_xiao

已于 2022-04-12 13:53:44 修改

阅读量193

点赞数 1

分类专栏： JavaScript

于 2022-04-02 11:16:14 首次发布

本文链接：https://blog.csdn.net/alpha_xiao/article/details/123916011

版权

前端开发性能优化 requestAnimationFrame 文档碎片数据渲染

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

主要思路是：使用文档碎片 ( createDocumentFragment) + 逐帧加载（requestAnimationFrame）

// 10W 数据源
const total = 100000
// 每次插入的条数
const once = 30
// 插入需要的次数,可能除不尽，向上取整
const loopCount = Math.ceil(total/once)
// 渲染的次数
let countRender = 0
// 获取插入的父节点
const ul = document.querySelector('ul')


// 添加数据的方法
function add() {
  // 创建虚拟节点
  const tempNode = document.createDocumentFragment()
  for(let i = 0;i < once;i++ ){
    const li = document.createElement('li')
    li.innerHTML = Math.floor(Math.random() * 10000)
    tempNode.appendChild(li)
  }
  ul.appendChild(tempNode)
  countRender++
  loop()
}

function loop(){
  if(countRender < loopCount){
    window.requestAnimationFrame(add)
  }
}

loop()