浏览器输入URL后发生了什么

摘要

  1. DNS域名解析
  2. 建立TCP连接
  3. 发送HTTP请求
  4. 处理器处理请求
  5. 返回响应结果
  6. 关闭TCP连接
  7. 浏览器解析HTML
  8. 浏览器渲染布局

客户端检查

第一步不是解析地址,而是输入地址,并且要看你输入的地址是否合法。。

DNS域名解析

第一步解析URL所对应的的ip地址,如果本地(一般是DNS cache,hosts文件内的对应关系)有,则建立连接;如果没有,去dns服务器找。

客户端向本地dns服务器发送请求www.baidu.com

本地DNS服务器迭代查询过程

  • → 本地dns服务器先去根dns服务器查找,得到comDNS服务器ip地址返回给本地DNS服务器
  • → 本地DNS服务器再去comDNS服务器查询,comDNS服务器去查询www.baidu.com的相关DNS服务器的IP地址并返回给本地DNS服务器。
  • → 本地DNS将获取到的IP地址返回给客户端。

客户端到本地DNS服务器是递归查询,本地DNS服务器查询过程属于迭代查询。

一般情况下,本地DNS服务器缓存了部分DNS服务器地址,可以直接返回结果。

如果请求的资源是静态资源,有可能会到达cdn服务器;如果请求的是动态资源,流量可能会经过代理/网关,web服务器,应用服务器,数据库。对于大型应用来说,一般还会有负载均衡处理,由集群处理请求,集群之间通过实现会话同步、健康检查等机制来保证高可用。

后台服务器的部署架构又是另一方向的问题了。

建立连接

客户端获取到服务器ip地址后,就要建立连接。整个过程可以分解为建立连接、发送 HTTP 请求、返回 HTTP 响应、维持连接、释放连接五个部分

TCP三次握手

  1. 客户端发送带有SYN标志的数据包给服务端
  2. 服务端收到后,返回一个带有SYN/ACK标志的数据包,以示传达确认信息
  3. 客户端收到确认信息后再回传一个带ACK标志的数据包,握手结束。

连接成功

发送HTTP请求

https建立的连接会进行信息加密,一般是用TLS,加密后的信息再由TCP传输。

请求报文

报文首部
请求行
请求首部字段
通用首部字段
实体首部字段
其他
  • 请求行包括请求方法,URL,HTTP版本。
  • 首部字段传递重要信息,包括请求首部字段、通用首部字和实体首部字段。

服务器处理请求

服务器端收到请求后,由web服务器(http服务器)处理请求,后端如apache,ngnix,iis等服务处理。解析用户请求后,将资源文件处理后返回给浏览器客户端。如果有动态资源的话,还需要通过数据库调度返回信息。

返回响应结果

|响应报文|
|—|—|
|报文首部|
|空行|
|报文主体|

报文首部
状态行
响应首部字段
通用首部字段
实体首部字段
其他

HTTP状态码类别

响应结果中会有一个HTTP状态码
||类别|原因|
|—|—|—|
|1xx|信息性状态码|接收的请求正在处理|
|2xx|成功状态码|请求正常处理完毕|
|3xx|重定向状态码|需要进行附加操作以完成请求|
|4xx|客户端错误状态码|服务器无法处理请求|
|5xx|服务器错误状态码|服务器处理请求出错|

维持连接

完成一次 HTTP 请求后,服务器并不是马上断开与客户端的连接。在 HTTP/1.1 中,Connection: keep-alive 是默认启用的,表示持久连接,以便处理不久后到来的新请求,无需重新建立连接而增加慢启动开销,提高网络的吞吐能力。在反向代理软件 Nginx 中,持久连接超时时间默认值为 75 秒,如果 75 秒内没有新到达的请求,则断开与客户端的连接。同时,浏览器每隔 45 秒会向服务器发送 TCP keep-alive 探测包,来判断 TCP 连接状况,如果没有收到 ACK 应答,则主动断开与服务器的连接。注意,HTTP keep-alive 和 TCP keep-alive 虽然都是一种保活机制,但是它们完全不相同,一个作用于应用层,一个作用于传输层。

关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似,关闭TCP连接,需要4次握手。

  1. 客户端发送FIN(m)
  2. 服务端收到后发送ACK(m+1)
  3. 服务端再次发送FIN(n)
  4. 客户端收到后回复ACK(n+1)

浏览器解析HTML

一般来说,浏览器解析网址之后获取到的都是一个HTML网页,当然也不止只有一个HTML,还有CSS JS,图片视频等资源。
浏览器获取到HTML之后,开始构建DOM数,解析CSS之后,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树种没有headdisplay:none;之类的元素节点.

解析过程中遇到css可以继续解析HTML,但是在解析到JS后悔停止解析HTML,出现阻塞。

浏览器布局渲染

根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破这种布局,改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念:replaint和reflow。

  • replaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。
  • reflow: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。

浏览器渲染引擎会先渲染不涉及尺寸和位置的replaint,之后在渲染需要涉及计算的尺寸位置的reflow。

reference

细说浏览器输入URL后发生了什么

浏览器输入 URL 后发生了什么?

在浏览器地址栏输入一个URL后回车,背后会进行哪些技术步骤? - 车小胖的回答 - 知乎

whta-happens-when

SSL/TLS协议运行机制的概述