下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:如何渲染几万条数据并不卡住界面?

作者:小提莫~     来源: 博客园点击数:1072发布时间: 2020-09-10 09:23:22

标签: 渲染数据结构计算机

Web开发

  渲染在电脑绘图中是指用软件从模型生成图像的过程。模型是用严格定义的语言或者数据结构对于三维物体的描述,它包括几何、视点、纹理以及照明信息。

课课家:如何渲染几万条数据并不卡住界面?_渲染_数据结构_计算机_课课家

  如何渲染几万条数据并不卡住界面?

  如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分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>

  渲染这个术语被用作"艺术家或作家对于场景的渲染"。另外渲染也用于描述"计算视频编辑文件中的效果以生成最终视频输出的过程"。

赞(0)
踩(0)
分享到:
上一篇:web前端:JSON
华为认证网络工程师 HCIE直播课视频教程