浏览器整个工作流程

了解从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么
了解浏览器的工作原理
over

浏览器内核(渲染引擎+JS引擎)(***)

渲染引擎: 获取网页的html, css, 图片等计算网页的显示方式, 并将其输出到显示器
JS引擎: 解析并执行js语言, 实现网页的动态效果
所有的JS代码都是由渲染进程控制，所以浏览网页的大部分时候都不会涉及到其他进程

不同的内核对网页编写语法的解释也有不同, 进而导致同一个页面在不同内核的浏览器下显示出来的效果会有出入. 不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程.

浏览器架构(以chromium浏览器架构为例)(***)

一个浏览器可以是单个进程多个线程, 也可以是使用IPC通信的多进程应用.

Chromium多进程架构

       早期的web浏览器页面会因为行为不当、浏览器错误、浏览器插件错误引起整个浏览器或当前运行的选项卡关闭。因此将chromium应用程序放在相互隔离的独立的进程中:（注意线程/进程）

• 浏览器进程（包含UI线程、网络线程、存储线程）：负责地址栏、书签、前进和后退等部分的工作; 处理web浏览器中不可见的底层操作，如网络请求和文件访问。
• GPU（图形处理器）进程：处理与其他进程隔离的GPU任务。因为GPU处理来自多个应用程序的请求并将它们绘制在同一个表面上，所以它被分成不同的过程。
• 第三方插件进程：负责控制一个网页用到的所有插件, 如flash.
• 浏览器渲染进程：负责一个tab内关于网页呈现的所有事情.
  
  以保证:
          单个程序崩溃不会损害其他应用程序
          不影响操作系统完整性
          每个用户不能访问其他用户数据(内存保护、访问控制)

页面导航过程发生了什么呢

1. 处理输入
在地址栏输入url 时,由浏览器进程的UI线程判断是query还是url, 如果是query搜索查询则发送到搜索引擎, 是url 则请求url的网站
2. 开始导航
如果有注册Service Worker就从缓存中加载页面, 无需请求网络
如果没有设置:
        ①UI线程通知网络线程获取网页内容,选项卡开始加载转圈
        ②网络线程通过DNS查找域名对应IP然后建立http连接
        ③网络线程接收处理301重定向请求头, 通知UI线程要求重定向, 然后启动另一个url请求

Web Worker：默默运行在后台的 JavaScript，独立于其他脚本，不影响页面的性能。
Service Worker：在web worker的基础上增加了离线缓存的能力
301重定向是当用户或搜索引擎向网站服务器发出浏览请求时，服务器返回的HTTP数据流中头信息(header)中的状态码的一种，表示本网页永久性转移到另一个地址

3. 读取响应
①网络线程根据响应头（中的Content-Type头和MIME Type sniffing）判断响应内容的格式
2) 处理不同MIME文件:
响应文件是HTML，则将数据传递给渲染进程。如果为zip或其他文件则将数据传输给下载管理器（存储线程）。
3) 安全检查也会在这个时候触发（恶意名单检查 和 跨域读取检查）

MIME 类型（ Multipurpose Internet Mail Extensions），用来表示文档、文件或字节流的性质和格式。

4. 查找渲染进程
        所有检查完成后，网络线程告知UI线程数据准备就绪，UI线程找到渲染进程进行网页渲染。

由于网络请求可能需要几百毫秒才能得到响应，为加速这个过程，在开始导航网络线程发送url请求时，已经主动进行查找、启动渲染进程，数据接收完成后，渲染进程已备用

5. 确认导航
数据和渲染进程准备就绪后，浏览器进程向渲染进程发送IPC消息确认导航。渲染进程确认提交完成，导航过程结束。文档加载开始。此时，
①UI更新：地址栏更新、安全指示器、站点设置UI会反映新页面站点信息
②选项卡的会话历史记录更新(前进/后退)，为便于关闭浏览器后恢复，历史记录到磁盘中
6. 初始化
        确认导航后，渲染进程将继续加载资源并呈现页面，一旦渲染进程“完成”（onload事件在所有帧上触发执行完成后）渲染，它就告诉浏览器进程加载完毕，浏览器进程的UI线程就会停止选项卡的加载转圈。

更多内容可参考图解浏览器的基本原理

页面渲染过程

渲染进程负责选项卡内发生的所有事情, 包含以下几个线程:
        a) 主线程: 处理发送给用户的大部分代码
        b) 工作线程: 处理WebWorker或ServiceWorker
        c) 排版线程
        d) 栅格线程

1 解析
        1)构建DOM：上面读取的响应结果如果是html数据，主线程开始解析文本串（HTML），使之成为一个DOM
        2)子资源加载：主线程可以逐个请求CSS，JS，图片等外部资源（预加载扫描器提速）
        3)JavaScript阻塞解析：遇到< script>时，暂停HTML解析，加载解析执行JS代码。因为JS可能会改变html的结构导致重新排版
2 确定加载资源方式
在< script>加async或defer属性，浏览器异步加载和运行JS，不阻止解析。
        1)async：指示浏览器尽可能异步加载脚本，默认同步加载脚本(async=false)
        2)defer：指示脚本要在解析文档之后但在触发DOMContentLoaded之前执行。
3 样式计算
        主线程解析CSS并确定每个DOM节点的计算样式，再根据CSS选择器将哪种样式应用于哪个元素。
4 布局
        主线程遍历DOM并计算样式，并创建布局树（layout tree, 包含坐标和边界框大小等信息）
5 绘制
        知道元素的大小，形状和位置，还需要知道绘制的顺序
        主线程遍历布局树以创建绘制记录，绘制记录是绘画过程的一个注释。
6 合成
        浏览器知道文档的结构，每个元素的样式，页面的几何形状和绘制顺序，需将信息转换为屏幕上的像素，称为光栅化。
        用户滚动页面，则移动光栅框架，并通过更多光栅填充缺失的部分
        合成是一种将页面的各个部分分层，分别栅格化，并在合成器线程的单独线程中合成为页面的技术。如果发生滚动，图层已经被栅格化需要合成一个新帧。通过移动图层和合成新帧，可以以相同的方式实现动画。

浏览器主要功能(*)

用户界面 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎 用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。
渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
网络 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
UI后端 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
JS解释器 用来解释执行JS代码。
数据存储 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术