网页加载过程

页面由两部分组成        标签结构和css样式

加载步骤

1.解析标签的结构 - 做一棵DOM树（dom节点组成的树形结构）同时，解析css，将css解析成一棵css树

2.将dom树和css树合并成一棵渲染树

3.根据渲染树在网页中计算每个标签所处的位置 / 大小 —— 布局

4.根据渲染树每个标签应该是什么背景 / 颜色 / 多大字体

5.在页面中绘画页面

网页加载过程：回流（重排）- 重新布局 和重绘 - 重新解析颜色 / 背景

所以在使用js设置样式时，如果每一次都用

div.style.width = '100px'

每一次设置都会会造成页面回流，不利于页面的优化

div.style.cssText = 'color: red; font-size: 50px;'

使用cssText只会回流一次，更有利于页面优化

使用js操作节点时，插入标签也会造成回流

为了提高性能，尽量操作节点时减少回流次数

js提供了一个虚拟标签 - 文档碎片（document.createDocumentFragment()） - 可以像真标签一样去操作，但当将这个标签放在页面中的时候，会自动脱落

 var fg = document.createDocumentFragment()
 for(var a=0; a<10; a++) {
     var li = document.createElement('li')
     li.innerText = a+1
     fg.appendChild(li)
 }
 document.body.appendChild(fg)