1.解析html文件，创建DOM树
??? 自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
??? 1）css加载不会阻塞html文件的解析，但会阻塞dom的渲染
??? 2）css加载会阻塞后面js语句的执行
??? 3）js会阻塞html的解析和渲染
??? 4）没有defer和async标签的script会立即加载并执行
??? 5）有async标签的js，js的加载执行和html的解析和渲染并行
??? 6）有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
??? 7）DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片）
2.解析css，生成CSSOM，css对象模型
3.dom和css合并，构建渲染树（Render Tree）
4.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）
??? 1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观
??? 2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
??? 3）重排必定会引发重绘，但重绘不一定会引发重排
补充：
监听资源加载完成有四种方式
1. window.onload = function(){....}
2. window.addEventListener("load",function(){....});
3. document.body.onload = function(){....}
4. <body onload = "load()">
参考：
1.http://www.cnblogs.com/bibiafa/p/9364986.html
2.https://blog.csdn.net/yuhk231/article/details/53581212
html页面渲染过程
原文地址：https://www.cnblogs.com/bear-blogs/p/9903936.html