關於js css html加載順序整理

參考原文 豆豆蛙：關於js css html加載順序整理

1.js放在head中會當即執行，阻塞後續的資源下載與執行。由於js有可能會修改dom，若是不阻塞後續的資源下載，dom的操做順序不可控。
正常的網頁加載流程是這樣的。
瀏覽器一邊下載HTML網頁，一邊開始解析
解析過程當中，發現<script>標籤
暫停解析，網頁渲染的控制權轉交給JavaScript引擎
若是<script>標籤引用了外部腳本，就下載該腳本，不然就直接執行
執行完畢，控制權交還渲染引擎，恢復往下解析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加載完成後，再執行指定腳本。
瀏覽器開始解析HTML網頁
解析過程當中，發現帶有defer屬性的script標籤
瀏覽器繼續往下解析HTML網頁，同時並行下載script標籤中的外部腳本
瀏覽器完成解析HTML網頁，此時再執行下載的腳本
　　對於內置而不是鏈接外部腳本的script標籤，以及動態生成的script標籤，defer屬性不起做用。

4.外鏈的js若是含有async="true"屬性，將不會依賴於任何js和css的執行，此js下載完成後馬上執行，不保證按照書寫的順序執行。由於async="true"屬性會告訴瀏覽器，js不會修改dom和樣式，故沒必要依賴其它的js和css。　
　async屬性的做用是，使用另外一個進程下載腳本，下載時不會阻塞渲染。
瀏覽器開始解析HTML網頁
解析過程當中，發現帶有async屬性的script標籤
瀏覽器繼續往下解析HTML網頁，同時並行下載script標籤中的外部腳本
腳本下載完成，瀏覽器暫停解析HTML網頁，開始執行下載的腳本
腳本執行完畢，瀏覽器恢復解析HTML網頁
　　async屬性能夠保證腳本下載的同時，瀏覽器繼續渲染。須要注意的是，一旦採用這個屬性，就沒法保證腳本的執行順序。哪一個腳本先下載結束，就先執行那個腳本。另外，使用async屬性的腳本文件中，不該該使用document.write方法。

　　通常來講，若是腳本之間沒有依賴關係，就使用async屬性，若是腳本之間有依賴關係，就使用defer屬性。若是同時使用async和defer屬性，後者不起做用，瀏覽器行爲由async屬性決定。