dom树加载的过程
第一步：在浏览器中输入url,交给DNS域名解析，找到IP，向服务端发起请求；（里面还有缓存，http协议，TCP连接...）
第二步：当服务器返回数据，浏览器接收文件（html,css,js,img），二进制文件
html:二进制转换为html
构建DOM树：HTML解析器
Token->Node->DOM
Token词法解析，根是"document"对象
Node:HTMLDivElement
Dom:Dom和标签基本是--对应的关系
解析过程中：
1.当遇到link的外部css，遇到css的代码会进行css的加载，和创建DOM树并行
2.当遇到script标签的时候，会先去执行js的内容，直至脚本执行完，然后继续创建Dom
底部引入JavaScript代码的原因。防止遇到js时，Dom树停止渲染出现白屏
或者说可以在头部引用，但是要加上async、defer,或者window.onload
如果script标签设置了async属性，则浏览器会异步的下载该文件并不会影响到DOM的渲染
defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行，js会在整个页面都解析完后再执行
如果有多个设置了defer的script标签，则会按照执行顺序。而async是那个先下载完再执行
构建css树：CSS解析器
每个css文件解析为样式表对象CSSStyleSheet，每个对象包含CSSRule;CSSRule包含选择器和声明对象
Token解析：css的词法和语法
Node->CSSOM
构建render树：渲染树=DOM树+css树
布局layout与绘制paint:
计算对象之间的大小，距离确定每个节点在屏幕上的确切坐标；映射浏览器屏幕绘制；
使用UI后端层绘制每个节点
reflow(回流)：当元素属性发生改变且影响布局时（宽度、高度、边距），产生回流，相当于刷新页面
repaint(重绘)：当元素属性发生改变且不影响布局时（背景颜色、透明度、字体样式等），产生重绘，页面不刷新，动态更新内容
重绘不一定引起回流，回流必将引起重绘
