【性能优化】海量数据快速加载方法

vue性能优化篇

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
工作中遇到海量数据需要渲染，单纯的使用v-for是肯定不行滴，会很卡滴，所以找方法，毕竟方法总比困难多滴！ 如果大家有什么更好的办法可以分享出来，一起进步！！！

---

---

前言

在网上找了很多的优化办法，海量数据渲染的话主要有一下几种方法：
1.虚拟滚动点击跳转
2.懒加载点击跳转
3.时间分片点击跳转
等等等等… 大家自行查询学习，别偷懒！

---

一、时间分片？

这里讲一下项目使用的一个方法，其他的大家自己学学。多多包涵，嘿嘿。
时间分片：简单来说就是数据量太大，一下子上展示或者上传不了，只能一点一点的展示或者上传。使用requestAnimationFrame实现，非常丝滑。

二、使用步骤

1.实例代码

代码如下（示例）：

			//加载的页数
			let pageSize = 100
			let ul = document.getElementById('info-ol')
			// 循环加载渲染数据
            function loopRender (curTotal, curIndex) {
                if (curTotal <= 0) return
                let pageCount = Math.min(curTotal, pageSize) // 每次加载 100 条
                window.requestAnimationFrame(() => {
                for (let i=0; i<pageCount; i++) {
                    let li = document.createElement('li')
                    li.innerHTML = data[curIndex + i]
                    li.addEventListener('click',function(){
                    // 移除先前高亮的元素的高亮样式
                    let highlightedItem = document.querySelector('.chooseColor');
                    if (highlightedItem) {
                        highlightedItem.classList.remove('chooseColor');
                    }
                    li.classList.add('chooseColor')
                    })
                    ul.appendChild(li)
                }
                loopRender(curTotal - pageCount, curIndex + pageCount)
                })
            }
            loopRender(data.length, 0)

---

总结

测试两万条数据，秒出，一点都不卡的！！！