数据量太大,加载时长优化(更新中)

1.object.freeze

2.定时器分批渲染

3.document.createDocumentFragment()
用来创建一个虚拟的节点对象,节点对象不属于文档树。
当需要添加多个DOM元素时,可以先把DOM添加到这个虚拟节点中。然后再统一将虚拟节点添加到页面,这会减少页面渲染DOM的次数。

window.requestAnimationFrame
接受参数为函数,比起setTimeout和setInterval有以下优点:
1.把每一帧中的所有DOM操作集中起来,在一次的重排/重绘中完成。每秒60帧。
2.在隐藏或者不可见的元素中,requestAnimationFrame将不会重绘/重排。

//总数据
const total = 10000;
//每次插入的数据
const once = 20;
//需要插入的次数
const times = Math.ceil(total/once)
//当前插入的次数
const curTimes = 0;
//需要插入的位置
const ul = document.querySelector(‘ul’)
function add(){
	let frag = document.createDocumetFragment()
	for(let i = 0;i<once;i++){
		let li = document.createElement(‘li’)
		li.innerHTML = Math.floor(i+curTimes*once)
		frag.appendChild(li)
	}
	curTimes++;
	ul.appendChild(frag)
	if(curTimes<times){
		window.requestAnimationFrag(add)
	}
}
window.requestAnimationFrag(add)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值