html资源加载流程,html网页的的加载和渲染过程(webkit内核)

一个网址从url到页面图像一般分为两个过程：

1. 网页加载过程：从URL到构建DOM树

2. 网页渲染过程：从DOM树到页面图像

整个过程大致流程和参与的模块如下所示：

参考朱永盛的《webkit技术内幕》图1-5

从url到dom树的过程如下所示

参考朱永盛的《webkit技术内幕》图2-6

步骤详解如下：

1.当用户输入网页url的时候，webkit调用资源加载器加载该url对应的网页

2.加载器依赖网络模块建立连接，发送请求并接收答复。

3.webkit接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的

4.网页被交给html解释器转换成一系列的词语

5.解释器根据词语创建节点，形成dom树

6.如果节点是javascript代码的话，调用JavaScript解释器并执行(JavaScript代码可能会修改DOM树的结构)

7.如果节点依赖其他资源如图片，视频等，调用资源加载器来加载他们，但这些请求是异步的，不会阻塞当前DOM树的继续创建。但是，如果是JavaScript资源，则当前DOM树停止创建，知道对应的JavaScript资源被加载并被执行后才继续创建。

8.在上述过程中，网页会发出DOMContent和onload事件。DOMContent事件是在DOM树创建完之后，onload事件是在DOM树创建完且网页所依赖的资源都加载完后发生。

页面渲染过程

页面渲染过程指webkit利用css和dom树构建renderObject树直到绘图上下文，大体过程如下

来自朱永盛《webkit技术内幕》图2-7

1.CSS文件被解释器解释成内部表示结构

2.CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树

3.RenderObject节点在创建的同时，Webkit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

4.在网页存续期间：DOM树，RenderObject树，RenderLayer树，绘图上下文一直都会存在，直到网页被销毁。

5. 最后根据绘图上下文生产最终的图像，这一过程主要依赖2D和3D图形库

来自朱永盛《webkit技术内幕》图2-8

在看chrome渲染的时候，发现页面一共有3个事件点，first paint，DOMContentLoaded，onLoad。fisrt paint就是所谓的首屏时间，以下文章很好的解释了为什么css要在head里面，js要放在body最后的原因。

参考文章 https://www.cnblogs.com/hongrunhui/p/8929001.html  (first pain讲的很详细)

FP发生在body中第一个script脚本之前的CSS解析和JS执行完成之后。换句话说就是第一脚本之前的DOM和CSSOM准备就绪之后，便会着手渲染第一脚本前的内容。

first pain有时候在load事件之后(比如没有图片视频等资源的，只有css，js资源的)，有的在contentLoaded之前，比如百度首页(资源众多)

first paint一定在html文件加载完之后，要不然CSSOM不能准备好，就不会开始渲染