頁面在加載的時候會先後觸發兩個事件:document的DOMContentLoaded,以及window.onload事件.
DOMContentLoaded
MDN上的解釋是當初始的 HTML 文檔被完全加載和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。IE9及其以上版本兼容.
此時的document.readyState == ‘interactive’.
$(document).ready()
其實並不存在document.ready這樣的原生事件。在jQuery中,$(function(){})和$(document).ready(function(){})相同,都是用來表示文檔加載完成,但是頁面的其他資源,例如<img>,<iframe>有可能未加載完成.
此時document.readyState == ‘interactive’ 或者是 ‘complete’。
原生js實現 $(document).ready() 方法，其實就是監聽documnent.readyStateChange事件，查看是否document.readyState == ‘complete’。參考
window.onlaod
此時HTML文檔全部解析完成，依賴的所有資源都已經解析完成。
此時,document.readyState == ‘complete’
關於document.readyState
這個只讀屬性用來描述html文檔當前的加載狀態.有效的值有:
loading:加載中
interactive:文檔加載解析完畢,但是子資源可能還未加載完成.
complete:文檔加載解析完畢,全部資源加載完成.
HTML 文檔的解析和資源加載
瀏覽器對於html文檔裏面的所有的資源(類似於<img><link><script><iframe>)都是並行加載。主線程不會等到一個資源加載完纔開始加載下一個.它會同時開啓多個下載線程(可能是4-6後者N個,不同的瀏覽器並行下載數不一樣).而對於<script>來說就有些特殊,他的下載和執行都會阻塞主線程,也就是說當HTML文檔的解析遇到<script> 時候，瀏覽器就不會繼續往下解析html 文檔。後面的資源也不會開始下載。只有等到<script>加載執行完成後,主線程纔會繼續往下解析html 文檔。
這樣設計的考量是js文件有可能會修改DOM樹,所以穩妥的做法是先暫停html文檔的解析.在chrome 上,還有一種預解析的技術。就是在併發解析多個<script>標籤裏面的內容,如果發現某個<script>的內容不改變DOM樹,那麼主線程就會直接使用這個結果,否則就放棄,主線程自己再解析。
但是無論怎樣，<script> 都是按照在頁面中出現的順序來執行的。
ps:以下內容純屬胡說
對於<style><link>的加載和解析就完全是異步的.因爲除了主線程之外,每個頁面還有一個渲染線程.解析html文檔生成DOM樹和渲染頁面完全是並行的。
參考：
http://blog.csdn.net/talking12391239/article/details/21157263
https://www.cnblogs.com/daishuguang/p/4193432.html
https://www.cnblogs.com/Walker-lyl/p/5262075.html
http://blog.csdn.net/lxcao/article/details/52861953
如有紕漏，歡迎指出，反正我就是當筆記一樣給自己看的。