基于OpenLayers的WebGIS程序二次开发实例教程
34266 人在学
渲染在电脑绘图中是指用软件从模型生成图像的过程。模型是用严格定义的语言或者数据结构对于三维物体的描述,它包括几何、视点、纹理以及照明信息。
如何渲染几万条数据并不卡住界面?
如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分DOM,那么就可以通过requestAnimationFrame来每16ms刷新一次。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>控件</ul>
<script>
setTimeout(()=>{
//插入十万条数据
consttotal=100000
//一次插入20条,如果觉得性能不好就减少
constonce=20
//渲染数据总共需要几次
constloopCount=total/once
letcountOfRender=0
letul=document.querySelector("ul");
functionadd(){
//优化性能,插入不会造成回流
constfragment=document.createDocumentFragment();
for(leti=0;i<once;i++){
constli=document.createElement("li");
li.innerText=Math.floor(Math.random()*total);
fragment.appendChild(li);
}
ul.appendChild(fragment);
countOfRender+=1;
loop();
}
functionloop(){
if(countOfRender<loopCount){
window.requestAnimationFrame(add);
}
}
loop();
},0);
</script>
</body>
</html>
渲染这个术语被用作"艺术家或作家对于场景的渲染"。另外渲染也用于描述"计算视频编辑文件中的效果以生成最终视频输出的过程"。