前端面试必会!从输入URL到页面展示完成浏览器做了些什么?

为什么输入URL就可以显示想要的页面?浏览器偷偷做了些什么?前端可以针对这些做哪些优化?

最近,在准备面试,这个问题我是被面试官问怕了,浏览器到底做了什么?你去问浏览器呗(尴尬)。想一下还是系统学习总结一下吧,话不多说看张图!

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第1张图片

可以看出来,从输入URL到浏览器显示完成可以大概分为5个阶段:

  • DNS解析
  • TCP阶段
  • HTTP阶段
  • 解析 / 渲染阶段
  • 布局layout / 渲染页面

DNS解析

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第2张图片

浏览器在发起http请求前,会先解析这个域名,找到ip地址。这个过程就是dns解析。解析过程如下:
1)浏览器先查询hosts文件是否有与这个域名对应的ip地址,如果有则直接向这个ip地址发起http请求。查询不到就进行下一步。

2)浏览器向本地DNS服务器发出解析域名的DNS解析报文,本地DNS服务器收到请求后,先查询缓存,判断是否有对应的记录,如果有就返回这条记录,查询不到就进行下一步。

3)本地DNS服务器没有在缓存中查询到对应的记录,本地DNS服务器于是就向DNS根服务器发起查询请求。DNS根服务器收到请求通过查询得到顶级域名对应的顶级域服务器的ip地址,然后向本地DNS服务器发送一条应答报文。

4)本地DNS服务器收到应答报文后,得到顶级域服务器的地址,然后向该地址发送请求解析域名的DNS请求报文。

5)顶级域名服务器在收到请求后先查询缓存是否有对应的记录,如果有就返回对应的记录,如果没有找到就查询域名对应的二级域服务器地址,然后将域名对应的二级域服务器地址返回给本地DNS服务器。

6)本地DNS服务器收到应答报文后,得到二级域服务器的地址,然后向该地址发送请求解析域名的DNS请求报文。

7)二级域服务器在收到请求后先查询缓存是否有对应的记录,如果有就返回对应的记录,如果没有找到就查询域名对应的三级域服务器地址,然后将域名对应的三级域服务器地址返回给本地DNS服务器。

8)本地DNS服务器收到应答报文后,得到三级域服务器的地址,然后向该地址发送请求解析域名的DNS请求报文。

9)三级域服务器在收到请求后在DNS区域数据库中查询对应的记录,返回对应的记录

10)本地名称服务器在收到三级域服务器后,向用户返回一条DNS应答报文,并将这条记录保存在缓存中

11)浏览器就得到了域名对应的ip地址,然后就可以发起http请求了

TCP阶段

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第3张图片

看一看下面的3个概念:
ACK : TCP协议规定,只有ACK=1时有效,也规定连接建立后所有发送的报文的ACK必须为1  
SYN(SYNchronization):在连接建立时用来同步序号。当SYN=1而ACK=0时,表明这是一个连接请求报文。对方若同意建立连接,则应在响应报文中使SYN=1和ACK=1.
因此, SYN置1就表示这是一个连接请求或连接接受报文。  
FIN (finis):完,终结的意思, 用来释放一个连接。当 FIN = 1
时,表明此报文段的发送方的数据已经发送完毕,并要求释放连接。

上面介绍了tcp的3次握手和4次挥手过程,在进行http连接前需要通过tcp的3次握手来让客户端和服务端互相确认彼此,才能安心的进行数据传输。

HTTP阶段

经过上面复杂的沟通,双端终于可以说话了,通常HTTP消息包括客户机向服务器的请求消息服务器向客户机的响应消息。在浏览器查看一个http请部如下,包括3个部分:

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第4张图片

1、通用头部

 1)通用头域包含请求和响应消息都支持的头域。
 2)Request URL:请求的URL地址
 3)Request Method: 请求方法,get/post/put/……
 4)Status Code:状态码,200 为请求成功
 5)Remote Address:路由地址

2、请求头部

 1) Accept:  告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型;
 2)Accept-Charset:  浏览器申明自己接收的字符集
 Accept-Encoding:浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法  (gzip,deflate)
 3)Accept-Language:  浏览器申明自己接收的语言。语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等。
 4)Authorization:  当客户端接收到来自WEB服务器的 WWW-Authenticate 响应时,该头部来回应自己的身份验证信息给WEB服务器。
 5)Connection:表示是否需要持久连接。close(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,断开连接,
 不要等待本次连接的后续请求了)。keep-alive(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,保持连接,等待本次连接的后续请求)。
 6)Referer:发送请求页面URL。浏览器向 WEB 服务器表明自己是从哪个 网页/URL 获得/点击 当前请求中的网址/URL。
 7)User-Agent: 浏览器表明自己的身份(是哪种浏览器)。
 8)Host: 发送请求页面所在域。
 9)Cache-Control:浏览器应遵循的缓存机制。
        no-cache(不要缓存的实体,要求现在从WEB服务器去取)
        max-age:(只接受 Age 值小于 max-age 值,并且没有过期的对象) 
        max-stale:(可以接受过去的对象,但是过期时间必须小于 max-stale 值)  
        min-fresh:(接受其新鲜生命期大于其当前 Age 跟 min-fresh 值之和的缓存对象)
 10)Pramga:主要使用 Pramga: no-cache,相当于 Cache-Control: no-cache。
 11)Range:浏览器(比如 Flashget 多线程下载时)告诉 WEB 服务器自己想取对象的哪部分。
 12)Form:一种请求头标,给定控制用户代理的人工用户的电子邮件地址。
 13)Cookie:这是最重要的请求头信息之一

3、响应头部

  1)Age:当代理服务器用自己缓存的实体去响应请求时,用该头部表明该实体从产生到现在经过多长时间了。
  2)Accept-Ranges:WEB服务器表明自己是否接受获取其某个实体的一部分(比如文件的一部分)的请求。bytes:表示接受,none:表示不接受。
  3) Cache-Control:服务器应遵循的缓存机制。
          public(可以用 Cached 内容回应任何用户)
          private(只能用缓存内容回应先前请求该内容的那个用户)
          no-cache(可以缓存,但是只有在跟WEB服务器验证了其有效后,才能返回给客户端) 
          max-age:(本响应包含的对象的过期时间)  
          ALL:  no-store(不允许缓存)  
  4) Connection: 是否需要持久连接
          close(连接已经关闭)。
          keepalive(连接保持着,在等待本次连接的后续请求)。
          Keep-Alive:如果浏览器请求保持连接,则该头部表明希望 WEB 服务器保持连接多长时间(秒)。例如:Keep-Alive:300
  5)Content-Encoding:WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。 例如:Content-Encoding:gzip 
  6)Content-Language:WEB 服务器告诉浏览器自己响应的对象的语言。
  7)Content-Length:WEB 服务器告诉浏览器自己响应的对象的长度。例如:Content-Length: 26012
  8)Content-Range:WEB 服务器表明该响应包含的部分对象为整个对象的哪个部分。例如:Content-Range: bytes 21010-47021/47022
  9)Content-Type:WEB 服务器告诉浏览器自己响应的对象的类型。例如:Content-Type:application/xml
 10)Expired:WEB服务器表明该实体将在什么时候过期,对于过期了的对象,只有在跟WEB服务器验证了其有效性后,才能用来响应客户请求。
 11) Last-Modified:WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间等等。
 12) Location:WEB 服务器告诉浏览器,试图访问的对象已经被移到别的位置了,到该头部指定的位置去取。
 13)Proxy-Authenticate: 代理服务器响应浏览器,要求其提供代理身份验证信息。
 14)Server: WEB 服务器表明自己是什么软件及版本等信息。
 15)Refresh:表示浏览器应该在多少时间之后刷新文档,以秒计。
 

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第5张图片

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第6张图片

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第7张图片

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第8张图片

解析/渲染 过程

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第9张图片
浏览器是一个边解析边构建渲染树的过程,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在处理后续内容的同时把处理过的局部内容先展示出来。

1.dom树构建

首先浏览器解析HTML文件构建DOM树,Parser模块主要负责解析HTML页面,完成从HTML文本到HTML语法树再到文档对象树(Document Object Model Tree,DOM Tree)的映射过程。

2.css解析

解析到CSS文件时则会下载css构建渲染树。遇到image等资源也会同步下载不会阻塞html树的构建。但是由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头重新渲染这部分代码(重排/重绘)。
CSS解析的过程类似于HTML解析,也是浏览器使用自带的解析器进行解析,一般解析过程是由上而下,会将CSS文件解析成为StyleSheet对象,且每个对象都包含CSS规则。CSS规则对象包含了选择和声明对象,以及其他与CSS语法对应的对象。CSS解析完成后会大致生成如下结构的CSS Rule Tree。

css解析过程:

前端面试必会!从输入URL到页面展示完成浏览器做了些什么?_第10张图片

3.加载js

遇到js时情况就变的复杂了。当遇到script标签的时候浏览器暂停解析(不是暂停下载),将控制权交给JavaScript引擎(解释器)。因为js中会存在对dom的操作,操作完成后会触发 重排/重绘 ,所以继续解析也没有意义。
如果