浏览器加载一份html文档是怎么加载的？
1.把标签、文本、注释、属性等等，解析为节点树（DOM Tree）
2解析DOMtree中的节点时，遇到了不同的元素会有不同的操作：
2.1.style标签或者link-css遇到css代码，就会把css代码解析为css样式结构体
2.2遇到了src 会去加载（网络请求）资源
3.把 2.1 css样式结构体和1 DOM Tree结合变成呈现树（渲染树）（Render Tree）
4.按照Render Tree绘制页面
页面渲染流程：
①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。
②浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。
③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。但是visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。
④一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。 注意：呈现树有的，节点树一定有，节点树有的，呈现树不一定有
重绘和回流
重绘：就是按照文档树的结构，重新绘制页面，渲染。（元素外观发生改变（但位置、宽高、大小等不变））
回流（回档）：就是页面的排版布局数量和节点在树中位置等发生了改变，就是回流。（元素的大小或位置发生改变）
回流必然引起重绘，但重绘不一定引起回流
常见的回流和重绘操作
任何对render tree中元素的操作都会引起回流或者重绘
①添加、删除元素(回流+重绘)
② 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
③ 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
④ 对style的操作(对不同的属性操作，影响不一样)
⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
④重绘与回流操作的注意点:
频繁的重绘与回流，会造成页面性能不好（页面卡顿、迟缓、设备发烫）
进行dom操作的时候,就要考虑优化
优化：1.尽量避免高频重绘 2.使用框架（MVVM）
案例：添加一万个格子到页面，每个格子显示时间 创建一个“冰”元素来承载即将渲染的元素
dom=>fragment
wx=>block
vue=>template
react=></>
