Javascript中文本代码片段使用

疑问一：什么是文本代码片段？
解答：文本代码片段类似与一个容器，在里面可以添加多种元素

疑问二：使用文本代码片段有什么好处？
解答：假设已知一个div容器，需要在里面添加多个p标签。按照常规思路，我们可以利用一个for循环对其循环添加，如下:

//往div容器利用for遍历添加元素
let div = document.querySelector("div")
for(let i = 0;i<10;i++)
{
	let p = document.createElement("p")
	div.innerHTML += p  // 或者   div.appendChild(p)
}

但是这种方法会使得网页一直重排，性能会大大降低，比如循环10次，网页就需要重排10次，那么重复100次、1000次、10000次。。。。因此，这个时候我们可以使用文本代码代码片段，使它只需要重排一次

疑问三：文本代码片段的原理是什么？
解答：文本代码片段可以理解为是一个缓存区，就按我们生活中的例子来说，可以理解为物流中心，每天有很多快递从全国各地发出，然后进入物流中心，对其进行地区划分后统一派送，而不是由快递员一件一件的拿着到处派送，这样会浪费大量的时间和人力，而且效率也底下。
文本代码段也是如此，先把需要添加到网页上的元素先全部添加到文本代码片段上，然后再将文本代码片段添加到需要插入的地方，这样，网页只需要重排一次即可。

那么，我们了解了文本代码片段的好处之后，该如何使用呢？

假如，我们需要在box里面添加多个p标签，直到充满box元素

html和css代码如下：

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 560px;
			height: 330px;
			background-color: pink;
			margin: 30px auto;
		}
		p{
			width: 60px;
			height: 30px;
			background-color: red;
			margin: 10px;
			display: inline-block;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>

js的代码如下：

let box = document.querySelector(".box")  //获取box元素
let len = ((box.offsetWidth/80)|0)*((box.offsetHeight/50)|0)  //计算可以添加p标签的个数
let meet = document.createDocumentFragment()  //创建文本代码片段
for(let i = 0;i<len;i++){
	let p = document.createElement("p")  //创建p标签
	meet.appendChild(p)   //利用循环将创建的p标签添加到文本代码片段中
}
box.appendChild(meet)   //将文本代码片段添加到box元素中