如何渲染几万条数据并不卡住界面?入门基础教程_渲染入门攻略

如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。代码

<meta name="viewport"

如何渲染几万条数据并不卡住界面?入门基础教程

如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。

如何渲染几万条数据并不卡住界面?入门基础教程_渲染入门攻略

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <ul>控件</ul>
 <script>
    setTimeout(() => {
       // 插入十万条数据
      const total = 100000
      // 一次插入 20 条,如果觉得性能不好就减少
      const once = 20
      // 渲染数据总共需要几次
     const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
      // 优化性能,插入不会造成回流
       const fragment = document.createDocumentFragment();
      for (let i = 0; i < once; i++) {
        const li = document.createElement("li");
        li.innerText = Math.floor(Math.random() * total);
        fragment.appendChild(li);
      }
     ul.appendChild(fragment);
     countOfRender += 1;
     loop();
  }
  function loop() {
      if (countOfRender < loopCount) {
       window.requestAnimationFrame(add);
   }
  }
  loop();
  }, 0);
 </script>
</body>
</html>
海计划公众号
(0)
上一篇 2020/03/23 01:37
下一篇 2020/03/23 01:37

您可能感兴趣的内容

  • 未来,哪些技术在前端开发的地位会越来越高?新手入门_技术小白常识

    过去的这段时间里,不论是互联网巨头还是初创企业,都纷纷进行了一波优化。渐趋理智的资本淘汰了一批不能适应市场的业务,而业务的紧缩也淘汰了一批不能适应市场的程序员。有人都不清楚自己为什么会被优化,但也有人薪资水涨船高,**这背后说到底就是每个人的竞争力强弱。**Oracle前脚宣布裁员消息,后脚就有专场招聘会等着,这是市场对他们的肯定。所谓人无我有,人有我优,别

    2020/03/29
  • css文本操作基础知识教程_操作小白攻略

    1.文本对齐方式(水平方向) text-align这个属性能控制标签内文本的对齐方式,还能控制子元素中行内元素和行内块级元素的对齐方式(水平方向)它有三个值:left:左对齐(默认)center:居中对齐right:右对齐
    div的文本子元素span<div

    2020/03/26
  • QQ/微信里域名经常被举报二屏蔽?微信/QQ屏蔽域名举报按钮的实现方式基础入门_微信菜鸟教程网

    近很多老哥问我,为啥自己的域名在QQ/微信里面很容易被封?1、页面里面的内容违规或者诱导被举报而导致的拦截2、用户和同行举报3、腾讯等定期会检查4、有诱导分享,强制关注等针对每一种出现的情况,都有不同的防封策略。不是说一种方案就可以解决全部。你首先要知道你的域名是什么原因被封的,在作出相应的选择针对!下面我们就开始针对每种情况我们该出出的对应选择!我就按照情

    2020/03/26
  • 前端程序员需要具备的几个软实力使用帮助_前端入门指南

    有很多关于前端程序员的调侃,比如“智商很高情商却很感人,思维缜密,极客,加班严重,没有对象只能new一个……”,虽然不是所有前端程序员都是这样,但这也说明了前端程序员这个群体中存在这种情况。我身边的前端程序员小伙伴就有不少这种情况,我认为工作特点影响了这种性格标签。前端程序员的很多工作都是需要“单打独斗”,任务分工之后每个人要独立完成部分功能设计,相互沟通比

    2020/03/29
  • 浅谈javascript中的递归和闭包使用帮助_递归入门攻略

    递归和闭包作为js中很重要的一环,几乎在前端的面试中都会涉及,特别闭包。今天前端组的组长冷不丁的问了我一下,粗略的回答了一下,感觉不太满足,于是重新学习了一下,写下本篇。在说这个两个概念之前,我们先回顾一下函数表达式。function实际上是一种引用对象,和其他引用类型一样,都有属性和方法。定义函数有函数声明、函数表达式、以及构造函数这里说一下前两种。函数声

    2020/03/23
  • React 错误边界使用帮助_错误入门百科

    错误边界介绍部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 React 用户的这个问题,React 16 引入了一个 错误边界(Error Boundaries) 的新概念错误边界是 React 组件,它可以 在子组件树的任何位置捕获 JavaScript 错误,记录这些错误,并显示一个备用 UI ,而不是使整个组件树崩溃。

    2020/03/20
  • 明明拼智力的编程,为何还要拼年龄?使用说明_编程菜鸟指南

    今年算是与魔都结缘,又来魔都出差。魔都码农的工作热情完全不输帝都码农,弄的我也只好入乡随俗。每天回到酒店已经很晚,洗洗就只想躺下睡觉,真的没啥时间研究新技术。有句话说的好,比你聪明的人,比你还拼,北上广深能领跑全国,也是必然。在上一篇文章《 为啥你身边没有40+的程序员 》中,我聊到了40+程序员的问题。有朋友说,理论上40岁可以做程序员,但是现在很多公司招

    2020/03/29
  • ehr系统员工自助服务,助力企业疫情居家在线办公!菜鸟教程下载_系统使用说明

    ehr系统员工自助服务,助力企业疫情居家在线办公!菜鸟教程下载 2020年,谁也没有料到,一场冠状病毒会打乱企业正常复工时间,武汉疫情依然牵动着大家每一个人的心弦!而随着时间的延续…

    2020/03/20
  • JSDebugger使用说明_基于 JavaScript 的调试程序

    JSDebugger使用说明 官方网址:http://satanwoo.github.io GitHub:https://github.com/SatanWoo/JSDebugge…

    2020/03/06
  • Node中异常:exit code与 dockerfile菜鸟知识_异常菜鸟指南

    最近观察项目 CI 跑的情况如何时,会偶尔发现一两个镜像虽然构建成功但是容器跑不起来的情况。究其原因,是因为一个 exit code 的问题throw new Error 与 Promise.reject 区别以下是两段代码,第一个是抛出一个异常,第二个是 Promise.reject,两段代码都会如下打印出一段异常信息,那么两者有什么区别?function

    2020/03/26
  • 前端技术清单小白基础_性能优化是前端老生常谈的一个重要部分,帮助体系化地了解和学习前端性能优化

    前端技术清单小白基础 官方网址:https://alienzhou.github.io/frontend-tech-list/ GitHub:https://github.com/…

    2020/03/10
  • js的数值范围小白基础_浮点菜鸟教程下载

    JavaScript能表示并进行精确算术运算的整数范围为:正负2的53次方,也即从最小值-9007199254740992到最大值+9007199254740992之间的范围;这两个边界值可以分别通过访问Number对象的MAX_VALUE属性和MIN_VALUE属性来获取。对于超过这个范围的整数,JavaScript依旧可以进行运算,但却不保证运算结果的精

    2020/03/31
  • 史上最全的CSS hack基础指南_兼容入门指南

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协

    2020/04/05
  • nodejs关于前后端图片上传的思路及实现代码指南攻略_上传入门基础

    1.前端角度a.将图片发给后端 ajax1.前端获取图片信息 文件域2.将文件信息 存到formdata3.调用后端写的api接口发送数据b.接受返回的数据前端页面显示图片

    <meta name="viewport" content="wi

    2020/03/26
  • CSS垂直翻转/水平翻转菜鸟知识_效果入门指南

    一、CSS下兼容性的元素水平/垂直翻转实现随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:/*水平翻转*/
    .flipx {-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-

    2020/04/05
  • 时间复杂度与空间复杂度分析小白常识_开发基础入门

    作为开发人员,我们都希望在完成功能的基础上让代码运行的更快、更省空间,那如何衡量编写的代码是否更有效率,这就需要我们学会如何分析代码时间复杂度和空间复杂度.什么是复杂度分析执行时间和占用空间是代码性能的2个评判标准,我们分别用时间复杂度和空间复杂度去描述这2个标准,二者统称复杂度,复杂度描述的是算法执行时间(或占用空间)随数据规模的增长关系.为什么需要复杂度

    2020/03/31