HTML输入响应头,浏览器从输入url 到页面展示完成响应过程

用户从输入 url 到浏览器响应，呈现给用户的具体过程

1、用户在输入栏输入地址

(1) 如果有 beforeunload 事件会先执行判断继续还是跳出操作

(2) 浏览器进程识别是 地址还是关键字检索

(3) 将正确的 url 地址发送给网络进程

2、网络进程查看有没有缓存

(1) 有缓存直接返回数据

(2) 没有缓存直接进入网络进程请求流程

3、浏览器进程查询 DNS 获取服务器 ip 地址

(1) 如果请求协议是 https 那么还需要建立TLS连接

(2) 利用ip地址和服务器建立 tcp 连接

(3) 如果浏览器的 tcp 连接请求有 6个，则需要排队等待

4、tcp 连接协议通过与服务器进行3次握手确立连接

(1) 浏览器即用户端发起第一次握手

(2) 服务器接收到用户端的消息发起接收到信息

(3) 用户端接收到信息后向服务器发起第三次握手表示已经接收到信息可以连接

(4) 如果第二次握手发送数据包丢失或者用户端发起第三次握手数据包丢失，服务器在长时间未接收到信息会再次发起，总共会尝试6次

5、tcp 接受信息

6、网络进程接收到数据后将返回头和返回体发送给浏览器

7、浏览器进程读取返回头查看返回信息，是否重定向或者响应数据类型处理

(1) 重定向即回到第3步

(2) 会根据 Content-Type 的值来决定如何显示响应体的内容。

(3) Content-Type 为下载类型就会把请求交给浏览器的下载管理器，导航结束

(4) 如果是 HTML，那么浏览器则会继续进行导航流程

8、准备渲染进程

(1) 默认打开一个新的渲染进程

(2) 如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程

9、浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息

10、渲染进程就和网络进程直接建立连接进行管道数据传输

11、数据传输完成后tcp发起4次挥手断开连接并且渲染进程同时向浏览器进程发起确认提交

12、浏览器进程收到确认提交后会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态。

13、渲染进程开始页面解析和子资源加载

那么导航被提交之后又会怎么样呢

14、首先渲染进程先将HTML(超文本标记语言)转换成为浏览器可以识别的 DOM 树节点

15、进行样式计算，渲染进程将下载好的 CSS(层叠样式表) 转化成为浏览器使用的样式

(1) 将所有的 CSS 样式转换成为 浏览器可以理解的 styleSheets 结构

(2) 转化所有的 CSS样式表的属性值，使其标准化，例如 color #···· -> rgba模式

(3) 计算合成为 computedStyle 样式

16、接下来就是布局阶段，通过DOM和computedStyle 创建布局树并计算布局信息

(1) 遍历所有可见的 DOM 节点

(2) 忽略掉不可见节点 例如：display:none,head标签下的所有内容

17、对布局树进行分层，并生成分层树。

(1) 拥有层叠上下文属性的元素会被提升为单独的一层

(2) 需要剪裁(clip)的地方也会被创建为图层

18、为每个图层生成绘制列表，并将其提交到合成线程。

19、合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

20、合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

21、浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

这样一个完整的浏览器导航流程就结束了

原文：https://www.cnblogs.com/chase-star/p/12170546.html