输入一个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)

待续....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容