加载

1. 首先浏览器会确定输入的是关键词还是站点，如果是关键词就携带关键词到引擎中去找，站点的话就对站点进行一个解析.

2. 接下来就会通知Network thread进行DNS查找IP，然后才可以和服务器进行链接，如果是https就要进行TLS的连接，访问时可能会遇到是301，那么网络线程就需要重新发起一个请求，然后去访问真正要访问的地址进行请求，在发起请求之前会给请求设置一些信息，当前浏览器也就是UA（user agent）还有头部的一些信息，然后再去发起get请求去拿资源，服务器拿到请求会去寻找对应的应用，对应的应用会有相关的函数，然后根据里面的逻辑把页面和数据组织起来到response中，这里不是把所有response都读进来，在读取response的前几个字节的时候，要去进行分析数据的类型，虽然在header部分告诉数据的类型是什么，但是浏览器还是会对内容做出解析，因为我们告诉的类型可能不是浏览器真实所需的类型。

3. 安全检查，判断访问域名是否安全，浏览器中会有白名单和黑名单，如果访问的是这里那么会提示或禁止访问。还有就是对资源做一些检查，看看是否埋了一些跨站访问这些情况，安全检查通过之后就会通知UI线程，所有数据准备就绪了。

4. 导航部分就完成了，进入文档渲染的过程了，此时浏览器会将访问的记录保存下来，会发现前进和后退就可以用了。

接下来就是浏览器解析DOM的过程了。

浏览器在呈现页面前做了哪些操作？

• Javascript：对DOM做了一些操作。
• style：根据一些做出的操作进行修改。
• Layout：重新读取CSS进行渲染，Layout实际上涉及的是几何问题，因为它要获取该DOM的位置、大小等，然后重新布局。
• paint：在第三步获取到DOM的信息后，开始上色绘制。
• Composite（合成）：如果DOM树的一部分发生改变后，那么会新建一个层（类似与photoshop的图层）把改变的内容绘制上去，最后将这些内容进行合成。
• 如果一些样式不会影响布局和绘制，这些样式不经历Layout和Paint。

最后就是下面这三步：

• 构建对象模型
  • HTML-DOM
• 构建CSSOM对象
  • CSS-CSSOM
• 浏览器构建渲染树
  • DOM与CSSDOM合并为Rend Tree

1.构建对象模型

把html文档解析为DOM树，通过标签的尖括号然后把字符串放在链式树形结构中，就可以表达出嵌套关系来。也叫DOM文档对象模型（Document Object Model）

2.构建CSSOM对象

如果解析到外部的css资源，就把这些资源加载过来，看看描述的是哪个的样式，也用树形结构描述出来。

1. 主线程在解析DOM时，也有一些优化的点，比如为了加快速度，首先会预扫描，对文档中的一些标签进行解析，如果出现子资源的标签那么就会边解析DOM边进行加载（也就是并行加载）。
2. JS阻塞解析：因为JS中可能包含对DOM的修改，这就是为什么会对JS阻塞解析的原因。
3. 解析CSS：也就是一个DOM最终要计算成computed styles，这个属性不是我们定义成什么就是什么，因为一些浏览器对DOM也有一些默认样式添加在里面。
4. 构造布局树：CSS与DOM的结合。比如计算几何、位置、大小，布局树只包含真正要显示的东西，例如display：none的元素是不会被展示上去的，但在DOM树上是有的。
5. 创建绘制记录，确定绘制的顺序。

6. 然后将页面拆分图层，构建图层树。这一步我们在可以在chrome中调试工具的performance中看到Layout Tree。有了图层树就可以通过复合线程将构建的图层合成一帧，就得到画面中一帧要得到的所有东西，此时页面显示的东西也就真正完成了。