大数据渲染解决方案
一,渲染大量数据会造成卡顿渲染大量数据造成浏览器卡顿甚至卡死的原因是因为操作dom次数太频繁,所有要解决这个问题就得减少dom操作次数。像vue和react之所以性能比jquery好,其中一个重要的原因就是因为vue和react是通过虚拟dom来操作的,而虚拟dom本质就是通过js对象来模拟真实的dom节点二,在处理这个问题之前先了解两个知识点1.documentFragment:document
一,渲染大量数据会造成卡顿
渲染大量数据造成浏览器卡顿甚至卡死的原因是因为操作dom次数太频繁,所有要解决这个问题就得减少dom操作次数。像vue和react之所以性能比jquery好,其中一个重要的原因就是因为vue和react是通过虚拟dom来操作的,而虚拟dom本质就是通过js对象来模拟真实的dom节点
二,在处理这个问题之前先了解两个知识点
1.documentFragment:documentFragment是一个虚拟的Dom列表,可以储存待处理的html片段,一个没有父对象的最小文档对象,可以将它当作一个Document使用。因为它不在真实的Dom结构中,所以对它所做的操作不会触发浏览器的回流,只会在将它插入dom的时候触发一次而已。
2.requestAnimationFrame:requestAnimationFrame 是由浏览器专门为动画提供的 API,requestAnimationFrame 不需要设置回调时间,跟着浏览器的重绘的钩子走。这种做法更加高效,不会失帧或者卡顿,更大程度的保证了动画的流畅性。在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了 CPU 开销。
综上可以获得解决渲染大量数据的一个方法,通过虚拟dom和分段渲染方式,先使用 document.createDocumentFragment()
创建虚拟文档碎片节点,再使用 requestAnimationFrame
分段渲染
二,案例
渲染100万条数据
<div id="app"></div>
<script>
const app = document.querySelector('#app')
const fra = document.createDocumentFragment() //创建文档碎片节点
let all = 100_0000, //总数
num = 20, // 每个片段20条数据
batch = all / num, // 总共片段数量
count = 0 // 已经添加的片段数
function add() {
for (let i = 0; i < num; i++) {
const div = document.createElement('div')
div.innerText = `你好,欢迎你,你是第${count * num + i}个`
fra.appendChild(div)
}
app.appendChild(fra)
count++
(count < batch) && requestAnimationFrame(add)
}
add()
</script>
更多推荐
所有评论(0)