宏观视角下的浏览器

【】一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行的主线程，这样一个运行环境就是进程。线程是不能单独存在，它是由进程来启动和管理的

【】进程中的任意一线程执行出错，都会导致整个进程的崩溃；线程之间共享进程中的数据；当一个进程关闭后，操作系统会回收进程所占用的内存；进程之间相互隔离

【】多进程架构的浏览器。浏览器页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程中的，而进程之间的通信是通过IPC机制进行通信

• 浏览器进程：主要负责界面展示、用户交互、子进程管理，同时提供存储功能
• 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下
• GPU 进程：使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求
• 网络进程：主要负责页面的网络资源加载
• 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响

【】FP（first paint）：从页面加载到首次开始绘制的时长

【】互联网中的数据都是通过数据包来传输的，数据包在传输的过程中容易丢失或出错。IP负责把数据包送达目的主机；UDP负责把数据包送达具体应用；TCP保证了数据完整地传输，它的链接可分为三个阶段：建立连接、传输数据和断开链接

【】浏览器发起HTTP请求流程

构建请求	构建请求行信息（GET /index.html HTTP1.1），构建好后，浏览器准备发起网络请求
查找缓存	当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求；如果缓存查找失败，就会进入网络请求过程
准备 IP 地址和端口	HTTP 的内容是通过 TCP 的传输数据阶段来实现的，而建立 TCP 连接的第一步就是需要准备 IP 地址和端口号
等待TCP队列	Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成
建立TCP连接	三次握手
发送HTTP请求	请求行、请求头、请求体

【】DNS缓存和页面资源缓存会使得页面在第二次打开速度变快

【】从输入URL到页面展示完整示意图：

• 首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程
• 然后，在网络进程中发起真正的 URL 请求（基本是上面发起HTTP请求流程）
• 接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程
• 浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程
• 渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道
• 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”
• 浏览器进程接收到渲染进程“提交文档”的消息之后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面

【】用户发出 URL 请求到页面开始解析的这个过程，就叫做导航。导航被提交后就进入了渲染阶段。由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素，把这样的一个处理流程叫做渲染流水线。流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

【】样式计算是为了计算出DOM树中每个节点的具体样式；布局是为了计算出DOM树中可见元素的几何位置，然后将这些信息保存在布局树中；分层是渲染引擎需要为特定的节点生成专用的图层，并生成一棵对应的图层树，浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面；绘制就是把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表；当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程，合成线程会将图层划分为图块（tile），然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图；一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程，浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

【】通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排（回流）

【】如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘

【】相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些

参考资料：浏览器工作原理与实践