通过chrome的Performance工具了解webkit内核浏览器渲染页面的过程（长期更新）

触发onload函数

css资源

编译并执行（会阻塞dom的构建）

资源加载完成

重新计算样式

html文档中它之前的js脚本是否未解析(执行)或者末加载完成

可能会触发浏览器的重绘或重排

是

绘制

否

异步请求资源，html继续解析

网络请求

更新渲染树(含layout)

等待，直到满足继续执行的条件

通过url获取html文件

文档中所有样式（不包含动态引入的）解析完、所有脚本（不包含async和defer的）也执行完后，触发DOMContentLoaded事件

解析样式

html是否解析完

遇到外联的css资源

遇到外联的js资源

开始由上而下的解析html文件，并且根据外部资源在html文档中位置的先后顺序，发起资源请求（发起有先后，但过程是并行的），比如js、css、图片等资源

html文档中它之前的外联css样式或者js脚本是否未解析(执行)或者末加载完成

触发window的load事件

js的下载会阻塞dom的构建

此环节可能会重复多次

等所有资源加载完毕

等待html文档下载并加载完成

层叠布局(layout)图层

js资源

html解析完成