建立document物件，開始解析web頁面。解析html元素和他們的文字內容後新增element物件和text節點到文件中。這個階段 document.readystate = 『loading』 。
遇到link外部css，建立執行緒載入，並繼續解析文件。
遇到script外部js，並且沒有設定async、defer，瀏覽器載入，並阻塞，等待js載入完成並執行該指令碼，然後繼續解析文件。
遇到script外部js，並且設定有async、defer，瀏覽器建立執行緒載入，並繼續解析文件。 對於async屬性的指令碼，指令碼載入完成後立即執行。（禁止使用document.write()）
遇到img等，先正常解析dom結構，然後瀏覽器非同步載入src，並繼續解析文件。
當文件解析完成，document.readystate = 『interactive』 。
文件解析完成後，所有設定有defer的指令碼會按照順序執行。（禁止使用document.write()）;
document物件觸發domcontentloaded事件，這也標誌著程式執行從同步指令碼執行階段，轉化為事件驅動階段。
當所有async的指令碼載入完成並執行後、img等載入完成後，document.readystate = 『complete』，window物件觸發load事件。
從此，以非同步響應方式處理使用者輸入、網路事件等。
JS載入時間線
js載入時間線，依據js出生的那一刻起，記錄了一系列瀏覽器按照順序做的事 就是乙個執行順序 js時間線步驟 建立document物件 文件解析完 文件解析完載入完執行完 1 建立document物件，開始解析web頁面，解析html元素和他們的文字內容後新增element物件和text節點到文件中，...
js 同步載入，非同步載入和載入時間線
常預設的是同步載入 同步模式又稱阻塞模式，會阻止瀏覽器的後續操作，相當於阻止了後續的檔案的解析，執行等。載入到js檔案會等候js檔案載入完成，html css載入線被阻斷 瀏覽器之所以會採用同步模式，是因為載入的js檔案中有對dom的操作 重定向，輸出document等預設行為，所以同步才是最好的。...
頁面渲染 非同步載入JS 時間線
目錄 一 頁面渲染 二 非同步載入js 三 時間線 瀏覽器載入頁面時優先識別html 生成dom節點樹 domtree dom節點樹生成完畢後，再生成與dom樹類似的css樹 csstree css樹上的節點與dom節點對應。dom樹和css樹都遵循深度優先原則。生成dom節點樹的過程叫頁面解析。頁...