描述一下从输入URL到浏览器页面渲染的过程
以下内容会根据本人水平的变化不定期更新答案,目标是写出一个完整的全方位的答案
目录
- HSTS 和 dns解析
- Rap协议解析MAC地址
- 浏览器的强缓存或者协商缓存的触发
- 浏览器进程对请求返回的数据的解析
- 页面的渲染
从输入url到HSTS
首先,我们在url地址栏开始输入时,浏览器根据你的输入动态匹配是否对地址有缓存,如下图:
然后,假设当前我们就是要输入baidu的地址,直接回车即可。这里需要注意的是,我们直接baidu.com的形式访问,发起的是http请求,而如果启用了HSTS,那么浏览器会自动帮你重定向,然后把请求协议改为https。如图:
而如果我们没有启用HSTS,而是直接请求站点的话,那么服务器会返回一个302/301的状态码然后要求客户端重定向到443端口,然后重新以https向服务器发起请求。
DNS解析获取ip地址
根据URL,会开始按照下面的流程查询,获取域名对应的IP地址
- 首先会查询本机的host文件,如果获取到ip则直接返回,如果没有则继续往下查找
- 向本地DNS缓存查询,如果查询到了则返回,没有则开始向DNS服务器查询,而DNS服务器的ip地址在我们链接了网络之后本机就会有这个地址了。
- 如果DNS服务器中没有查询到,那么就会开启一个递归查询
- 先向.root服务器查询,.root会返回 .com的ip地址
- 然后向.com服务器查询,.com 会返回 baidu.com的ip地址
- 然后向baidu.com服务器查询,baidu.com会返回 www.baidu.com的ip地址
- 然后www.baidu.com会返回ip地址,然后本机会把ip地址缓存到本地
上图帮助理解:
RAP协议解析获取MAC地址
因为我们知道,机器之间的通讯实际上是网卡之间的通讯,而网卡之间通讯实际上是通过MAC地址进行通讯的。而ARP协议就是用来通过IP地址解析出MAC地址的
- 主机回向本机缓存的ARP协议表查询是否有对应的MAC地址,如果没有则会向网络发起一个广播(Rap Request),网络上的其他主机不会作出回应,只有目标地址的主机会以单播的形式作出回应,并且带上自己的ip和MAC。浏览器会把这个IP和MAC缓存起来,同样的目标主机也会把我们的IP和MAC缓存起来存放在ARP缓存表里面。在接下来的一段时间内,将不会再重新请求(TTL)
- 最后会把这个MAC地址写进请求帧中
浏览器的强缓存或者协商缓存的触发
在我们一切就绪之后,我们会开始向服务器发送请求。也就是所谓的浏览器和服务器之间的应答,即浏览器向服务器发起一次HTTP请求,而在这一步中我们或浏览器本身会存在一种缓存机制
- 强缓存
- 协商缓存
在正式讲解之前,我们先上一张图。
而执行强缓存和协商缓存,分别是通过不同的标识符来判断的。他们的执行顺序是
(Expires > Cache-Control > Etag/If-None-Match > Last-Modified/If-Modified-Since)
首先浏览器会先执行强缓存,强缓存的过程是:
首先浏览器会先查看缓存中的标识符(Expires / Cache-Control)这两个标识符分别存的都是时间,不过有一些不同,Expires的值是一个具体的日期,而Cache-Control的值则是一个固定的时间例如Max-age。
浏览器在获取到了标识符之后,判断是否已经过期,如果没过期则直接返回数据,然后进行下一步
2.1 而如果过期了,则向服务器发起http请求 (这个时候将会执行的是协商缓存)。然后一切顺利的话,服务器会返回标识符和数据,然后浏览器再把他们缓存起来
2.2 而如果缓存中没有标识符也没有数据缓存,则浏览器也会直接向服务器发起http请求,之后也和上面一样,把结果缓存起来。(第一次请求)
一切顺利的话,会有以下的效果:
其中,from memory cache意思是缓存来自内存, 如果是from disk cache 则标识缓存来自硬盘
而如果强缓存失效也就是上面的2.1,那么浏览器会携带者标识符,向服务器发起请求,服务器会根据浏览器携带过来的标识符判断是否使用缓存,而这个过程就是协商缓存
协商缓存会有以下情况:
-
协商缓存生效,返回响应码304,浏览器根据304的响应码直接获取缓存中的数据,并且把新的缓存标识也缓存到浏览器缓存中。
-
协商缓存没生效,则返回响应码200,并且返回请求的结果
其实协商缓存的过程,请求都会发送到服务器。只是服务器会根据缓存标识判断数据是否已失效,如果失效了则重新进行查询,然后返回最新的数据,如果没有失效,则通知浏览器直接取缓存中的数据。
协商缓存使用的标识符主要是(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)
待续....