通过chrome的Performance工具了解webkit内核浏览器渲染页面的过程（长期更新）
2018-01-24 18:45:09 12 举报有兴趣研究浏览器内核加载机制的朋友可以留言讨论
作者其他创作
大纲/内容
触发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解析完成
职业：暂无
0 条评论
下一页
