一、复习

进程：指一个程序(或浏览器打开一个页面就是开辟一个进程)
线程：程序中具体执行任务的一个进程中可能包含一到多个线程！！
- 单线程：同时只能处理一件事，上一件事处理完，下一件事才能处理「同步编程」
- 多线程：可同时处理多件事情，上一件事情即便没有处理完，下一件事也可以交给其他线程去处理「异步编程」

浏览器打开一个页面就是开辟一个进程，每个进程中会包含多个线程「浏览器是多线程的」！！

接下来正式开始！

二、浏览器底层渲染机制

当基于HTTP网络，从服务器端获取到页面源代码后，到浏览器把其绘制成页面，中间所做的事情，就是我们要研究的渲染机制！

GUI首先渲染所有的HTML结构，计算出结构之间的层级关系
触发DOMContentLoaded事件：window.addEventListener(‘DOMContentLoaded’,function(){…})

样式树：渲染解析CSS完毕后，GUI按照原先导入的顺序，依次解析CSS代码，记录了相应节点应该具备的样式「包括继承的样式、或者根据优先级重构的样式等等」

把DOM TREE 和 CSSOM TREE 合并在一起生成RENDER TREE

渲染树中详细记录了DOM的层级结构和每个节点应该具备的样式！！

根据可视窗口大小，按照RENDER TREE，计算出每个节点在视口中的位置和排版等「含：位置、方向、大小、排列方式…」

规划出页面各个文档流(层面)中，所有节点的具体绘制步骤！！

GUI根据上一步计算出来的步骤，开始绘制页面即可！！

触发load事件：window.onload=function(){…}

打开页面，浏览器首先分配一个“HTTP线程”去服务器获取HTML资源；
获取资源后，分配“GUI渲染线程”自上而下，逐行渲染解析HTML代码！
- 渲染HTML/CSS代码：遵循W3C规则，GUI渲染线程去处理
- 渲染JS代码：遵循ECMAScript(ECMA-262)规则，JS引擎线程去处理
- 在渲染代码过程中，如果遇到 link/img/script[src=xxx]/audio/video 等，浏览器需要开辟“HTTP线程”，从服务器端获取到对应的资源文件(文件中的代码)

浏览器分配一个“HTTP线程”去服务器获取CSS样式
同时GUI会继续向下渲染「异步」
等待HTML渲染解析完毕「DOM TREE已经构建」，并且CSS样式“都已经”获取到了，再按照之前导入样式的顺序，逐一渲染解析CSS样式「创建CSSOM TREE」！
- 目的：确保CSS优先级(层级)的准确，所以渲染顺序需要和之前编写的导入顺序一致
- 如果某个资源一直没有响应，或者响应结果是获取失败，则忽略它的渲染！