输入URL到页面加载完成的步骤

1.在地址栏输入URL

(1).浏览器进行DNS查找,把域名转换成真实的IP地址

(2).根据IP地址,找到提供网站内容的服务器

2.找到服务器后

(3).浏览器通过TCP握手机制跟服务器建立连接 [现在大多数服务器都是用的https协议那么会多一步TLS握手,建立加密的隧道,通过对称加密+非对称加密的混合加密机制保证数据传输的安全性]

3.在与服务器建立起连接后

(4).浏览器发送Http(s)请求,来获取服务器响应的HTML文件 [这里在接收服务器响应的时候,这里有一个slow start机制,受制于TCP连接的限制,浏览器会先收到前14kb的数据,后续才会加速传输速度,下载其他文件]

4.浏览器在收到HTML代码后

(5).浏览器开始渲染网页,这里一共有5步,统称为关键渲染路径

​ 1).解析HTML,构建DOM树

​ DOM树是HTML文档在浏览器中的对象表示,可以使用JS操作它

​ 浏览器在解析HTML的时候是顺序执行的,并且只有一个主线程

​ 如果遇到Script标签,浏览器会加载它并运行里面的代码,这个时候主线程会暂停HTML解析

​ 但是如果是设置了 async 或 defer 的Script标签,那么它会异步加载,不会影响主线程

	<script async src='demo.js'></script>
	<script defer src='demo2.js'></script>

​ 另外浏览器有一个预扫描线程,它会扫描HTML代码,提前把CSS文件,字体,以及JS文件下载下来,同样是异步的,不会影响主线程

​

​ 2).构建CSS Object Model树

​ CSS Object Model 树 是CSS在浏览器中的对象表示

​ 3).合并DOM和CSSOM树,生成渲染树

​ 浏览器会从根节点开始,合并CSS Object Model中的样式到DOM的每个节点,形成一个渲染树

​ 4).布局

​ 生成渲染树后,浏览器会根据样式,计算每个可见节点(display:none这种是不可见),它们的宽高和位置等,对所有节点进行布局规划,对于图片这种节点,如果没有设置宽高,浏览器会先忽略它的大小,在图片加载完成之后,浏览器会根据图片的宽高,位置,再次计算受影响的节点,这个过程叫做reflow回流

​ 5).绘制

​ 在布局完成之后,浏览器会真正把节点,和节点的样式绘制到屏幕上,如果之前的布局发生了回流,也就是加载了像图片这样的节点之后,浏览器会触发重绘,把变化的布局重新绘制到屏幕上

​ 在完成了上面五步之后,设置了defer 或 async 的Script文件开始加载和执行

疑问补充:

​ 1.为什么是完成了DOM树,CSSOM树,合并生成渲染树,布局,绘制这五步后开始执行script文件?前面不是在DOM树的时候说了就会异步加载吗?

​ 答:( 知识点:事件循环机制,同步异步 )

​ 因为Js里的事件循环机制,所谓同步异步,同步是直接执行在主线程上的,也就是调用栈中,而异步则是在其限制完成后放入消息队列中等待执行,如果调用栈里没有东西了,那么消息队列中的才会按照先进先出的原则依个放入调用栈中执行

​

​ 2.什么是回流,什么是重绘?

​ (1).回流 : 影响页面布局的,如display:none,宽高等

​ (2).重绘 : 影响元素展示的样式,如背景颜色,还有visibility:none等

​ 回流必然引起重绘,而重绘不一定会引起回流