乐趣区

关于前端:从输入URL到渲染都经历了什么

从输出 URL 到页面展现残缺流程

介绍完后面所须要的三个基本知识背景后(HTTP 申请流程包含了 TCP 连贯),当初只须要将其串起来就能答复从输出 URL 到页面展现残缺流程。

同样,先给出从输出 URL 到页面展现残缺流程示意图:

由图中不难发现,最外层是三种 Chrome 过程,而网络过程所执行的操作就是 HTTP 申请流程并且渲染过程所执行的操作就是渲染流程。

上面,先给出此流程图精简版的形容:

1. 首先,浏览器过程接管到用户输出的 URL 申请,浏览器过程便将该 URL 转发给网络过程。

2. 而后,在网络过程中发动真正的 URL 申请。

3. 接着网络过程接管到了响应头数据,便解析响应头数据,并将数据转发给浏览器过程。

4. 浏览器过程接管到网络过程的响应头数据之后,发送“提交导 (CommitNavigation)”音讯到渲染过程。

5. 渲染过程接管到“提交导航”的音讯之后,便开始筹备接管 HTML 数据,接收数据的形式是间接和网络过程建设数据管道。

6. 最初渲染过程会向浏览器过程“确认提交”,这是通知浏览器过程:“曾经筹备好承受和解析页面数据了”。

7. 浏览器过程接管到渲染过程“提交文档”的音讯之后,便开始移除之前旧的文档,而后更新浏览器过程中的页面状态。

上面还有一个联合后面基础知识的更具体的流程形容:

用户输出

1. 用户在地址栏按下回车,查看输出(关键字 or 合乎 URL 规定),组装残缺 URL;
2. 回车前,以后页面执行 onbeforeunload 事件;
3. 浏览器进入加载状态。

URL 申请

  1. 浏览器过程通过 IPC 把 URL 申请发送至网络过程;
  2. 查找资源缓存(有效期内);
  3. DNS 解析(查问 DNS 缓存);
  4. 进入 TCP 队列(单个域名 TCP 连贯数量限度);
  5. 创立 TCP 连贯(三次握手);
  6. HTTPS 建设 TLS 连贯(client hello, server hello, pre-master key 生成『对话密钥』);
  7. 发送 HTTP 申请(申请行 [办法、URL、协定]、申请头 Cookie 等、申请体 POST);
  8. 承受申请(响应行 [协定、状态码、状态音讯]、响应头、响应体等);

     状态码 301 / 302,依据响应头中的 Location 重定向;状态码 200,依据响应头中的 Content-Type 决定如何响应(下载文件、加载资源、渲染 HTML)。

筹备渲染过程

依据是否同一站点(雷同的协定和根域名),决定是否复用渲染过程。

提交文档

1. 浏览器过程承受到网路过程的响应头数据,向渲染过程发送『提交文档』音讯;
2. 渲染过程收到『提交文档』音讯后,与网络过程建设传输数据『管道』;
3. 传输实现后,渲染过程返回『确认提交』音讯给浏览器过程;
4. 浏览器承受『确认提交』音讯后,移除旧文档、更新界面、地址栏,导航历史状态等;
5. 此时标识浏览器加载状态的小圆圈,从此前 URL 网络申请时的逆时针抉择,行将变成顺时针旋转(进入渲染阶段)。

渲染

渲染流水线

构建 DOM 树

1. 输出:HTML 文档;
2. 解决:HTML 解析器解析;
3. 输入:DOM 树。

款式计算

1. 输出:CSS 文本;
2. 解决:属性值标准化,每个节点具体款式(继承、层叠);
3. 输入:styleSheets(CSSOM)。

布局 (DOM 树中元素的打算地位)

1.DOM & CSSOM 合并成渲染树;
2. 布局树(DOM 树中的可见元素);
3. 布局计算。

分层

1. 特定节点生成专用图层,生成一棵图层树(层叠上下文、Clip,相似 PhotoShop 里的图层);
2. 领有层叠上下文属性(明确定位属性、通明属性、CSS 滤镜、z-index 等)的元素会创立独自图层;
3. 没有图层的 DOM 节点属于父节点图层;
4. 须要剪裁的中央也会创立图层。

绘制指令

1. 输出:图层树;
2. 渲染引擎对图层树中每个图层进行绘制;
3. 拆分成绘制指令,生成绘制列表,提交到合成线程;
4. 输入:绘制列表。

分块

合成线程会将较大、较长的图层(整个屏显示不完,大部分不在视口内)划分为图块(tile, 256256, 512512)。

光栅化(栅格化)

1. 在光栅化线程池中,将视口左近的图块优先生成位图(栅格化执行该操作);
2. 疾速栅格化:GPU 减速,生成位图(GPU 过程)。

合成绘制

1. 绘制图块命令——DrawQuad,提交给浏览器过程;
2. 浏览器过程的 viz 组件,依据 DrawQuad 命令,绘制在屏幕上。

退出移动版