深度剖析：前端怎样驾驭海量数据，实现流畅渲染的多种途径 ...

处置惩罚大量数据的渲染对于前端开辟来说是一项寻衅，但也是提拔网页性能和用户体验的重要环节。要有效办理这一问题，可以采用虚拟滚动（Virtual Scrolling）、分批渲染（Incremental Rendering）、利用Web Workers处置惩罚数据、利用前端分页（Pagination）、借助服务端渲染（SSR）来优化大量数据的处置惩罚。其中，虚拟滚动是一种非常有效的技能，它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不但提拔了滚动的流畅度，也减轻了浏览器的负担，尤实在用于长列表数据的展示。
一、分批渲染

分批渲染或称增量渲染，是指将数据分成若干批次进行处置惩罚和渲染，每次只处置惩罚一小部分数据，通过逐步完成整体渲染的方式，制止了一次性处置惩罚大量数据造成的卡顿征象。
实现分批渲染通常可以通过requestAnimationFrame()或setTimeout()等异步API分配任务，确保在每个渲染帧中只处置惩罚足够少的数据，制止阻塞主线程。
1、setTimeout定时器分批渲染

1. //发送请求
2. onMounted(() => {
3.     getData()
4. })
6. //获取数据
7. const getData = () => {
8.     fetch('http://124.223.69.156:3300/bigData')
9.         .then(res => res.json())
10.         .then(data => {
11.             let newData = chunksData(data.data)
12.             console.log(newData);
13.         })
14.         .catch(err => console.log(err));
15. }
17. //数据分页
18. const chunksData = (arr) => {
19.     let chunkSize = 10;
20.     let chunks = [];
21.     for (let i = 0; i < arr.length; i += chunkSize) {
22.         chunks.push(arr.slice(i, i + chunkSize));
23.     }
24.     return chunks
25. }
27. //setTimeout分页渲染
28. for (let i = 0; i < newData.length; i++) {
29.      setTimeout(() => {
30.           tableData.push(...newData[i])
31.      }, 100*i)
32. }

复制代码

2、利用requestAnimationFrame()改进渲染

2.1、什么是requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个API,通常用于动画和游戏开辟。它会把每一帧中的全部DOM操作集中起来,在重绘之前一次性更新,并且关联到浏览器的重绘操作。
2.2、为什么利用requestAnimationFrame而不是setTimeout或setInterval

与setTimeout或setInterval相比,requestAnimationFrame具有以下上风:

• 通过系统时间间隔来调用回调函数，无需担心系统负载和阻塞问题，系统会自动调整回调频率。
  
• 由浏览器内部进行调度和优化，性能更高，消耗的CPU和GPU资源更少。
  
• 制止帧丢失征象，确保回调连续执行，实现更流畅的动画结果。
  
• 自动合并多个回调，制止不必要的开销。
  
• 与浏览器的刷新同步，不会在浏览器页面不可见时执行回调。
  

2.3、requestAnimationFrame的上风和实用场景

requestAnimationFrame最实用于必要连续高频执行的动画,如游戏开辟,数据可视化动画等。它与浏览器刷新周期保持划一,不会因为间隔时间不均匀而导致动画卡顿。
[code]const renderData = (page) => {
     if(page >= newData.length) return
     requestAnimationFrame(() => {
            tableData.push(...newData