从输入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内存中

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