输入URL后的完整流程

大纲

• 从浏览器接收url到开启网络请求线程
  • 多进程的浏览器
  • 多线程的浏览器内核
  • 解析URL
  • 网络请求都是单独的线程
  • 更多

• 开启网络线程到发出一个完整的http请求
  • DNS查询得到IP
  • tcp/ip请求
  • 五层因特网协议栈

• 从服务器接收到请求到对应后台接收到请求
  • 负载均衡
  • 后台的处理

• 后台和前台的http交互
  • http报文结构
  • cookie以及优化
  • gzip压缩
  • 长连接与短连接
  • http 2.0
  • https

• 单独拎出来的缓存问题，http的缓存
  • 强缓存与弱缓存
  • 缓存头部简述
  • 头部的区别

• 解析页面流程
  • 流程简述
  • HTML解析，构建DOM
  • 生成CSS规则
  • 构建渲染树
  • 渲染
  • 简单层与复合层
  • Chrome中的调试
  • 资源外链的下载
  • loaded和domcontentloaded

• CSS的可视化格式模型
  • 包含块（Containing Block）
  • 控制框（Controlling Box）
  • BFC（Block Formatting Context）
  • IFC（Inline Formatting Context）
  • 其它

• JS引擎解析过程
  • JS的解释阶段
  • JS的预处理阶段
  • JS的执行阶段
  • 回收机制

简单版

    1，用户输入url并回车
    2，浏览器进程检查url，组装协议，构成完整的url
    3，浏览器进程通过进程间通信（IPC）把url请求发送给网络进程
    4，网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
    5，如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
        5.1 进行DNS解析，获取服务器ip地址，端口（端口是应该不是dns解析获取，是nginx通过判断不同的域名转发到不同的端口？）
        5.2 利用ip地址和服务器建立tcp连接
        5.3 构建请求头信息
        5.4 发送请求头信息
        5.5 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
    6，网络进程解析响应流程；
        6.1 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步
            （301/302跳转也会读取本地缓存吗？这里有个疑问），如果是200，则继续处理请求。
        6.2 200响应处理：
            检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行
            后续的渲染，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
    7，准备渲染进程
        7.1 浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程
    8. 传输数据、更新状态
        8.1 渲染进程准备好后，浏览器向渲染进程发起“提交文档”的消息，渲染进程接收到消息和网络进程建立传输数据的“管道”
        8.2 渲染进程接收完数据后，向浏览器发送“确认提交”
        8.3 浏览器进程接收到确认消息后更新浏览器界面状态：安全、地址栏url、前进后退的历史状态、更新web页面。

细化

• 判断是否需要跳转(301)
• 从浏览器中读取缓存
• DNS解析
• TCP连接
• HTTP请求发出
• 服务端处理请求，HTTP响应返回
• 浏览器拿到响应数据，解析响应内内容，把解析结果展示给用户

1. 在浏览器地址栏输入URL
2. 判断是否有永久重定向(301)
   1. 如果有，直接跳转到对应URL
3. 浏览器查看资源是否有强缓存，有则直接使用，如果是协商缓存则需要到服务器进行校验资源是否可用
   1. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
4. 浏览器解析URL获取协议，主机，端口，path
5. 浏览器组装一个HTTP（GET）请求报文
6. DNS解析，查找过程如下：
   1. 浏览器缓存
   2. 本机缓存
   3. hosts文件
   4. 路由器缓存
   5. ISP DNS缓存
   6. DNS查询（递归查询 / 迭代查询）
7. 端口建立TCP链接，三次握手如下：
   1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   3. 客户端发送ACK=Y+1， Seq=Z
8. TCP链接建立后发送HTTP请求
9. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
10. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
11. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
12. 服务器将响应报文通过TCP连接发送回浏览器
13. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次挥手如下：
    1. 主动方发送Fin=1， Ack=Z， Seq= X报文
    2. 被动方发送ACK=X+1， Seq=Z报文
    3. 被动方发送Fin=1， ACK=X， Seq=Y报文
    4. 主动方发送ACK=Y， Seq=X报文
14. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
15. 如果资源可缓存，进行缓存
16. 对响应进行解码（例如gzip压缩）
17. 根据资源类型决定如何处理（假设资源为HTML文档）
18. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
19. 构建DOM树：
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
20. 解析过程中遇到图片、样式表、js文件，启动下载
21. 构建CSSOM树：
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
22. 根据DOM树和CSSOM树构建渲染树:
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
23. js解析如下：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    6. 浏览器在Document对象上触发DOMContentLoaded事件
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
24. 显示页面（HTML解析过程中会逐步显示页面）

可参考

• https://zhuanlan.zhihu.com/p/34453198?group_id=957277540147056640
• https://segmentfault.com/a/1190000006879700