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

完整的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服务器首先查找自身的缓存,找到对应的条目,且没有过期,则解析成功。

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

当查找到对应的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标志的数据包–三次握手–服务端

如下图:

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

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设计模式进行搭建的。

处理的过程如下图:

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

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

5.浏览器处理html代码

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

加载

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

解析

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

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

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

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

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

渲染

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

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

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

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

这些技术如何学习,有没有免费资料?

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好,欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有的架构经验哦!!


分享到:


相關文章: