浏览器做了啥

背景

A：用户从在地址栏中输入一个 url 后，浏览器到底做了哪些事情呢？

B：emmm~，浏览器向服务器读取资源，然后渲染到页面上。。。

这场景是否有点似曾相识？敲黑板，前端高频考点。涉及的面有点广，单纯靠背，估计是要凉。

上个图：

浏览器导航流程

用户在地址栏输入信息

• 判断输入信息是否为 URL
• 非 URL ,使用浏览器默认搜索引擎合并成带该输入信息的 URL 进行搜索
• 为 URL ,给该信息加上请求协议头生成 URL，进入URL 请求流程

URL 请求流程

• 浏览器主进程通过 IPC（进程间通信）,将生成的 URL 发送给网络进程
• 网络进程在本地查找是否存在该 URL 的有效缓存资源
• 存在有效缓存资源直接返回该缓存资源
• 不存在，则进入网络请求流程

网络请求流程

• DNS 域名解析，查询域名对应的服务器 IP
• 判断请求协议是否为 HTTPS ，是则建立 TLS 安全连接
• 根据解析出来的 IP 与服务器建立 TCP 连接
• 构建 HTTP 请求信息，将该域下的 Cookie 加入到请求头中，发送 HTTP 请求
• 服务器接收到请求，生成相应的响应头信息返回给网络进程
• 网络进程接收到响应信息，开始解析请求头，判断响应状态码是否为301或者302
• 响应状态码为301/302，则根据响应头中的 Location 再次重复请求流程
• 响应状态不为301/302，则判断响应头中的数据类型字段 Content-type 是否为下载类型
• 为下载类型，则网络进程将请求发送给下载管理器，流程结束
• 非下载类型，则进入渲染流程

浏览器渲染流程

准备渲染进程

浏览器提交文档

• 渲染进程准备就绪，浏览器主进程发送提交文档请求给该渲染进程
• 渲染进程接收提交文档请求，与网络进程建立数据传输通道
• 数据传输完毕，渲染进程向主进程发送确认传输完毕请求
• 主进程确认信息，更新浏览器状态（前进后退历史、安全状态，地址栏）通知渲染进程进行页面渲染，进入浏览器页面渲染流程

浏览器页面渲染流程

GUI 渲染线程要做的

• 解析 HTML 主文档，构建 DOM 树
  

• 加载并解析 CSS ,构建 CSSOM 规则树
  

• 将 CSS 规则应用到 DOM 树上，构建布局树（或者叫渲染树）
• 将布局树转换成图层树，将网页素材分解为多个图层
• 将图层划分为图块，进行栅格化操作转换成位图。

       chrome在首次合成图块的时候使用一个低分辨率的图片（在首次显示页面内容的时候，将这个低分辨率的图片显示出来，然后合成器继续绘制正常比例的网页内容，当正常比例的网页内容绘制完成后，再替换掉当前显示的低分辨率内容）