前端浅谈从输入网址到页面加载完成中间经历了什么

在这里插入图片描述

  1. 地址栏输入地址

  2. 浏览器根据域名解析,浏览器首先会查看本地缓存是否可以找到服务器IP,如果找到了解析到此结束,并且建立连接。如果未找到,则查看系统DNS缓存,如果找到且未过器则停止解析,建立连接成功备份服务器IP到本地。如果未找到则向根DNS服务器查找服务器IP,直到成功。

  3. 拿到域名对应的IP地址之后,如果URL里面不包含端口,则会使用该协议的默认端口号。根据查询到的IP和服务器通过TCP协议三次握手进行连接,建立socket连接。
    三次握手:
    1.浏览器发起连接请求
    2.服务器收到请求后,返回响应
    3.浏览器接收到服务器响应的确认信息

  4. 浏览器想服务器发送资源请求,服务器返回html文件。

  5. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用的外部样式。

  6. 浏览器向服务器发出CSS文件的请求,服务器返回CSS文件。

  7. 浏览器拿到CSS文件后,浏览器继续载入HTML中<body>中的代码。

  8. 浏览器发现代码中有一个<img>标签引用了一张图片,则向服务器发出图片请求,此时浏览器不会等到图片下载完成,而是继续加载后续代码。

  9. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此浏览器需要回过头来重新渲染这部分代码。

  10. 浏览器发现了一个包含一行js代码的<script>标签,直接运行该脚本。

  11. 浏览器发现了一个<script>标签引入了外部的 js 文件,则向服务器请求js文件,服务器返回js文件。

  12. 在运行js文件的过程中,发现了一个数据请求,则通过AJAX向数据库发送数据请求。数据库返回数据。

  13. 执行js过程中,发现代码中要隐藏某个元素style.display='none',这时浏览器重新渲染这部分代码。

  14. 整个<html></html>文档加载完成。

  15. 浏览器与服务器通过四次挥手断开连接
    四次挥手:
    1.浏览器发出断开连接的请求(浏览器: 我该问的都问完了, 没有其它的问题了)
    2.服务端返回响应(服务端确认了浏览器不会再发送请求的信息)(服务器: 我收到了你问完了的信息了,待我把你前面的问题回答完, 我们就断开连接)
    3.服务端发出断开连接的请求(服务器: 我把你的问题都回答完了, 你确认没有其他要问的了么?)
    4.浏览器返回响应(浏览器确认了服务端已经将资源发送完毕的信息)(浏览器: 我没有其它要问的, 断开连接吧!)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值