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

浏览器加载流程

从我们输入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.将经过布局之后的节点绘制在屏幕上

猜你喜欢

转载自blog.csdn.net/qq_50487248/article/details/129821565