頁面在載入的時候會先後觸發兩個事件:document的DOMContentLoaded,以及window.onload事件.

DOMContentLoaded

MDN上的解釋是當初始的 HTML 文件被完全載入和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、影象和子框架的完成載入。IE9及其以上版本相容.
此時的document.readyState == ‘interactive’.

$(document).ready()
其實並不存在document.ready這樣的原生事件。在jQuery中,$(function(){})和$(document).ready(function(){})

window.onlaod
此時HTML文件全部解析完成，依賴的所有資源都已經解析完成。
此時,document.readyState == ‘complete’

這個只讀屬性用來描述html文件當前的載入狀態.有效的值有:
loading:載入中
interactive:文件載入解析完畢,但是子資源可能還未載入完成.
complete:文件載入解析完畢,全部資源載入完成.

HTML 文件的解析和資源載入
瀏覽器對於html文件裡面的所有的資源(類似於<img><link><script><iframe>)都是並行載入。主執行緒不會等到一個資源載入完才開始載入下一個.它會同時開啟多個下載執行緒(可能是4-6後者N個,不同的瀏覽器並行下載數不一樣).而對於<script>來說就有些特殊,他的下載和執行都會阻塞主執行緒,也就是說當HTML文件的解析遇到<script>

這樣設計的考量是js檔案有可能會修改DOM樹,所以穩妥的做法是先暫停html文件的解析.在chrome 上,還有一種預解析的技術。就是在併發解析多個<script>標籤裡面的內容,如果發現某個<script>的內容不改變DOM樹,那麼主執行緒就會直接使用這個結果,否則就放棄,主執行緒自己再解析。

但是無論怎樣，<script> 都是按照在頁面中出現的順序來執行的。

ps:以下內容純屬胡說
對於<style><link>的載入和解析就完全是非同步的.因為除了主執行緒之外,每個頁面還有一個渲染執行緒.解析html文件生成DOM樹和渲染頁面完全是並行的。

如有紕漏，歡迎指出，反正我就是當筆記一樣給自己看的。