详细解释:浏览器从输入URL通过浏览器显示发生了什么

输入URL地址

  • 用户输入地址后,浏览器判断输入信息是搜索仍是网址,若是是搜索内容则使用默认搜索引擎合成新的URL;若是输入的URL地址符合规则,浏览器根据URL协议,在这段内容加上协议合成合法URL,例如输入www.baidu.com,会加上协议合成 https://www.baidu.com

按下回车键

  • 用户输入内容按下回车键后浏览器导航栏显示loading状态,页面上还显示着前一个页面的内容,这是由于请求的新页面尚未响应数据

构建请求

  • 浏览器构建请求头和请求行信息 GET /index.html HTTP1.1 ,经过进程间通讯(IPC)将URL请求发送给浏览器的网络进程

查找缓存

  • 网络进程收到URL地址发起网络请求以前,在浏览器中查找是否有要请求的文件,若是本地有缓存副本则拦截请求,返回本地资源副本,并直接结束请求返回200。若是本地没有缓存,则进入网络请求过程

准备IP地址和端口

  • 网络进程请求DNS返回域名对应的IP和端口号,若是以前DNS数据缓存服务缓存过当前域名信息,则直接返回缓存信息,不然发起请求获取根据域名解析出来的IP和端口号。若是没有端口号,则使用默认端口号,http使用80端口,https使用443端口。若是是https请求,还须要创建TLS链接。

Chrome浏览器的队列机制

  • 同一域名同时最多只能创建6个TCP链接,若是在同一个域名下同时有超过6个的请求发生,则剩下的请求进入队列排队,直至进行中的请求完成,若是当前请求数少于6个,则直接创建TCP链接

发起请求

  • 通过TCP三次握手即可以发起请求,而后http请求会加上TCP头部—包括源端口号,目的端口号和校验数据完整性的序号,向下层传输
  • 网络层在数据包加上IP头部,包括源IP地址和目的IP地址,继续向下层传输
  • 底层经过物理网络传输到目的服务器

目的服务器解析请求

  • 目的服务器主机网络层接收到数据包解析出IP头部,识别数据部分,解包后开始向上传输到传输层
  • 传输层获取到数据解析出TCP头部,识别端口,解包后向上传输到应用层
  • 应用层HTTP解析出请求头和请求体,若是须要重定向,HTTP直接返回HTTP响应状态码301(永久重定向)或者302(临时重定向),同时在请求头Location字段附上重定向地址,浏览器进行重定向操做。若是不是重定向,服务器根据请求头中的If-None-Match的值判断请求资源是否被更新,若是没有更新返回304,告诉浏览器以前的缓存还可使用,不然就返回新数据200状态码,服务器能够在响应头中设置Cache-Control:Max-age=2000(单位:秒)来让浏览器设置数据缓存时间。
  • 数据最终又经过应用层—>传输层—>网络层—>底层—>底层—>网络层—>传输层—>应用层的顺序返回到浏览器的网络进程中
  • 数据传输完成后,TCP四次挥手断开链接。若是浏览器或者服务器在请求头加上Connection:Keep-Alive字段则能够保持浏览器和服务器的链接状态,省去下次从新创建链接的时间。

浏览器解析响应数据

  • 浏览器的网络进程得到数据包后根据响应头的Content-Type字段判断响应数据类型,若是是字节流类型则将请求交给下载管理器。若是是text/html类型,则通知浏览器进程获取到文档进行渲染。
  • 浏览器进程收到通知,判断页面B是否从页面A打开而且判断A和B是不是同一个站点(根域名和协议同样就属于同一站点),若是知足条件则页面B和页面A共用同一个渲染进程,若是之后打开更多页面符合同一站点规则,则都复用页面A的渲染进程。不是同一站点,则新建一个单独的渲染进程。
  • 浏览器收到确认提交的消息后便更新浏览器的页面状态,包括安全状态、URL地址,前进后退的历史状态,并更新页面。
  • 渲染进程开始页面的渲染,HTML解析生成DOM树,CSS样式表转化为浏览器能看懂的styleSheets,计算出DOM节点的样式
  • 建立布局树,计算元素布局信息
  • 对布局树进行分层,生成分层树
  • 为每一个图层生成绘制列表,将其提交到合成线程(属于渲染进程),合成线程将图层分红图块,并在光栅化线程池中将图块转化成位图
  • 合成线程发送绘制图块命令DrawQuad给浏览器进程,浏览器进程收到信息后生成页面并显示。