浏览器加载流程以及渲染机制

浏览器加载流程

从我们输入url到页面加载，浏览器所经历的过程如下：
1.浏览器解析我们输入的url地址
2.DNS将域名解析成ip号
3.浏览器获取端口号
4.根据IP地址，通过TCP三次握手建立服务器与浏览器的连接
5.发送HTTP请求
6.服务器处理请求，并返回响应结果
7.通过TCP四次挥手断开连接
8.浏览器加载、解析、渲染

浏览器的解析

浏览器渲染引擎从上往下执行代码，浏览器会解析三个东西。
1.解析HTML，将HTML解析成DOM树。

2.解析CSS：将CSS解析成CSSOM，浏览器的渲染引擎在接收到CSS后，将CSS解析为浏览器可以理解的styleSheets，CSS样式有三种引入方式
（1）通过link或import引入的外部CSS
（2）内嵌CSS
（3）在属性标签添加的style内联CSS
解析CSS的顺序：浏览器样式–>用户自定义样式–>link或import引入的外部CSS–>style标签的内联样式

3.解析JavaScript。等到JavaScript脚本加载完之后，通过DOM树和CSSOM来操作DOM树和CSS Rule Tree。

注意：
（1）CSS不会阻塞DOM解析，但会阻塞页面渲染
（2）JS阻塞DOM解析，浏览器遇到script标签时，会触发页面渲染

浏览器的渲染机制

1.浏览器解析HTML标签，构建DOM树
2.浏览器解析CSS，生成CSSOM树
3.浏览器将DOM树和CSSOM树结合，生成渲染树
4.浏览器计算每个节点中的位置，根据渲染树来布局
5.将经过布局之后的节点绘制在屏幕上