从输入URL到页面展示，这中间发生了什么

1. 用户输入

如果是搜索内容，地址栏会使用浏览器默认的搜索引擎来合成新的带搜索关键字的URL
如果判断符合URL规则，自动加上http://或者https://（如果被301过）

2. URL请求过程

浏览器进程通过IPC将请求发送给网络进程
先查询是否有缓存且缓存有效，如果是则直接从缓存中取
网络请求拉取
根据不同的响应Content-Type做不同的事情，application/octet-stream则回交给下载管理器，导航流程结束，如果是html，则继续导航流程

3. 准备渲染进程

打开同一站点的页面，会复用一个渲染进程，否则重新打开一个渲染进程

4. 提交文档

• “提交文档”的消息是由浏览器进程发出，渲染进程接收到消息会和网络进程建立传输数据的“管道”

传输结束，渲染进程发出“确认提交”的消息给浏览器进程
浏览器进程更新浏览器界面，包括安全状态/历史状态等

5. 渲染阶段

由于渲染过程十分复杂，所以分为几个子流程分步，每个子阶段可以看作一个输入输出的过程

1. 构建DOM树

html文档通过html解析器输出DOM树

2. 样式计算

• css文本通过css解析器输出styleSheets，通过document.styleSheets可以看到
• 转化样式中的属性值，使其统一
  将rem单位转化px单位
  将#fff转化为rgba(255,255,255,0)
  将font-weight:bold转化为font-weight: 700

计算出每一个DOM节点的样式
根据css的继承规则和层叠规则，生成权重最大的css样式

3. 布局阶段

创建布局树
遍历DOM树，保持DOM树的结构，将可见的节点添加到布局树
布局计算
在执行布局操作的时候，会把布局计算的结果原地写回布局树中，所以布局树是输入也是输出，Chrome正在重构布局代码，试图清晰地区分输入和输出

4. 分层

拥有一些特殊样式的DOM节点会被独立层一个渲染层

5. 图层绘制

渲染引擎会把绘制过程分成很多个小指令，通过layers右击打开profiler可以看见各指令

6. 栅格化raster

实际上绘制操作是由渲染引擎的合成线程完成的
当前图层的绘制指令列表准备好后，主线程会提交给合成线程
通常页面内容会很长，而视图只有固定的高度，所以只能看到的内容部分称为视图，渲染非视图中的内容也是没有必要，所以合成线程会将图层分为图块(tile)这些图块通常是256256或者512512.然后合成线程会按照视图附近的图块来优先生成位图，生成位图的操作是通过栅格化执行的。图块作为栅格化的最小单位。渲染进程维护了一个栅格化的线程池
通常，栅格化会使用gpu加速生成，生成的位图保存在gpu内存中

参考：极客时间《浏览器工作原理与事件》