DocumentFragment与回流

DocumentFragment与回流

一、DocumentFragment

1. 概念

• 轻量级的document
  • 你完全可以把它当做document来使用，因为它具有节点的所有属性和方法

• 不是真实DOM树的一部分
  • 他的变化不会引起DOM树的重新渲染

2. 方法

document.createDocumentFragment()

• 创建一个新的空白的文档片段( DocumentFragment)
  • 就相当于创建了一个容器，用来装DOM结构，并不会引起重新渲染
• 一般用来批量更新元素，减少重绘次数

例题

• NO.1

const fragment = document.createDocumentFragment()
console.log(fragment)

无论这个容器中有没有结构，他打印出来的永远是#document-fragment

• NO.2

<ul id="list"></ul>

	const list = document.querySelector('#list');
	const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
	//1. 创建容器
	const fragment = document.createDocumentFragment();
	//2. 创建dom添加到容器中
	fruits.forEach(fruit => {
	  const li = document.createElement('li');
	  li.innerHTML = fruit;
	  fragment.appendChild(li);
	});
	//将容器添加到真是DOM中
	list.appendChild(fragment);

结果

3. 常用属性

• childNodes

const nodes = fragment.childNodes //利用NO.2的例题
console.log(nodes)

• 结果
  
  • 他不是一个数组，因为不具有数组的任何方法

二、回流

1. 概念

• 浏览器必须重新处理和绘制部分或全部页面