添加大量元素时使用 DocumentFragments

最新推荐文章于 2023-02-02 10:00:19 发布
最新推荐文章于 2023-02-02 10:00:19 发布
阅读量223 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端知识加深 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/126100827
本文探讨了在JavaScript中使用DocumentFragments在页面上批量添加大量元素的高效方法。DocumentFragment作为一个临时的DOM片段，能显著提高性能，避免了多次DOM操作导致的性能瓶颈。通过创建、填充和插入DocumentFragment，可以一次性将所有元素添加到DOM中，从而减少浏览器重新渲染的次数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们经常使用该`appendChild`方法向给定元素添加新元素： 
 
 
const li = document.createElement('li');
li.innerHTML = 'List item';

// Append to given list
ul.appendChild(li);
 
 
 
 
 

 

 
 当一个新元素插入页面时，浏览器必须重新计算其父节点和父节点的子节点的尺寸。该过程称为回流。同样，更改元素的样式可能会导致重绘。 

 

 
 向文档中添加大量元素可能会影响页面的性能，因为它会多次触发重排： 

 

 
 
 
  
for (let i = 0; i < 100; 

 



                

        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
「前端进阶」高性能渲染十万条数据(时间分片)，linux虚拟机使用教程

				
			

			

				

					澎湖Java架构师的博客
				

				

					12-27
					
					352
					
				

			

		

		

			
				
使用定时器

从上面的例子，我们已经知道，页面的卡顿是由于同时渲染大量DOM所引起的，所以我们考虑将渲染过程分批进行
在这里，我们使用setTimeout来实现分批渲染

复制代码
//需要插入的容器
let ul = document.getElementById(‘container’);
// 插入十万条数据
let total = 100000;
// 一次插入 20 条
let once = 20;
//总页数
let page = total/once
//每条记录的索引
let index =

			
		

	



                

            
              



	

		

			

				
					
DocumentFragments

				
			

			

				

					weixin_33816611的博客
				

				

					01-24
					
					123
					
				

			

		

		

			
				
var fragment = document.createDocumentFragment();


　　引用mdn的描述：fragment是一个空文档对象DocumentFragment对象的引用。

　　常用在保存生成的dom节点上：

var box = document.getElementById("box");
    for(var i=0; i<10;...

			
		

	



              


  
              

                


	

		

			

				
					
DocumentFragment

				
			

			

				

					weixin_42424283的博客
				

				

					02-02
					
					1940
					
				

			

		

		

			
				
对于document.createDocumentFragment()，所有浏览器都支持（包括IE6），而构造函数方法就不是所有浏览器都有效了（IE没有实现该方法）。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，

			
		

	





	

		

			

				
					
javascript  增加元素  用DocumentFragment来增加元素

				
			

			

				

					Abudula__的博客
				

				

					10-02
					
					952
					
				

			

		

		

			
				
插入节点

我们想要插入单个节点的时候可以使用insertBefore()和appendChild()方法，如果我们想要插入多个内容的话，就需要使用DocumentFragment。不停的循环使用插入方法是一种策略，但这样的话浏览器会不停的渲染DOM树，会影响用户体验。

DocumentFragment，中文为文档片段，可以理解为轻量级的节点，可以往里面添加多个子元素。NodeType=11,N...

			
		

	



		

			
		



	

		

			

				
					
DOM DocumentFragments

				
			

			

				

					sinolzeng的专栏
				

				

					02-17
					
					561
					
				

			

		

		

			
				
I was playing around with 
DOM DocumentFragments recently, in JavaScript, seeing what I could make with them. Roughly speaking, a DocumentFragment is a lightweight container that can hold DOM nodes. 

			
		

	





	

		

			

				
					
大量api前端优化

					
最新发布

				
			

			

				

					04-23
				

			

		

		

			
				
需要注意引用之前的参考资料，但用户提供的引用可能不直接相关，所以可能无法全部引用，但如果有相关点可以联系，比如减少HTTP请求（引用1提到过），或者使用DocumentFragments（引用2），但API优化更多在请求策略而...

			
		

	





	

		

			

				
					
实现仿百度图片瀑布流的jQuery代码教程

				
			

			

				

					
				

			

		

		

			
				
 - 为了防止加载图片时页面重绘和重排，可能会使用`documentfragments`或者`requestAnimationFrame`来优化性能。  ### 文件名解释  - **文件命名**：在文件名“jQuery-仿百度图片瀑布流代码.zip”中，表明这是一个...

			
		

	





	

		

			

				
					
JavaScript压缩包子挑战：深入理解和实践

				
			

			

				

					
				

			

		

		

			
				
开发者必须学会使用高效的DOM操作方法，比如使用文档片段（DocumentFragments）和避免全局查询（如频繁使用document.querySelector）。  4. **跨浏览器兼容性（Cross-Browser Compatibility）**  不同浏览器对...

			
		

	





	

		

			

				
					
DocumentFragment文档碎片(高效批量更新多个节点)

				
			

			

				

					weixin_33672400的博客
				

				

					02-02
					
					657
					
				

			

		

		

			
				
一般动态创建html元素都是创建好了直接appendChild()上去，但是如果要添加大量的元素还用这个方法的话就会导致大量的重绘以及回流，所以需要一个'缓存区'来保存创建的节点，然后再一次性添加到父节点中。这时候DocumentFragment对象就派上用场了。
createDocumentFragment有什么作用呢？

调用多次document.body.append(),每次都要刷新页面一...

			
		

	





	

		

			

				
					
关于js_document对象中的获取元素，创建元素的方法

				
			

			

				

					qq_55961861的博客
				

				

					08-12
					
					2203
					
				

			

		

		

			
				
关于js_document对象中的获取元素，创建元素的方法！

			
		

	





	

		

			

				
					
大量插入dom元素的方法（性能问题）

				
			

			

				

					鸡血博客
				

				

					09-18
					
					4247
					
				

			

		

		

			
				
笔试的时候做到一道题：

向<ul id="root"></ul>插入1000条<li>我是li标签</li>标签

一般我们会想到使用循环，但是，由于渲染回流，在for循环内部多次appendChild会造成多次渲染，从而出现卡、闪屏的现象


我们经常使用javascript来操作DOM元素，比如使用appendChild()方法。
每次调用该方...

			
		

	





	

		

			

				
					
使用文档碎片（DocumentFragments）追加DOM元素

				
			

			

				

					weixin_30443075的博客
				

				

					12-26
					
					184
					
				

			

		

		

			
				
标签（空格分隔）： JavaScript

DocumentFragment接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的Document使用，用于存储已排好版的或尚未打理好格式XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow)，且不会导致性能等问题。
最常用的方法是使用文档片段作为参数（例如...

			
		

	





	

		

			

				
					
DOM之元素的 创建+添加+删除+克隆

				
			

			

				

					weixin_47075145的博客
				

				

					07-18
					
					3015
					
				

			

		

		

			
				
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。

			
		

	





	

		

			

				
					
document节点创建页面元素

				
			

			

				

					不甜呐的博客
				

				

					05-21
					
					3454
					
				

			

		

		

			
				
1.createElement()方法

描述：本方法用来在内存中创建一个页面元素

语法：var 变量名 = document.createElement("标签名");
  
注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中  
  
兼容性：五大主流浏览器都支持

2.createTextNode()方法

描述：本方法可创建文本节点

语法：var 变量名 = document.createTextNode(text);

兼容性：五大主流浏览器都...

			
		

	





	

		

			

				
					
用DocumentFragments或innerHTML取代复杂的元素注入

				
			

			

				

					sinolzeng的专栏
				

				

					02-17
					
					1263
					
				

			

		

		

			
				
我们的浏览器执行越来越多的特性，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧，只需要一分钟，就可以优化你现有的代码。



使用DocumentFragments或者innerHTML代替复杂的元素注入

DOM操作在浏览

			
		

	





	

		

			

				
					
createDocumentFragment()用法总结

					
热门推荐

				
			

			

				

					逍竹的博客
				

				

					05-08
					
					3万+
					
				

			

		

		

			
				
1.createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

2.DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而...

			
		

	





	

		

			

				
					
document.createDocumentFragment 以及创建节点速度比较

				
			

			

				

					YUSIR 完美CODING世界
				

				

					05-02
					
					1505
					
				

			

		

		

			
				
document.createDocumentFragmentdocument.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素代替。因为文档片段存在...

			
		

	





	

		

			

				
					
createDocumentFragment 好处知多少

				
			

			

				

					EatgirlHui_Unique的专栏
				

				

					07-24
					
					2572
					
				

			

		

		

			
				
我们知道，createDocumentFragment代表创建一个新的空白的文档片段；那么我们为什么说他呢？下面我们具体了解下

在前端飞速发展的热浪中，用户对体验的要求越来越高，导致我们对页面渲染展示的要求页越来越高，传统的dom渲染一直是很耗费时间的一种操作，而虚拟dom的优势却越来越得以体现，从以下两个小demo中，我们看到虚拟dom带给我们的直观体验



google浏览器下测试数据10...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
紫微前端

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值