目錄
一、頁面渲染
二、非同步載入js
三、時間線
瀏覽器載入頁面時優先識別html**生成dom節點樹（domtree）。dom節點樹生成完畢後，再生成與dom樹類似的css樹（csstree），css樹上的節點與dom節點對應。dom樹和css樹都遵循深度優先原則。生成dom節點樹的過程叫頁面解析。頁面解析是頁面載入的子概念，載入完成一定發生在解析完成之後。
domtree + csstree = randertree改變dom節點樹時，整棵渲染樹會重構（reflow），導致整個頁面重新渲染。js中需要改變dom節點樹時，最好將所有操作一次性對映到dom樹，不要分開一次次修改，每一次修改dom樹都會重構整棵渲染樹，效率很低。凡是重新構建渲染樹的過程都是乙個低效過程，如dom節點的刪除/新增、dom節點的寬高變化、dom節點的位置變化、display（none/block）、offsetwidth/offsetheight等。之所以計算dom節點的寬高也會引發重構，是因為瀏覽器是依靠重繪來計算dom節點的實時寬高。
改變css樹，但不改變dom樹的操作，稱之為重繪（repaint），重繪只是改變渲染樹中的個別節點，相比於重構，效率更高，如修改背景色、修改字型顏色等。修改字型寬高，字型大小等會影響整個頁面，屬於重構。
頁面中的js檔案預設採用同步載入方式，弊端是會阻塞頁面載入。採用非同步載入方式可以實現按需載入，效率更高。js中非同步載入有三種方式。其一defer特性，適用於ie瀏覽器。其二async特性，適用於w3c標準瀏覽器。其三自己封裝函式，相容所有主流瀏覽器。
defer特性
script標籤中新增defer特性，可以實現js檔案的非同步載入。defer特性僅適用於ie瀏覽器。defer特性對外部js檔案和內部js**都有效。通過該方法載入的js檔案要等到頁面解析完成後才會被執行。標籤上特性名和特性值一樣時，可以只寫乙個特性名，系統可以識別。
script標籤中新增async特性，可以實現js檔案的非同步載入。async特性適用於w3c標準瀏覽器，ie8及以下版本的瀏覽器不支援該特性。通過該方法載入的js檔案載入完成後立刻執行。該方法只能非同步載入外部檔案。
第一步：
建立乙個document物件，開始解析web頁面。這個階段document.readystate == "loading"。
第二步：
遇到link引入外部css樣式表，建立新執行緒進行非同步載入，並繼續解析文件。
第三步：
遇到script引入外部js檔案，並且沒有設定async或defer，執行同步載入，並阻塞整個頁面，等待js載入完成並執行該指令碼，然後繼續解析文件。
第四步：
遇到script引入外部js檔案，並且設定了async或defer，瀏覽器建立新執行緒進行非同步載入，並繼續解析文件。對於async屬性的指令碼，指令碼載入完成後立刻執行。
非同步載入的js檔案裡面禁止使用document.write方法。非同步載入的js檔案裡面呼叫document.write方法，會清空之前所有的文件流，並用該方法裡面的文件流替代。除此之外，整個文件全部載入完成後呼叫document.write也會清空文件流。
遇到img等，先正常解析dom結構，然後建立新執行緒非同步載入src裡面的內容，並繼續解析文件。
第六步：
當文件解析完成後，document.readystate == "interactive"。interactive是活躍、動態的意思。
第七步：
當文件解析完成後，所有設定有defer特性的指令碼會按照順序執行。defer引入的外部js檔案中禁止使用document.write方法。
第八步：
document物件觸發domcontentloaded事件，標誌著程式從同步指令碼執行階段，轉換為事件驅動階段。該事件只能繫結dom2級事件處理程式。
第九步：
當所有非同步指令碼載入完成並執行後、img等載入完成後，document.readystate == "complete"，window物件觸發load事件。
第十步：
從此，以非同步響應的方式處理使用者輸入、網路事件等。
js載入時間線
建立document物件，開始解析web頁面。解析html元素和他們的文字內容後新增element物件和text節點到文件中。這個階段 document.readystate loading 遇到link外部css，建立執行緒載入，並繼續解析文件。遇到script外部js，並且沒有設定async d...
JS載入時間線
js載入時間線，依據js出生的那一刻起，記錄了一系列瀏覽器按照順序做的事 就是乙個執行順序 js時間線步驟 建立document物件 文件解析完 文件解析完載入完執行完 1 建立document物件，開始解析web頁面，解析html元素和他們的文字內容後新增element物件和text節點到文件中，...
js 同步載入，非同步載入和載入時間線
常預設的是同步載入 同步模式又稱阻塞模式，會阻止瀏覽器的後續操作，相當於阻止了後續的檔案的解析，執行等。載入到js檔案會等候js檔案載入完成，html css載入線被阻斷 瀏覽器之所以會採用同步模式，是因為載入的js檔案中有對dom的操作 重定向，輸出document等預設行為，所以同步才是最好的。...