详解前端如何对超大量数据进行渲染
更新时间：2024年12月10日 15:47:38 作者：前端饲养员
这篇文章主要为大家详细介绍了前端如何对超大量数据进行渲染,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
前端性能优化的方向
- 分批渲染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);
};
到此这篇关于详解前端如何对超大量数据进行渲染的文章就介绍到这了,更多相关前端数据渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了小程序毫秒级倒计时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本篇文章给大家总结了js保留两位小数的各种方法以及每种方法的实例代码分析，如果大家对此有需要，一起来学习下js保留两位小数的方法吧。2018-01-01
本文总结了普通文件上传和分片上传的方法,普通上传通过FormData和axios实现文件发送,而分片上传则将大文件切割并并行或串行上传,最后合并分片,提高上传效率和稳定性,还介绍了断点续传和处理上传过程中的异常情况,需要的朋友可以参考下2024-09-09
在做微站点项目开发的时候，我们需要判断当前浏览器类型是什么。接下来小编给大家分享通过JS和PHP两种方法判断用户请求时使用的浏览器类型，非常不错，感兴趣的朋友一起学习吧2016-09-09
uni-app是一个使用Vue.js 开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于微信小程序使用uni-app开发小程序及部分功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JS中的数组转变成JSON格式字符串的方法,需要的朋友可以参考下2017-05-05
在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下2025-02-02
Ant Design自定义输入框Input组件样式的示例代码
文章介绍如何通过React+AntDesign自定义Input输入框样式,利用variant属性实现下划线边框,并通过Form的requiredMark属性将必选标志置于label右侧,提供完整代码示例及关注鼓励,感兴趣的朋友一起看看吧2025-07-07
javascript 利用Image对象实现的埋点(某处的点击数)统计
统计用户页面某处的点击数或者执行到程序中某个点的次数;根据实际情况，创建多个Image对象，原则谁空闲谁做事，解下来详细介绍，需要了解的朋友可以参考下2012-12-12
最新评论