详解前端如何对超大量数据进行渲染
作者：前端饲养员
这篇文章主要为大家详细介绍了前端如何对超大量数据进行渲染,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
前端性能优化的方向
- 分批渲染DOM：避免一次性渲染大量DOM，可以减少浏览器的性能压力。
- 集中进行DOM操作：将多次DOM操作集中在一起进行，减少不必要的渲染。
- 移除可视区域以外的DOM：对于不在可视区域的DOM元素，可以将其从DOM树中移除，以减少内存占用和渲染负担。
实现大量数据渲染的方法
1. 使用定时器
方法概述：通过setInterval定时器分批插入DOM元素，每次处理一定数量的节点。
代码示例：
export default (element, data) => {
const fragment = document.createDocumentFragment();
let timer = setInterval(() => {
for (let i = 0; i < 20; i++) {
const item = data.shift();
if (!item) {
clearInterval(timer);
break;
}
const div = document.createElement('div');
div.innerText = item.string;
div.setAttribute('class', 'item');
div.style.backgroundColor = item.color;
fragment.appendChild(div);
}
element.appendChild(fragment);
}, 100);
};
2. 用requestAnimationFrame代替定时器
方法概述：使用requestAnimationFrame来代替setInterval，它会在浏览器下一次重绘之前执行回调函数，从而更加精确地控制DOM操作的时机。
代码示例：
export default (element, data) => {
requestAnimationFrame(() => step(element, data));
};
const step = (element, data) => {
const fragment = document.createDocumentFragment();
for (let i = 0; i < 20; i++) {
const item = data.shift();
if (!item) {
break;
}
const div = document.createElement('div');
div.innerText = item.string;
div.setAttribute('class', 'item');
div.style.backgroundColor = item.color;
fragment.appendChild(div);
}
element.appendChild(fragment);
data.length && requestAnimationFrame(() => step(element, data));
};
3. 使用虚拟滚动
方法概述：虚拟滚动技术通过只渲染可视区域的数据来提高列表的渲染性能，并根据页面滚动动态添加或删除DOM节点。
实现过程：
- 设置父节点的
position为relative，子节点的position为absolute，并通过transform属性设置子节点的位置。 - 使用
boundary数组记录渲染区域的上下边界。 - 使用
startIndex和endIndex来确定需要渲染的数据范围。 - 定义
step变量表示每次批量添加或删除的DOM数量，以及threshold阈值来触发DOM的添加或删除。
代码示例：
export default (element, data) => {
const boundary = [0, 0];
let startIndex = 0;
let endIndex = 0;
const step = 10;
const threshold = 200;
const init = () => {
element.style.position = 'relative';
drop();
initScroll(element);
};
const drop = () => {
// ...代码逻辑同上...
};
const rise = () => {
// ...代码逻辑同上...
};
const createElement = (item, mode) => {
// ...代码逻辑同上...
};
const initScroll = (element) => {
// ...代码逻辑同上...
};
};
虚拟滚动的scroll事件处理
方法概述：通过监听滚动事件并结合阈值（threshold）来决定是否添加或删除DOM节点，以及是否触发数据的添加或删除。
代码示例：
export const scroll = (element, func) => {
let top = 0;
return _.throttle(() => {
const { scrollTop, scrollHeight } = element;
if (scrollTop > top) {
top = scrollTop;
func({ mode: Mode.append, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
} else if (scrollTop < top) {
top = scrollTop;
func({ mode: Mode.before, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
}
}, 100);
};
到此这篇关于详解前端如何对超大量数据进行渲染的文章就介绍到这了,更多相关前端数据渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！