「最详细」输入url浏览器干了啥？

前言

这是前端一个老生常谈的一个问题了，看到这个标题可能觉得司尘要说，面试你咋回答这个问题巴拉巴拉的，但just知道怎么回答这种问题意义在哪呢？最近在看偏浏览器的一些底层知识，相信看完这篇分享必有收获，通过浏览器展开分享，做一次标题党。

预备tip

浏览器进程

我们所有运行的程序在都是通过进程去跑动该任务，我们来看一下打开网页有哪些进程。

由上到下他们分别是：

• 浏览器进程
  负责界面展示、用户交互、子进程之间的通信，是一个核心进程块，他就来指挥其他进程进行操作。

• GPU进程
  chrome的UI界面采用GPU来绘制，浏览器自身的一个进程

• 网络进程
  界面网络资源获取，就是在这一块

• 渲染进程
  这个就再熟悉不过了，浏览器排版引擎和JS引擎将我们的html、css、js转换成界面

• 插件进程
  执行插件时跑动，因为浏览器插件很多是三方的插件，可能会很不稳定，所以这边单拎一个进程

浏览器服务器通信

访问网页的过程底层无非就是一个主机和另一个主机的数据传输数据包的一个过程。

IP

ip是主机的唯一标识，主机之间传输数据把我们的数据包前面附上一个ip，诶嘿，我们就能收到了，强~

TCP

电脑进程那么多，我们建立连接了怎样才能保证传过来传到对应的进程上呢，而且数据包是打散发送的传过来之后怎么去排序接收到的数据包呢？传输数据时我们紧跟ip后面加上一个TCP，该字段包含端口号，每一个进程都有他唯一的端口号，TCP握手连接后，连接的就是进程端口和服务器。

TCP解决的点就是两个：

• 重传机制
• 数据包排序机制

那么这里就可以扯到TCP的三次握手四次挥手，哇这个说得太多了，这边就不徒增文字了，就补充一点，传输数据阶段，接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端，要是规定时间内没收到反馈，数据包将会再次发送(有时候网页加载慢得可能原因这个也包含)。

HTTP请求

主机间通过TCP连接完成之后，然后就发送HTTP请求去通信传递数据。

我们来看一下整个流程

这边的查找缓存包含的是两部分，这里后面再细说

• DNS缓存
• 内容缓存

正题

上面是一些预备的点，那么来到正题这边从输入URL到页面展示，浏览器干了啥？

输入url

这里是分两种情况

• 要是输入内容浏览器判定不是网址那么他会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的URL
  
  
• 如果判断输入内容符合 URL 规则那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。

输入完后，诶嘿我们一按回车我们先看浏览器这个时候发生了啥。
我们一按回车，浏览器还给了当前页面一次执行 beforeunload 事件的机会，这里可以写一段事件阻断跳转，默认情况下里面是未监听函数的就会直接跳转。还有就是我们在按下回车之后他不是立马跳转到url界面，是要到服务器给到result时才会跳转过去。

发请求

取缓存

在发请求时网络进程会先查看本地有没有对这个域名的内容的有效缓存。

有效缓存
一般的服务器给我们传递的可缓存数据肯定是有一个时限的，如若查询缓存已经不在时间内了那我们就还是要走后面的步骤，要是是可用缓存那就直接返回给浏览器进程显示。

要是没有缓存那我们继续往后走，我们发送DNS请求去解析网址，同样的DNS请求也是有缓存的，已经解析过的网址就可以直接在缓存中找到，这样的话就可以少了这一次网路请求。

建立TCP连接

接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

服务器响应数据

服务器响应数据分为很多种情况，想想咱的状态码，多得就有点可怕，这边就拎几种情况

重定向

在接收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302，那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，如此反复

缓存可用

如果缓存过期，那么我们就要发送请求过去，如果没有内容更新，就返回304状态码，相当于服务器告诉浏览器:“这个缓存可以继续使用，这次就不重复发送数据给你了。然后网络进程就把对应的缓存内容直接丢给浏览器进程显示。

响应类型

上面两种情况区分开来，我们终于是可以去处理浏览器返回的数据包。问题又来了呀哈哈哈，我们平常碰得到这种情况，一个网址点击过去是直接下载东西而不是一个网页，与Content-Type有关

从返回的响应头信息来看，其 Content-Type 的值是 application/octet-stream，浏览器会按照下载类型来处理该请求。如果是HTML，那么浏览器则会继续进行导航流程。由于 Chrome 的页面渲染是运行在渲染进程中的，所以接下来就需要准备渲染进程了。

渲染开始

分三步

• 到这里网络进程拿到服务器所返回的数据之后，回去给浏览器进程一个提示，然后浏览器进程就将网络进程与渲染进程连接起来。

• 渲染进程数据接收完毕会给浏览器发送消息

• 浏览器进程在收到消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面，我们就相当于从直接界面进入到了url界面(可能还没有完全渲染出来)，一旦页面生成完成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。ok网页加载完毕。

总结

该篇内容总结是阅读李兵老师的浏览器工作原理与实践的课程后的总结体会，将url过程细化到了每一步的实现。说是网络请求其实这部分更是偏向于浏览器底层的工作原理。