浏览器渲染过程
1.输入url
2.浏览器对url进行解析，就是根据域名查找对应的ip地址和端口
1）浏览器的DNS缓存。浏览器会缓存DNS记录一段时间，所以先从浏览器的缓存找起
2）系统缓存。浏览器DNS缓存没找到，就会去找系统的缓存，此时浏览器做一个系统调用（gethostbyname）
3）路由器缓存。路由器也有缓存
4）ISP DNS缓存。服务提供商的DNS缓存
5）递归搜索。以上全部都没找到，就会在DNS服务器上进行递归搜索。从顶级域名.com开始递归搜索，直到找到。
3.建立TCP连接。进行三次握手建立起TCP连接，就可以发送http请求了。
4.http请求的发送和响应
5.浏览器渲染页面
0）bytes -> charaters -> tokens -> nodes -> DOM/CSSOM
浏览器接收并读取原始字节，并根据文件的指定编码转换成字符串；根据字符串转换为token，例如<html>,<body>等；根据token生成node节点对象，再根据node生成DOM或CSSOM。
1）html解析，并生成DOM
注意：
- DOM树在构建的过程中可能会被CSS和JS的加载而执行阻塞
- display:none的元素也会在DOM树中
- 注释也会在DOM树中
- script标签会在DOM树中
2）css的解析，并生成CSSOM
注意：
- CSS解析可以与DOM解析同时进行。
- CSS解析与script的执行互斥 。
- 在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥
3）js的解析，<script>会中断DOM的生成；若js操作了css，但是CSSOM还未生成完毕，浏览器会先中断js的解析，先把CSSOM构建完成。
4）将DOM和CSSOM合成Rendering tree，并进行布局(Layout)和绘制(Paint)，将位置信息转化为物理像素，并调用浏览器的ui后端层构建页面。
（css被视为阻塞渲染的资源，也就是在css构建过程中，浏览器的解析是被阻塞的，直到CSSOM构建好之后，浏览器才会重新构建DOM和执行js
也就是DOM和CSSOM其实是并行的，互不影响。
js是可以操作dom和cssom。
dom在构建过程中，遇到<script>会停止，直到脚本执行完成，才继续构建。
如果没有js的话，那dom和cssom相安无事，各自解析并构建完成。
如果有js，js没有操作cssom，那html遇到<script>就先停止，等js下载并执行完，再继续dom的构建。
如果有js，js操作了cssom，那cssom必须要在js之前下载并构建完成才能使用
js想要操作CSSOM，但是此时CSSOM尚未构建完成，也就是此时会被css阻塞，直到CSSOM构建完成后才能运行js，而DOM也要等到js解析运行完，才能继续构建DOM）
5）Layout：布局阶段会从渲染树的根节点开始遍历。渲染树每个节点都是一个render object对象，包含宽高、位置、背景色等样式信息，浏览器通过这些信息确定页面上的确切大小和位置，输出盒子模型。
6）Paint：布局完成后，浏览器会立即发出Paint Setup和Paint事件，将渲染树转换成屏幕上的像素。
reflow（回流）：实际上其实是重排。html是默认流式布局的，就是常说的flow，所以reflow，就是css和js引起的html布局的重新渲染。reflow会从html这个root frame开始往下递归，依次计算所有的节点几何尺寸和位置，以确认是渲染树的一部分发生变化还是整个渲染树。reflow是无法避免的。现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。
- 页面第一次渲染（初始化）
- DOM树变化（如：增删节点）
- Render树变化（如：padding改变）
- 浏览器窗口resize 获取元素的某些属性
repaint（重绘）：就是元素的背景色、文字颜色等不改变位置和大小属性变化时，屏幕的一部分要重画。reflow必定引起repaint，repaint可以单独触发。
