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

时间:2021-1-8 作者:admin

输入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和端口号,如果之前DNFS数据缓存服务缓存过当前域名信息,则直接返回缓存信息,否则发起请求获取根据域名解析出来的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给浏览器进程,浏览器进程收到信息后生成页面并显示。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。