渲染在电脑绘图中是指用软件从模型生成图像的过程。模型是用严格定义的语言或者数据结构对于三维物体的描述,它包括几何、视点、纹理以及照明信息。
如何渲染几万条数据并不卡住界面?
如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分DOM,那么就可以通过requestAnimationFrame来每16ms刷新一次。
setTimeout(()=>{
//插入十万条数据
consttotal=100000
//一次插入20条,如果觉得性能不好就减少
constonce=20
//渲染数据总共需要几次
constloopCount=total/once
letcountOfRender=0
letul=document.querySelector("ul");
functionadd(){
//优化性能,插入不会造成回流
constfragment=document.createDocumentFragment();
for(leti=0;i constli=document.createElement("li"); li.innerText=Math.floor(Math.random()*total); fragment.appendChild(li); } ul.appendChild(fragment); countOfRender+=1; loop(); } functionloop(){ if(countOfRender window.requestAnimationFrame(add); } } loop(); },0);