html頁面渲染過程
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