JS操作DOM慢和一次性插入几万个DOM

最新推荐文章于 2023-11-16 02:11:17 发布
最新推荐文章于 2023-11-16 02:11:17 发布
阅读量413 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40178497/article/details/123269767
版权
  • DOM属于渲染引擎的东西，而JS又是JS引擎中的东西，JS操作DOM，涉及到两个线程中的通信，势必会有性能上的损耗，操作DOM还可能带来重绘回流的情况
    插入几万个DOM如何实现页面不卡顿
  • 肯定不能一次性插入几万个DOM，否则势必卡顿，解决重点在于如何分批次部分渲染DOM
    • 1、window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
    • 虚拟滚动virtualized scroller 原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容
qq_40178497
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的DOM插入节点操作示例
11-28
本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考，具体如下： 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref...
javascript获取dom的下一个节点方法
10-25
主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下
js批量插入dom节点
qq_40117771的博客
10-26 1331
纯js批量插入dom节点 //获取目标节点 let targetDom = document.querySelector("targetDom"); let temp = ""; // 复制节点 for(let i = 0; i < 10;){ let cloneDom = targetDom.cloneNode(true); /* doing somthing to cloneDom * .... */ temp += cloneDom.outerHTML;
大量插入dom元素的方法
Astar的博客
09-29 5566
笔试的时候做到一道题：向&amp;amp;lt;ul id=&amp;quot;root&amp;quot;&amp;amp;gt;&amp;amp;lt;/ul&amp;amp;gt;插入1000条&amp;amp;lt;li&amp;amp;gt;我是li标签&amp;amp;lt;/li&amp;amp;gt;标签，一般我们会想到使用循环，但是，由于渲染回流，在for循环内部多次appendChild会造成多次渲染，从而出
一次性插入多个DOM节点,考虑性能
Qingshan_z的博客
08-19 626
一次性插入多个DOM节点,考虑性能 频繁操作会导致卡顿,因此要考虑以下两点: 对DOM操作做缓存 //不缓存查询结果 for( let i = 0; i < document.getElementsByTagName('p').length; i++) { //每次循环DOM都会查询获取length,从而导致卡顿 } //缓存查询结果 const list = document.getElementsByTagName('p'); const length = pList.length; for
DOM如何渲染大量千级万级数据页面也不会卡住-js性能报告
weixin_45178716的博客
10-17 1944
一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友，如果一个好友 用一个节点来表示，当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千 个节点。 在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死。代码如下： var ary = []; for ( var i = 1; i <= 1000; ...
JavaScript 元素的插入顺序以及动态加载js
qianliangjiexialing的博客
12-03 499
*****************记录下今天的心得*****************   1.元素的插入顺序 需求：异步从后台读取两个数据a和b，并动态加载到父容器x中，要求a必须在b的左边 实际情况：一开始是用x.append(...)的方法将a、b添加进去，由于是异步加载，查询速度快的请求自然会先显示在页面中的左边，于是最终列表中，a、b是忽左忽右的。 解决办法：使用 a.pre...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
10-18
了解并熟练掌握这些DOM操作是JavaScript开发中不可或缺的一部分，因为它们使得网页能够响应用户的交互，实现动态更新和丰富的用户体验。在处理复杂交互和数据绑定时，如在前端框架（如React, Vue, Angular）中，这些...
为什么说js操作DOM很慢
weixin_30824479的博客
12-08 261
DOM 文档对象模型（Document Object Model简称DOM），是W3C组织推荐的处理扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就成为DOM。DOM的历史追溯至1990年代后期微软于Netscape的“浏览器大战”。双方为了在javascript和JScript一决生死，于是大规模的赋予浏览器强大的功...
大量插入dom元素的方法（性能问题）
鸡血博客
09-18 3935
笔试的时候做到一道题： 向<ul id="root"></ul>插入1000条<li>我是li标签</li>标签 一般我们会想到使用循环，但是，由于渲染回流，在for循环内部多次appendChild会造成多次渲染，从而出现卡、闪屏的现象 我们经常使用javascript来操作DOM元素，比如使用appendChild()方法。 每次调用该方...
分时函数解决一次性加载大量dom造成的卡顿假死
最新发布
久如云漂泊
11-16 160
分时函数: 把数据分批绘制;大任务分成小任务执行
前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM...
07-23 1029
前端性能优化--为什么DOM操作慢？ 作为一个前端，不能不考虑性能问题。对于大多数前端来说，性能优化的方法可能包括以下这些： 减少HTTP请求（合并css、js，雪碧图/base64图片） 压缩（css、js、图片皆可压缩） 样式表放头部，脚本放底部 使用CDN（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好） 缓存…… 等等…… 有兴趣的...
第24天 javascript 如何渲染⼏万条数据并不卡住界⾯
qq_36529240的博客
01-08 675
如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏ 万条都渲染出来，⽽应该⼀次渲染部分 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"
数据量太大，DOM节点加载过多，怎么保证前端在渲染的时候页面不会卡（性能优化）
Best_ID的博客
06-07 3858
一、定时器分批渲染既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程，JavaScript虽然没有多线程，但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此，要解决这个问题， 其中的s
js----动态添加元素 && jQuery----动态添加元素
lsh15846393847的博客
12-06 285
1.js    ocument.getElementById('id').innerHTML=innerHtml; var creatLi = function(data){ var innerHtml = ""; for(var i =0;i &lt;data.length;i++){ innerHtml +="&lt;li class='con...
前端性能优化篇：分批加载
Su__py的博客
06-29 749
性能优化的作用不言而喻，我们今天要搞的就是列表的性能优化，除了常用的分页之外，我们还有一个分批加载，主要就是后端返回大批量的数据，我们在渲染的时候通过循环的定时器去加载，话不多说，直接上代码： 这是一个比较简单的例子，具体的话还是需要实际应用才知道，但是大致的解决思想是不改变的。 欢迎指导。...
动态添加DOM元素的方式
前端御书房
09-12 4840
动态添加DOM元素的方式，持续更新中……
解决js延迟加载的方式
fangqi20170515的博客
09-21 2335
JS延迟加载就是页面加载完成之后再加载js文件，有助于提高页面加载速度。因为js是单线程，会阻塞DOM解析，因此也会阻塞DOM的加载。HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。
js使用insertAdjacentElement往目标节点第一个位置插入dom
05-28
可以使用以下代码将DOM元素插入到目标节点的第一个位置： ```javascript // 获取目标节点 const targetNode = document.getElementById('target'); // 创建新的DOM元素 const newElement = document.createElement...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值