DOM —— 页面的渲染流程

用户在浏览器地址栏输入url(网址)后,到页面渲染出来 经过的阶段：

1. 浏览器接收到URL，到网络请求线程的开启。
2. 一个完整的HTTP请求的发出
3. 服务器收到请求并转到具体的后台处理
4. 前后台之间的HTTP交互和设计的缓存机制
5. 浏览器收到数据包后的关键渲染路径
6. JS引擎的解析过程

（具体的过程请自行上网查阅学习） 

而浏览器加载一份html文档的大致过程又分为如下阶段：

        1）把标签、文本、注释、属性等解析为节点树（DOM Tree）

        2)  在解析节点树（DOM Tree）中的节点时，如遇到不同的元素会进行不同的操作：

                a.如遇到css代码 就会把css代码解析为CSS样式结构体

                b.遇到了src 会去加载(网络请求)资源

        3)把CSS样式结构体和节点树DOM Tree结合变成呈现树/渲染树(Render Tree)

        4）按照呈现树Render Tree绘制页面

重绘和回流

        重绘：就是按照文档树的结构， 重新绘制、渲染页面

        回流：就是页面的元素排版布局数量和节点在树中位置等发生了改变 

重绘和回流的关系：回流必然引起重绘 ，但是重绘不一定引起回流

    <style>
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				
			}
		</style>
		<div class="box">hello</div>
		<button onclick="change1()">change</button>
		
		
		<script>
			
			function  change1 () {
				var box=document.querySelector(".box")
				 box.innerHTML="6666"//回档
				 box.style.visibility= "hidden";//重绘不回流
				 box.style.display= "none";//回流
			}
			
		</script>

   频繁的重绘和回流会造成页面性能不好，因此操作页面时，应尽量避免高频的重绘、回流。

比如：在一个表格中创建10000个单元格，如果普通的创建添加，就会频繁的重绘、回流，因此我们可以创建一个元素用来承载将要渲染的元素：

     <style>
        #box td {
            border: 1px gainsboro solid;
        }
    </style>
    <table id="box"></table>
    <script>
        //创建一个"冰"元素来承载即将渲染的元素
        let tb = document.querySelector("#box")
        let fra1 = document.createDocumentFragment() //它在内存中还不在文档中
        for (let i = 0; i < 100; i++) {
            let tr = document.createElement("tr")
            fra1.appendChild(tr)
            for (let j = 0; j < 100; j++) {
                let dt = new Date().getTime()
                let td = document.createElement("td")
                td.innerHTML = dt
                tr.appendChild(td)
            }
        }
        tb.appendChild(fra1) //它自己不会添加到文档树中用于渲染 但是它的子代元素都会添加进去
    </script>

使用这种方法就可以避免高频的重绘和回流操作，就不会影响页面的性能。