-
地址栏输入地址
-
浏览器根据域名解析,浏览器首先会查看本地缓存是否可以找到服务器IP,如果找到了解析到此结束,并且建立连接。如果未找到,则查看系统DNS缓存,如果找到且未过器则停止解析,建立连接成功备份服务器IP到本地。如果未找到则向根DNS服务器查找服务器IP,直到成功。
-
拿到域名对应的IP地址之后,如果URL里面不包含端口,则会使用该协议的默认端口号。根据查询到的IP和服务器通过TCP协议三次握手进行连接,建立socket连接。
三次握手:
1.浏览器发起连接请求
2.服务器收到请求后,返回响应
3.浏览器接收到服务器响应的确认信息 -
浏览器想服务器发送资源请求,服务器返回html文件。
-
浏览器开始载入html代码,发现
<head>
标签内有一个<link>
标签引用的外部样式。 -
浏览器向服务器发出CSS文件的请求,服务器返回CSS文件。
-
浏览器拿到CSS文件后,浏览器继续载入HTML中
<body>
中的代码。 -
浏览器发现代码中有一个
<img>
标签引用了一张图片,则向服务器发出图片请求,此时浏览器不会等到图片下载完成,而是继续加载后续代码。 -
服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此浏览器需要回过头来重新渲染这部分代码。
-
浏览器发现了一个包含一行js代码的<script>标签,直接运行该脚本。
-
浏览器发现了一个
<script>
标签引入了外部的 js 文件,则向服务器请求js文件,服务器返回js文件。 -
在运行js文件的过程中,发现了一个数据请求,则通过AJAX向数据库发送数据请求。数据库返回数据。
-
执行js过程中,发现代码中要隐藏某个元素
style.display='none'
,这时浏览器重新渲染这部分代码。 -
整个
<html></html>
文档加载完成。 -
浏览器与服务器通过四次挥手断开连接
四次挥手:
1.浏览器发出断开连接的请求(浏览器: 我该问的都问完了, 没有其它的问题了)
2.服务端返回响应(服务端确认了浏览器不会再发送请求的信息)(服务器: 我收到了你问完了的信息了,待我把你前面的问题回答完, 我们就断开连接)
3.服务端发出断开连接的请求(服务器: 我把你的问题都回答完了, 你确认没有其他要问的了么?)
4.浏览器返回响应(浏览器确认了服务端已经将资源发送完毕的信息)(浏览器: 我没有其它要问的, 断开连接吧!)
前端浅谈从输入网址到页面加载完成中间经历了什么
最新推荐文章于 2020-11-06 11:19:06 发布