从 URL 输入到页面展现发生的事

看到这个问题，你是不是马上自信的答出：

从 URL 输入到页面展现经过以下过程：

1. 在浏览器输入 URL；

2. 浏览器查找域名对应的 IP 地址；

3. 浏览器根据 IP 地址与服务器建立联系；

4. 浏览器与服务器通信：浏览器请求，服务器处理请求并呈现页面。

这是个非常容易遇到的面试题，但要让面试官对我们的回答满意，还需更深入的了解。

经常的，我们打开一个网站

https://juejin.im/user/5c87e597e51d455cd96a1053/collections

上面这一连串的字符，称为 URL ，就是我们常说的网址。而浏览器正是靠一个个 URL 来查找资源的具体位置的。

1、URL 组成

就以上例网站为例，

1.1、协议部分

https

它是浏览器和 www 万维网之间的沟通方式，它会告诉浏览器在网络世界中找到资源的正确位置。

常见协议有：

http（最常见的网络传输协议）、https（进行加密的网络传输协议）、file（本地文件夹协议）、ftp、telnet 等。

1.2、域名部分

juejin.im

当然，我们更多的看到的是 xxx.com,xxx.cn 这种类型。

域名是人们为了方便记忆，所使用的语义化的方式登录网站，但我们必须要知道的是，每一个域名背后都有其对应的 IP 地址。

如我们都知道，当前电脑的 IP 是 127.0.0.1 ，也就是代表自己。

1.3、资源路径部分

/user/5c87e597e51d455cd96a1053/collections

域名后的这一串乱七八糟，就是资源路径部分啰

2、DNS

在我们了解了域名和 IP 之后，二者又是怎样联系到一起的呢。这里就引出了 DNS ， DNS ——用来记录域名和 IP 地址相互映射的信息。

• DNS 作用：可以让人们免于记住那些繁琐的数串；

• 全国 DNS 信息可以在网上查找到，各省都有对应分配的 IP 网段；

• 大型企业都有自己的 DNS 服务器，专门用来存储域名和 IP 的映射关系；

• 如谷歌的 DNS 服务器地址 8.8.8.8 ；国内知名 DNS 服务器地址 114.114.114.114 。

3、具体流程分析

3.1、浏览器输入 URL

当然是用你的键盘输啊

3.2、浏览器查找域名对应的 IP 地址

因为浏览器本身并不能识别 URL 是什么，因此从我们输入 URL 开始，浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式：

• 先查找浏览器缓存，浏览器会缓存 DNS 记录一段时间，如浏览器会缓存我们近期逛过的网站， （如果没有则往下） ；

• 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息，查找是否有目标域名和对应的 IP 地址 （如果没有则往下）；

• 查找路由器缓存 （如果没有则往下）；

• 从网络服务商（比如电信）的 DNS 缓存信息中查找（如果没有则往下）；

• 以上都未找到，就会向根域名服务器查找目标 URL 对应的 IP，根域名服务器会向下级服务器转达请求，层层下发，直到找到对应的 IP 为止。

3.3、浏览器根据 IP 地址与服务器建立联系

上一阶段中，浏览器通过 IP 寻址找到了对应的服务器，浏览器就将用户发起的 http 请求发送给服务器。服务器开始处理用户请求

3.4、浏览器与服务器通信

经过上一步骤，服务器返回了 html 字符串给浏览器，此时，浏览器将会对其进行解析、渲染并最终绘制网页：

1、加载 ：

• 浏览器对 html 页面进行加载，加载顺序自上而下。

• 览器在加载的过程中，同时进行解析、渲染处理

• 在这个过程中，遇到 link 标签、image 标签、script 标签时，浏览器会再次向服务器发送请求以获取相应的 css 文件、图片资源、js 文件，并执行 js 代码，同步进行加载、解析。

2、 解析、渲染 ：

• 解析的过程，其实就是生成 dom 树

• dom 树是由 dom 元素及属性节点组成，并且加上 css 解析的样式对象和 js解析后的动作实现；

• 渲染：就是将 dom 树进行可视化表示。

3、生成网页

• 浏览器通过渲染，将 dom 树可视化，得到渲染树；

• 构建渲染树使页面以正确的顺序绘制出来，浏览器遵循一定的渲染规则，实现网站页面的绘制，并最终完成页面的展示。

---

以上就是从 URL 输入到页面展示的全部过程了

简述版本

1.  读取缓存：
    搜索自身DNS缓存（如果 DNS 缓存中找到IP地址那么就跳过后面查找IP地址的过程，直接访问IP地址）
2.  DNS解析：将域名解析为IP地址
3.  建立TCP连接：TCP三次握手，简易描述
      客户端：服务端你能听到吗？
      服务端：可以的，你要连接我么？
      客户端：是的
      于是连接建立，开始进行请求
4.  发送 HTTP 请求
5.  服务端处理请求并返回HTTP报文
6.  浏览器解析渲染页面
7.  断开连接，TCP 四次挥手

此外，在6步骤中，关于渲染页面还可以分为以下详细几个步骤
  根据 HTML 解析生成 DOM 树
  根据 CSS 解析生成 CSS 规则树
  结合 DOM 树和 CSS 规则树，生成渲染树
  根据渲染树计算每个节点的信息
  根据计算好的信息绘制页面

参考 (opens new window)