输入一个URL到页面渲染的过程

描述一下从输入URL到浏览器页面渲染的过程

以下内容会根据本人水平的变化不定期更新答案，目标是写出一个完整的全方位的答案

---

目录

1. HSTS 和 dns解析
2. Rap协议解析MAC地址
3. 浏览器的强缓存或者协商缓存的触发
4. 浏览器进程对请求返回的数据的解析
5. 页面的渲染

从输入url到HSTS

首先，我们在url地址栏开始输入时，浏览器根据你的输入动态匹配是否对地址有缓存，如下图:

image

然后，假设当前我们就是要输入baidu的地址，直接回车即可。这里需要注意的是，我们直接baidu.com的形式访问，发起的是http请求，而如果启用了HSTS，那么浏览器会自动帮你重定向，然后把请求协议改为https。如图:

image

而如果我们没有启用HSTS，而是直接请求站点的话，那么服务器会返回一个302/301的状态码然后要求客户端重定向到443端口，然后重新以https向服务器发起请求。

DNS解析获取ip地址

根据URL，会开始按照下面的流程查询，获取域名对应的IP地址

1. 首先会查询本机的host文件，如果获取到ip则直接返回，如果没有则继续往下查找
2. 向本地DNS缓存查询，如果查询到了则返回，没有则开始向DNS服务器查询，而DNS服务器的ip地址在我们链接了网络之后本机就会有这个地址了。
3. 如果DNS服务器中没有查询到，那么就会开启一个递归查询

1. 先向.root服务器查询，.root会返回 .com的ip地址
2. 然后向.com服务器查询，.com 会返回 baidu.com的ip地址
3. 然后向baidu.com服务器查询,baidu.com会返回 www.baidu.com的ip地址
4. 然后www.baidu.com会返回ip地址，然后本机会把ip地址缓存到本地

上图帮助理解:

image

RAP协议解析获取MAC地址

因为我们知道，机器之间的通讯实际上是网卡之间的通讯，而网卡之间通讯实际上是通过MAC地址进行通讯的。而ARP协议就是用来通过IP地址解析出MAC地址的

1. 主机回向本机缓存的ARP协议表查询是否有对应的MAC地址，如果没有则会向网络发起一个广播（Rap Request），网络上的其他主机不会作出回应，只有目标地址的主机会以单播的形式作出回应，并且带上自己的ip和MAC。浏览器会把这个IP和MAC缓存起来，同样的目标主机也会把我们的IP和MAC缓存起来存放在ARP缓存表里面。在接下来的一段时间内，将不会再重新请求(TTL)
2. 最后会把这个MAC地址写进请求帧中

image

浏览器的强缓存或者协商缓存的触发

在我们一切就绪之后，我们会开始向服务器发送请求。也就是所谓的浏览器和服务器之间的应答，即浏览器向服务器发起一次HTTP请求，而在这一步中我们或浏览器本身会存在一种缓存机制

1. 强缓存
2. 协商缓存

在正式讲解之前，我们先上一张图。

image

而执行强缓存和协商缓存，分别是通过不同的标识符来判断的。他们的执行顺序是

(Expires > Cache-Control > Etag/If-None-Match > Last-Modified/If-Modified-Since)

首先浏览器会先执行强缓存，强缓存的过程是:

1. 首先浏览器会先查看缓存中的标识符（Expires / Cache-Control）这两个标识符分别存的都是时间，不过有一些不同，Expires的值是一个具体的日期，而Cache-Control的值则是一个固定的时间例如Max-age。

2. 浏览器在获取到了标识符之后，判断是否已经过期，如果没过期则直接返回数据，然后进行下一步

2.1 而如果过期了，则向服务器发起http请求 (这个时候将会执行的是协商缓存)。然后一切顺利的话，服务器会返回标识符和数据，然后浏览器再把他们缓存起来
2.2 而如果缓存中没有标识符也没有数据缓存，则浏览器也会直接向服务器发起http请求，之后也和上面一样，把结果缓存起来。（第一次请求）

一切顺利的话，会有以下的效果：

image

其中，from memory cache意思是缓存来自内存, 如果是from disk cache 则标识缓存来自硬盘

而如果强缓存失效也就是上面的2.1，那么浏览器会携带者标识符，向服务器发起请求，服务器会根据浏览器携带过来的标识符判断是否使用缓存，而这个过程就是协商缓存

协商缓存会有以下情况:

1. 协商缓存生效，返回响应码304，浏览器根据304的响应码直接获取缓存中的数据，并且把新的缓存标识也缓存到浏览器缓存中。

   
   image

2. 协商缓存没生效，则返回响应码200，并且返回请求的结果

   
   image

其实协商缓存的过程，请求都会发送到服务器。只是服务器会根据缓存标识判断数据是否已失效，如果失效了则重新进行查询，然后返回最新的数据，如果没有失效，则通知浏览器直接取缓存中的数据。

协商缓存使用的标识符主要是(Last-Modified/If-since-Modified 和 Etag/If-None-Match)

Last-Modified的值是服务器响应请求时，返回该资源文件在服务器最后被修改的时间，在响应报文中的字段是：

last-modified: Web, 20 Mar 2020 10:37:56 GTM

而浏览器再次发起请求得时候以If-Since-Modified的字段去携带这个值，并且返回后服务器。之后服务器会把这个值的时间拿去和文件的更新时间作对比。再按情况返回不同的响应码

而如果我们设置了Etag/If-None-Match。那么会优先执行这个标识符，而这个标识符的其实存储的是文件的一个唯一标识符，服务器会根据这个唯一标识符是否一致去判断文件是否有变更。

到这里浏览器的缓存就走完了。然后接下来，假设我们成功获取到了服务器返回的数据。浏览器开始解析我们从网络上请求下来的数据（假设是一个html文件）

浏览器进程对请求返回的数据的解析

首先，浏览器的network thread 会根据响应报文的Content-Type判断响应主体的媒体类型，如果返回的是一个HTML则会把数据交给Render process来进行下一步的处理，而如果返回的是一个zip的文件或者其他，会把相关数据传输给下载管理器

与此同时。浏览器还会进行Safe Browsing安全检查，如果域名或者请求的内容匹配到的是已知的恶意站点，那么浏览器会展示一个警告的页面。除此之外网络线程还会做CORB检查，也就是跨域检查（即对比Origin的域名和Acess-Control-Allow的值看是否是一致

假设我们获取到的资源是一个HTML文件，然后浏览器会把HTML文件交给渲染进程

渲染进程的组成是:

• 一个主线程（main thread）
• 多个工作线程（work thread）
• 一个合成器线程（compositor thread）
• 多个光栅化线程（raster thread）

待续....