时间分片渲染一万条数据

分片渲染一万条数据

根据数据大小划分，每次加载固定的条数，例如

1. 一万条数据，每次渲染 100条；
2. 然后再渲染 100条，递归实现分片渲染；
3. 缺点
   1. 页面DOM会100条，100条的递增，页面会有抖动
   • DOM渲染太多，一万条数据，页面滚动卡顿

递归实现分片渲染

const container = document.querySelector('#root')
const total = 10000;
const bufferSize = 100; // 每次渲染 100条
let index = 0;
let id = 0;
let timer = Date.now();
loadDom()
function loadDom() {
  index += bufferSize;
  if(index > total) return;
  // 分片渲染，定时器是一个宏任务，会等待 GUI线程渲染完成后再执行
  setTimeout(() => {
    for(let i = 0; i< bufferSize; i++) {
      const el = document.createElement('p');
      el.innerHTML = ++id;
      container.appendChild(el);
    }
    // 10000条数据的执行时间
    console.log('JS-render100',Date.now() - timer)
    loadDom() // 递归
  }, 0)
}
// 同步代码先执行
console.log('JS-render',Date.now() - timer)
// 渲染DOM时间
setTimeout(() => {
  console.log('DOM-render',Date.now() - timer)
}, 0)

分片渲染优化

1. requestAnimationFrame代替 setTimeout
2. document.createDocumentFragment 代替 document.createElement ```jsx const container = document.querySelector(‘#root’) const total = 10000; const bufferSize = 100; let index = 0; let id = 0; let timer = Date.now();

loadDom() function loadDom() { index += bufferSize; if(index > total) return;

const fragment = document.createDocumentFragment(); requestAnimationFrame(() => { for(let i = 0; i< bufferSize; i++) { const el = document.createElement(‘p’); el.innerHTML = ++id; fragment.appendChild(el); } container.appendChild(fragment); // 100条数据的执行时间 console.log(‘JS-render100’,Date.now() - timer) loadDom() // 递归 }) }

// 渲染DOM时间 setTimeout(() => { console.log(‘DOM-render’,Date.now() - timer) }, 0)

![image.png](https://cdn.nlark.com/yuque/0/2022/png/112859/1651383248244-d025c7de-f7c3-4967-9171-4c03b002bc6d.png#clientId=u7467fd27-7eb3-4&from=paste&height=225&id=u9e8527a5&originHeight=494&originWidth=602&originalType=binary&ratio=1&rotation=0&showTitle=false&size=52409&status=done&style=none&taskId=u3d8c89be-790e-4bc3-b7ff-fbbe23da72d&title=&width=273.6363577054553)
<a name="sfs8N"></a>
## 一次性渲染一万条数据
页面渲染1万条 DOM
- JS渲染生成一万条数据，耗时 95ms
- DOM渲染到页面，耗时 可以646ms
- 缺点
   - 页面 loading时间长，白屏时间长
   - DOM渲染太多，一万条数据，页面滚动卡顿
![image.png](https://cdn.nlark.com/yuque/0/2022/png/112859/1651381186847-49124788-c771-43c8-84bd-ed22dae45afe.png#clientId=u7467fd27-7eb3-4&from=paste&height=62&id=u3610e451&originHeight=136&originWidth=434&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11685&status=done&style=none&taskId=u4659ba19-ec0c-478e-bf4d-416e3b9c5f6&title=&width=197.27272299695616)
```jsx
const container = document.querySelector('#root')
const total = 10000;
const timer = Date.now();
for(let i = 0; i< total; i++) {
  const el = document.createElement('p');
  el.innerHTML = i;
  container.appendChild(el);
}
// 10000条数据的执行时间
console.log('JS-render', Date.now() - timer)
// 渲染DOM时间
setTimeout(() => {
  console.log('DOM-render', Date.now() - timer)
}, 0)