整个过程包含两个子过程:导航渲染

一、导航

  1. 用户输出url并回车
  2. 浏览器过程查看url,组装协定,形成残缺的url
  3. 浏览器过程通过过程间通信(IPC)把url申请发送给网络过程
  4. 网络过程接管到url申请后查看本地缓存是否缓存了该申请资源,如果有则将资源返回给浏览器过程
  5. 如果没有,网络过程向服务器发动http申请(网络申请),申请过程如下:

    1. 进行DNS解析,获取服务器的ip地址,端口

      1. 本地域名服务器查看本地缓存
      2. 根域名服务器
      3. 顶级域名服务器
      4. 权威域名服务器
    2. 利用ip地址和端口构建过程间通信的接口socket套接字,后续TCP端到端的传输的端也是指的是socket套接字
    3. 建设tcp连贯(三次握手)
    4. 结构申请行、申请头和申请体,利用建设好的tcp连贯发送构建好的申请信息
    5. 服务器收到申请信息,结构响应行、响应头和响应体,利用建设好的tcp连贯发送给客户端
    6. 客户端浏览器的网络过程接管响应头和响应信息,并解析响应内容
  6. 网络过程解析响应流程

    1. 查看状态码,如果是301/302,则须要重定向,从Location主动读取地址,从新进行第4步操作,如果是200,则持续解决申请
    2. 200响应解决

      1. 查看响应的Content-Type,如果是字节流类型,则将该申请提交给下载管理器,该导航流程完结,不再进行后续的渲染。如果是text/html类型,则告诉浏览器过程筹备渲染过程筹备进行渲染
  7. 筹备渲染过程

    1. 浏览器过程查看以后的url是否和之前关上的页面的url主域名是否雷同,如果雷同,则复用之前页面的渲染过程。如果不同,则创立新的渲染过程
  8. 传输数据,更新状态

    1. 渲染过程筹备好后,浏览器过程向渲染过程发送“提交文档”信号
    2. 渲染过程接管到信号后建设“管道”与网络过程进行数据的传输
    3. 数据传输结束后,渲染过程发送“确认提交”信号给浏览器过程
    4. 浏览器过程接管到确认信号后更新浏览器界面的状态:平安信息、地址栏url、后退后退的历史状态、更新web页面等

二、渲染

  1. 渲染过程将 HTML 内容转换为可能读懂的 DOM 树构造。(应用栈来实现,遇到“<p"就入栈,遇到"</p"就出栈
  2. 渲染引擎将 CSS 样式表转化为浏览器能够了解的 styleSheets,计算出 DOM 节点的款式。结构渲染树
  3. 创立布局树,并计算元素的布局信息。
  4. 对布局树进行分层,并生成分层树
  5. 为每个图层生成绘制列表,并将其提交到合成线程。
  6. 合成线程将图层分成图块,并在光栅化线程池中将图块转换成位图。
  7. 合成线程发送绘制图块命令 DrawQuad 给浏览器过程。
  8. 浏览器过程依据 DrawQuad 音讯生成页面,并显示到显示器上。