关于DOM重排重绘性能__createDocumentFragment和拼接html字符串的方式

ゝ一世哀愁。 2021-11-09 02:52 208阅读 0赞

解释：

let fragment = document.createDocumentFragment()；//fragment 是一个指向空[DocumentFragment][]对象的引用

[DocumentFragments][] 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于**内存中**，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面[回流][Link 1]（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

测试功能： 给网页上动态增加1000个li。

![20190805165444996.png][]

多次点击按钮后，createDocumentFragment的时间：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

多次点击按钮后，拼接HTML字符串的时间：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1][]

你会发现，整体上html字符串的 方式的性能优于createDocumentFragment。而且，第一次点击按钮时，拼接html字符串的方式，速度非常快。选哪个你自己定。当然，这两种方式比，循环过程中，创建一个DOM元素，appendChild一个DOM肯定快。

一、createDocumentFragment的代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" id="btn01" value="测试" />
    		<ul id="box">
    			
    		</ul>
    	</body>
    </html>
    <script type="text/javascript">
    
    document.getElementById("btn01").onclick = function(){
    	var timeName;
    	console.time(timeName) 
    	testf1();
    	console.timeEnd(timeName);
    }
    
    //使用createDocumentFragment.
    function testf1(){
    	let fragment = document.createDocumentFragment();
    	for(var i=0;i<1000;i++){
    		let liDom = document.createElement("li");
    		liDom.innerHTML = `第${i}行`;
    		fragment.appendChild(liDom);		
    	}
    	document.getElementById("box").appendChild(fragment);
    }
    
    </script>

二、使用字符串拼接

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" id="btn01" value="测试" />
    		<ul id="box">
    			
    		</ul>
    	</body>
    </html>
    <script type="text/javascript">
    
    document.getElementById("btn01").onclick = function(){
    	var timeName;
    	console.time(timeName) 
    	testf3();
    	console.timeEnd(timeName);
    }
    
    //拼接字符串,一次性appendChild
    function testf3(){
    	let htmlStr = "";
    	for(var i=0;i<1000;i++){
    		htmlStr+=`<li>第${i}行</li>`;	
    	}
    	let ulDom = document.getElementById("box");
    	ulDom.innerHTML = htmlStr;
    }
    	
    </script>

[DocumentFragment]: https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment
[DocumentFragments]: https://developer.mozilla.org/en-US/docs/DOM/DocumentFragment
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Glossary/Reflow
[20190805165444996.png]: /images/20211109/66a5813d30af4546b0b13ae8ed1c436b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211109/ddffd76e6ec1480981fb8a8ebe35c871.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1]: /images/20211109/bbbbb7ec5820415a81dce73c4facfd3d.png