2019-08-14 URL导航和页面展示

https://github.com/skyline75489/what-happens-when-zh_CN

渲染进程

Chrome 的默认策略是,每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面,而新页面和当前页面属于同一站点的话,那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance。
同一站点:根域名加上HTTP/HTTPS协议,即不同协议的同一域名不是同一站点。

小知识点

  • 下载是由浏览器进程进行管理的
  • 等到浏览器进程向渲染进程提交文档阶段时,页面内容才会被替换(触发当前页的卸载事件和收集需要释放内存)
  • 重定向返回的响应也会被缓存,301为永久重定向,302为临时重定向,永久重定向会引发一些问题,可以通过消除浏览器缓存进行修复

整体过程

  1. 首先,用户从浏览器进程里输入请求信息;
  2. 然后,网络进程发起 URL 请求;
  3. 服务器响应 URL 请求之后,浏览器进程就又要开始准备渲染进程了;
  4. 渲染进程准备好之后,需要先向渲染进程提交页面数据,我们称之为提交文档阶段;
  5. 渲染进程接收完文档信息之后,便开始解析页面和加载子资源,完成页面的渲染。
从输入 URL 到页面展示完整流程示意图

详细过程

  • 地址栏获取到输入信息

  • 判断输入信息,如果为文字则由浏览器默认搜索引擎加工文字为完整URL,如果为URL请求就加上协议头组成完整的URL

  • 浏览器进程通过IPC(进程间通信)把URL请求发送到网络进程

  • 查询本地缓存,有缓存就直接返回资源,没有缓存则继续

  • 进行DNS解析,和服务器建立TCP连接

  • 构建请求行、请求头(包含COOKIES)、请求体

  • 发送请求

  • 接收服务器返回的响应

  • 如果响应行的状态码为301/302,表明重定向,从响应头的Location字段获得地址,根据此地址重新进行DNS解析,建立TCP连接,再发送请求

    重定向响应头

  • 响应行的状态码为200时,表明成功,浏览器继续执行下面的操作

  • 根据响应头中的Content-Type属性执行不同的操作,比如为text/html时则为HTML,为application/octet-stream时就是字节流数据,一般浏览器会进行下载

  • 如果 Content-Type 字段的值被浏览器判断为下载类型,那么该请求会被提交给浏览器的下载管理器,同时该 URL 请求的导航流程就此结束。但如果是 HTML,那么浏览器则会继续进行导航流程。

  • 准备渲染进程

  • 渲染进程准备好后,浏览器进程渲染进程发起“提交文档(响应体)”消息

  • 渲染进程和网络进程建立传输管道,并获取文档信息,此时仅加载数据,不进行渲染

  • 等文档数据传输完成之后,渲染进程会返回“确认提交”的消息给浏览器进程,此时渲染进程并未被阻断 。

  • 浏览器进程收到消息,更新浏览器界面状态,包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新 Web 页面。


    导航完成状态
  • 一旦文档被提交,渲染进程便开始页面解析和子资源加载。

  • 页面生成完成,渲染进程会发送一个消息给浏览器进程,浏览器接收到消息后,会停止标签图标上的加载动画。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容