加载和渲染
概念：
加载：从“URL”到构建DOM树。
渲染：从DOM树到生成可视化图像。
实际上，这两个过程会交叉，很难明确区分。
视图（viewport）：网页通常比我们屏幕可视面积大，当前可见区域称为视图。
DOM树构建过程：
1. DOM解释器由上到下解析HTML，构造DOM树
2. 解析构造DOM树过程中，如果有节点依赖其他资源，如图片、CSS、视频等，调用资源加载器来加载它们。
注：这些资源的加载不会阻碍当前DOM树的继续创建，它们是异步的。
3. 如果有节点是JavaScript代码，调用JavaScript引擎解释并执行。
注：若该JavaScript资源未标记异步方式，当前DOM树的创建将会停止。
DOM树构建完发生事件DOMConent
DOM树构建完且资源都加载完发生DOM的onload事件
RenderObject树构建到绘图上下文过程：
1. CSS解释器解析CSS，构造CSS树
2. CSS树往DOM树上附加解释后的样式信息，构建RenderObject。
3. RenderObject节点创建同时，WebKit根据网页层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。
4. 绘图上下文通过调用2D和3D图形库，生成最终图像
重点：
DOM树到RenderObject，到最终图像的渲染过程并非是一步接下一步的，而是在不断重复这些过程，画面一点点渲染出来的。