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