浏览器地址栏输入 URL 敲下回车后发生了什么?

浏览器地址栏输入 URL 敲下回车后发生了什么?

一、简单分析

简单的分析，从输入URL到回车后发生的行为如下：

1. URL解析
2. DNS 查询
3. TCP 连接
4. HTTP 请求
5. 响应请求
6. 页面渲染

二、详细分析

1、 URL解析

首先判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作

一个url的结构解析如下：

2、DNS查询

2.1 DNS是什么

DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器。

简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址

IP 地址：一长串能够唯一地标记网络上的计算机的数字

域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识

2.2 域名

域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级域名、三级域名…

例如www.xxx.com，www为三级域名、xxx为二级域名、com为顶级域名，系统为用户做了兼容，域名末尾的根域名.一般不需要输入

在域名的每一层都会有一个域名服务器，如下图：

除此之外，还有电脑默认的本地域名服务器

2.3 查询方式

DNS 查询的方式有两种：

1. 递归查询：如果 A 请求 B，那么 B 作为请求的接收者一定要给 A 想要的答案

2. 迭代查询：如果接收者 B 没有请求者 A 所需要的准确内容，接收者 B 将告诉请求者 A，如何去获得这个内容，但是自己并不去发出请求

2.4 域名缓存

在域名服务器解析的时候，使用缓存保存域名和IP地址的映射

计算机中DNS的记录也分成了两种缓存方式：

1. 浏览器缓存：浏览器在获取网站域名的实际 IP 地址后会对其进行缓存，减少网络请求的损耗
2. 操作系统缓存：操作系统的缓存其实是用户自己配置的 hosts 文件

2.5 查询过程

解析域名的过程如下：

1. 首先搜索浏览器的 DNS 缓存，缓存中维护一张域名与 IP 地址的对应表

2. 若没有命中，则继续搜索操作系统的 DNS 缓存

3. 若仍然没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器采用递归查询自己的 DNS 缓存，查找成功则返回结果

4. 若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询

   (1) 首先本地域名服务器向根域名服务器发起请求，根域名服务器返回顶级域名服务器的地址给本地服务器
   (2) 本地域名服务器拿到这个顶级域名服务器的地址后，就向其发起请求，获取权限域名服务器的地址
   (3) 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址

5. 本地域名服务器将得到的 IP 地址返回给操作系统，同时自己将 IP 地址缓存起来

6. 操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起

7. 至此，浏览器就得到了域名对应的 IP 地址，并将 IP 地址缓存起

流程如下图所示：

3、TCP连接

TCP（传输控制协议）：一种面向连接的、可靠的、基于字节流的传输层通信协议

在确定目标服务器服务器的IP地址后，则经历三次握手建立TCP连接，流程如下：

4、发送 http 请求

当建立tcp连接之后，就可以在这基础上进行通信，浏览器发送 http 请求到目标服务器

请求的内容包括：

• 请求行
• 请求头
• 请求主体

5、响应请求

当服务器接收到浏览器的请求之后，就会进行逻辑操作，处理完成之后返回一个HTTP响应消息，包括：

• 状态行
• 响应头
• 响应正文

在服务器响应之后，由于现在http默认开始长连接keep-alive，当页面关闭之后，tcp链接则会经过四次挥手完成断开

6、页面渲染

当浏览器接收到服务器响应的资源后，首先会对资源进行解析：

• 查看响应头的信息，根据不同的指示做对应处理，比如重定向，存储cookie，解压gzip，缓存资源等等
• 查看响应头的 Content-Type的值，根据不同的资源类型采用不同的解析方式

关于页面的渲染过程如下：

• 解析HTML，构建 DOM 树
• 解析 CSS ，生成 CSS 规则树
• 合并 DOM 树和 CSS 规则，生成 render 树
• 布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算
• 绘制 render 树（ paint ），绘制页面像素信息
• 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上

注：转载自JS每日一题（公众号）https://mp.weixin.qq.com/s/pb2Qk0dEsowFnPPUIXV4Qg