前言
最近经常能看到“输入URL后浏览器做了什么”这么一道题,相信很多小伙伴也和我一样处于迷惑的状态。最初看到这个问题我就想,它爱干什么就干什么呗,网页显示了就成了,这和我有什么关系吗?影响我做前端开发吗?有关系也是和Server端还有运维的事情啊。实际上大部分时候我们并用不到相关的知识,但是本着“往死里卷”的态度,还是简单了解一下比较好。
本人能力有限,浅薄的说一下自己的理解,如果有误请各位指正。
URL是什么?
既然说是输入一个URL
后做了什么,那么我首先就要知道URL
是什么。
URL(Uniform Resource Locator):统一资源定位器 [RFC 1738]
其格式为
Scheme://host:port/path
看到名称后我们就知道URL
是用来定位网络上的某一个资源的。那么我们接下来开始输入。
输入一个URL后浏览器做了什么
1. URL是否合法
我们都知道,非法的URL
会调用浏览器的默认搜索引擎进行检索,所以我们就只讨论合法的情况
2. 通过域名解析获取IP地址
域名是给我们使用者方便记忆使用的,在寻址的过程中需要先将域名解析成IP地址
,过程可能有如下几种:
hosts
文件DNS
服务器- 已经解析过,走缓存文件
当你本地的hosts
文件中有对应的IP
配置,则直接使用,否则呢就去DNS
服务器做域名解析
不管使用什么方法,到这一步我们都会拿到 协议://ip:port/path 这样记录,接下来会通过网络层
进行ip
寻址,来找到目标服务器
说到这呢,好像有多出了几个概念,为了接下来方便理解,我们先简单说一下这些都是嘛。
知识扩展
首先让我们看看何为网络层
,在TCP/IP
协议栈中,对原始的OSI
七层模型(应、表、会、传、网、数、物)做了简化,简化后的模型为:
- 应用层 - HTTP
- 传输层 - TCP、
UDP - 网络层 - IP协议
- 数据链路层
- 物理层
正常来讲,我们只需要关心应用层的HTTP协议
、传输层的TCP协议
和网络层的IP协议
。因为目前来说无论是http1.1
和http2.0
的底层都是通过TCP协议
传输的。当然,http3.0
就不是了,http3.0
是基于UDP
+ google的QUIC协议
来实现的,我们目前还不涉及。
3. IP协议网络寻址
通过ip协议
,这个http
请求在庞大的网络中找到了目标服务器,接下来我们就会思考,找到服务器了,定位到了应用服务器上专门用来处理网络请求的服务(IIS/Apache等),那么我们如何找到对应的站点呢?
是的,port
端口号,大家都知道每个应用服务器上都可能跑着很多网站,若想交换数据,我们就需要定位到对应的网站或者进程,这也就是port
的作用之一。如果在请求的时候不填写,那么http
会请求会被默认路由到80端口
,https
会被默认路由到443端口
现在我们在茫茫网络中,找到了另一端的网络进程,接下来就要开启正式访问了。
4. 建立连接
接下来就是建立连接的过程了,那么为什么要建立连接,直接传数据不好吗?这就涉及到TCP协议
封装的问题了,我们先看看TCP协议
的特点。
TCP协议
的特点:
- 面向连接
- 可靠的传输
- 流量控制、拥塞控制
相较于UDP
的面相无连接(报文)来说,TCP
就显得更加可靠了一些,当然他也有缺点,先简单延伸一下,此处不细说
接下来就是大名鼎鼎的三次握手环节
三次握手
首先我们先看看在握手的过程中会出现的位码
:
- SYN=1:申请建立连接
- ACK(acknowledgement)=1:确认连接
- Sequence number:请求的序列号
- Acknowledge number:确认的序列号
三次握手简要过程:
- 第一次握手:客户机 -> 服务器:喂,你在吗?还能对外正常提供服务吗?
- 客户端发送: SYN=1, Sequence number=
j
- 客户端发送: SYN=1, Sequence number=
- 第二次握手:服务器 -> 客户机:我在,可以的。
- ……此处省略N种判断,各种连接队列啊什么的
- 服务器回执:SYN=1; ACK=1,Acknowledge number=
j + 1
,Sequence number=k
- 第三次握手:客户机 -> 服务器:妥嘞,我马上就到
- 首先确认下是否是自己请求连接的服务器,通过
ack num
是否等于seq num + 1
- 然后确认对方是否提供服务,通过
ACK
是否等于1 - 客户端发送:Acknowledge number=
k + 1
, ACK=1
- 首先确认下是否是自己请求连接的服务器,通过
通过三次握手,已经成功建立了连接,接下来开始正式请求阶段
5. 客户端创建HTTP请求并发出
HTTP请求种包含3个部分:
- 请求行:
METHOD
URL
HTTP/1.1 - 请求头:Host、Connection、Content-Type等
- 请求体(可能没有,如GET请求):需要提交的数据
http1.1默认开启keep-alive
,长连接模式,此时已经建立连接,无需再次执行TCP
的三次握手
6. 服务器响应数据
一样,服务器需要创建response
相关的行、头、体
6.1 状态码
- 301 永久重定向
- 302 临时重定向
- 304 资源重定向,通过last-modify等字段判断客户端已经发起过请求,数据在此期间并未发生更改,从缓存读取
- 2xx 正常响应
- 4xx 资源未找到/权限问题禁止访问
- 5xx 服务器错误/网络错误
什么情况下会产生301/302
当你使用 http://baidu.com访问时百度时,服务器端会返回302
,并将地址https:
//www.
baidu.com/返回给浏览器,然后浏览器自动重定向到正确的地址上,重新和新地址建立连接。
至于什么时候301
什么时候302
,仁者见仁智者见智,影响都不大
7. 浏览器收到数据
浏览器的网络进程将请求到的数据交给内部渲染进程
8. 渲染页面
写不动了,简单概括一下收工
- 将
html
文档通过词法分析解释称DOM Tree
- 等待所有外链
css
文件请求归位后,将css
解释成Style Rules
- 合并
DOM Tree
和Style Rules
,产出Render Tree
(浏览器回流和重绘的基础) - 根据
Render Tree
绘制内容,最终显示在屏幕上
收工
其实每一个小的细节点都足够拿出来说一说,本人水平有限,有说的不对的还请多多包涵和指正。
刘佳旭 | liujax@126.com