html css js載入順序

標籤：class   一般來說   告訴   java   執行   www   進入   避免   頁面   

1.js放在head中會立即執行，阻塞後續的資源下載與執行。因為js有可能會修改dom，如果不阻塞後續的資源下載，dom的操作順序不可控。

　　正常的網頁載入流程是這樣的。

1. 瀏覽器一邊下載HTML網頁，一邊開始解析
2. 解析過程中，發現<script>標籤
3. 暫停解析，網頁渲染的控制權轉交給JavaScript引擎
4. 如果<script>標籤引用了外部指令碼，就下載該指令碼，否則就直接執行
5. 執行完畢，控制權交還渲染引擎，恢複往下解析HTML網頁

　　如果外部指令碼載入時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，這被稱為“阻塞效應”。html需要等head中所有的js和css載入完成後才會開始繪製，但是html不需要等待放在body最後的js下載執行就會開始繪製,因此將js放在body的最後面，可以避免資源阻塞，同時使靜態html頁面迅速顯示。將指令檔都放在網頁尾部載入，還有一個好處。在DOM結構產生之前就調用DOM，JavaScript會報錯，如果指令碼都在網頁尾部載入，就不存在這個問題，因為這時DOM肯定已經產生了。

 

2.js的執行依賴前面的樣式。即只有前面的樣式全部下載完成後才會執行js，但是此時外鏈css和外鏈js是並行下載的。

　　css需要分塊，首頁的css獨立，其餘的css需要動態載入，因為html的繪製會被css阻塞，這樣可以減少首次進入時的白屏時間。

 

3.外鏈的js如果含有defer="true"屬性，將會並行載入js，到頁面全部載入完成後才會執行，會按順序執行。

　　defer屬性的作用是，告訴瀏覽器，等到DOM載入完成後，再執行指定指令碼。

1. 瀏覽器開始解析HTML網頁
2. 解析過程中，發現帶有defer屬性的script標籤
3. 瀏覽器繼續往下解析HTML網頁，同時並行下載script標籤中的外部指令碼
4. 瀏覽器完成解析HTML網頁，此時再執行下載的指令碼

　　對於內建而不是串連外部指令碼的script標籤，以及動態產生的script標籤，defer屬性不起作用。

 

4.外鏈的js如果含有async="true"屬性，將不會依賴於任何js和css的執行，此js下載完成後立刻執行，不保證按照書寫的順序執行。因為async="true"屬性會告訴瀏覽器，js不會修改dom和樣式，故不必依賴其它的js和css。　

　　async屬性的作用是，使用另一個進程下載指令碼，下載時不會阻塞渲染。

1. 瀏覽器開始解析HTML網頁
2. 解析過程中，發現帶有async屬性的script標籤
3. 瀏覽器繼續往下解析HTML網頁，同時並行下載script標籤中的外部指令碼
4. 指令碼下載完成，瀏覽器暫停解析HTML網頁，開始執行下載的指令碼
5. 指令碼執行完畢，瀏覽器恢複解析HTML網頁

　　async屬性可以保證指令碼下載的同時，瀏覽器繼續渲染。需要注意的是，一旦採用這個屬性，就無法保證指令碼的執行順序。哪個指令碼先下載結束，就先執行那個指令碼。另外，使用async屬性的指令檔中，不應該使用document.write方法。

　　一般來說，如果指令碼之間沒有依賴關係，就使用async屬性，如果指令碼之間有依賴關係，就使用defer屬性。如果同時使用async和defer屬性，後者不起作用，瀏覽器行為由async屬性決定。

PS:原文轉自：http://www.cnblogs.com/yingsong/p/6170780.html

html css js載入順序