前端面试题: 一个完整的http事物过程

完整的HTTP请求会经历以下过程

请求响应流程图

输入url到页面加载都发生了什么事情?(简述)

输入地址

浏览器查找域名的 IP 地址 这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->hosts->DNS

浏览器会通过一个本地随机端口建立一个与服务器指定端口之间的连接通道

浏览器将客户端信息打包,并通过连接通道向 web 服务器发送一个 HTTP 请求

服务器拿到请求文件,拿到对应请求路径

通过请求路径对应文件的扩展名找到文件的MIME Type

判断是否为静态?

1,如果是静态直接读取

2,如果不是静态(php)交给'外包公司'

服务器会把发给客户端的数据打一个包,并返回一个 HTTP 响应

浏览器拿到包,找到content-type

根据content-type决定如何处理响应内容

浏览器显示 HTML

浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)

浏览器发送异步请求

用户在浏览器地址栏输入www.baidu.com,然后回车,这一瞬间发生了什么? (以下过程仅是个人理解)

1.域名解析(DNS解析)

(1),首先, 浏览器会检查本地缓存(浏览器缓存)中有没有这个域名

注:我们怎么查看Chrome自身的缓存?可以使用 chrome://net-internals/#dns 来进行查看

=> 返回ip地址

没有 => 下一步

(2),然后,浏览器会搜索操作系统(Windows系统)自身的DNS缓存,如果找到且没有过期则停止搜索解析到此结束.

注:怎么查看操作系统自身的DNS缓存,以Windows系统为例,可以在命令行下使用 ipconfig/displaydns 来进行查看  

=> 返回ip地址

没有 => 下一步

(3),如果在Windows系统的DNS缓存也没有找到,那么尝试读取hosts文件(位于C:\Windows\System32\drivers\etc),看看这里面有没有该域名对应的IP地址。

=> 返回ip地址

没有 => 下一步

(4),如果在hosts文件中也没有找到对应的条目,浏览器就会发起一个DNS的系统调用,,就会向本地配置的首选DNS服务器(一般是电信运营商提供的,也可以使用像Google提供的DNS服务器)发起域名解析请求(通过的是UDP协议向DNS的53端口发起请求,这个请求是递归的请求,也就是运营商的DNS服务器必须得提供给我们该域名的IP地址),运营商的DNS服务器首先查找自身的缓存,找到对应的条目,且没有过期,则解析成功。如果没有找到对应的条目,则有运营商的DNS代我们的浏览器发起迭代DNS解析请求,它首先是会找根域的DNS的IP地址(这个DNS服务器都内置13台根域的DNS的IP地址),找打根域的DNS地址,就会向其发起请求(请问www.baidu.com这个域名的IP地址是多少啊?),根域发现这是一个顶级域com域的一个域名,于是就告诉运营商的DNS我不知道这个域名的IP地址,但是我知道com域的IP地址,你去找它去,于是运营商的DNS就得到了com域的IP地址,又向com域的IP地址发起了请求(请问www.baidu.com这个域名的IP地址是多少?),com域这台服务器告诉运营商的DNS我不知道www.baidu.com这个域名的IP地址,但是我知道baidu.com这个域的DNS地址,你去找它去,于是运营商的DNS又向baidu.com这个域名的DNS地址(这个一般就是由域名注册商提供的,像万网,新网等)发起请求(请问www.baidu.com这个域名的IP地址是多少?),这个时候baidu.com域的DNS服务器一查,诶,果真在我这里,于是就把找到的结果发送给运营商的DNS服务器,这个时候运营商的DNS服务器就拿到了www.baidu.com这个域名对应的IP地址,并返回给Windows系统内核,内核又把结果返回给浏览器,终于浏览器拿到了www.baidu.com 对应的IP地址,该进行一步的动作了。

当查找到对应的IP地址之后,通过IP地址查找到对应的服务器,浏览器将用户发起的http请求发送给服务器

2.发起TCP的3次握手

拿到域名对应的IP地址之后,浏览器会以一个随机端口(1024 < 端口 < 65535)向服务器的Web server 80端口发起TCP的连接请求。

常见的web server产品有 apache、nginx、IIS、Lighttpd 等

这个连接请求到达服务器端后,进入到网卡,然后是进入到内核的TCP/IP协议栈,还有可能要经过防火墙的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。

三次握手:

        客户端–发送带有SYN标志的数据包–一次握手–服务端

        服务端–发送带有SYN/ACK标志的数据包–二次握手–客户端

        客户端–发送带有带有ACK标志的数据包–三次握手–服务端

如下图:

TCP 为什么需要3次握手?

举个例子:

假设一个老外在故宫里面迷路了,看到了小明,于是就有下面的对话:

老外: Excuse me,Can you Speak English?

小明: yes 。

老外: OK,I want …

在问路之前,老外先问小明是否会说英语,小明回答是的,这时老外才开始问路

3.建立TCP连接后发起http请求

进过TCP3次握手之后,浏览器发起了http的请求.

4.服务器端响应http请求,浏览器得到html代码

服务器端WEB程序接收到http请求以后,就开始处理该请求,处理之后就返回给浏览器html文件。

根据请求对应文件找到MIME TYPE(Content-Type)

那么如何处理请求?实际上就是后台处理的工作。后台开发现在有很多框架,但大部分都还是按照MVC设计模式进行搭建的。

处理的过程如下图:

MVC的处理过程是这样的:对于每一个用户输入的请求,首先被控制器接收,控制器决定用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器确定用哪个视图模型,用相应的视图格式化模型返回html字符串给浏览器,并通过显示页面呈现给用户。

5.浏览器处理html代码

接下来就是浏览器进行处理, 通过后台处理返回的HTML字符串被浏览器接受后被一句句读取解析,html页面经历加载、解析、渲染。

加载

浏览器对一个html页面的加载顺序是从上而下的。如果加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。

解析

解析文档是指将文档转化成为有意义的结构,也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树,它称作解析树或者语法树,也就是DOM树。如下图:

css解析将css文件解析为样式表对象。如下图:

js解析文件在加载的同时也进行解析

渲染

即为构建渲染树的过程,就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

6.浏览器对页面进行渲染呈现给用户

最后,浏览器利用自己内部的工作机制,把请求到的静态资源和html代码进行渲染,渲染之后呈现给用户。

浏览器渲染过程视频(需翻墙)

转载于:https://my.oschina.net/rlqmy/blog/1917257

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值