關於html，css，js三者的載入順序問題

dom文件的載入順序是由上而下的順序載入；

1、dom載入到link標籤

css檔案的載入是與dom的載入並行的，也就是說，css在載入時dom還在繼續載入構建，而過程中遇到的css樣式或者img，則會向伺服器傳送乙個請求，待資源返回後，將其新增到dom中的相對應位置中；

2、dom載入到script標籤

由於js檔案不會與dom並行載入，因此需要等待js整個檔案載入完之後才能繼續dom的載入，倘若js指令碼檔案過大，則可能導致瀏覽器頁面顯示滯後，出現「假死」狀態，這種效應稱之為「阻塞效應」；會導致出現非常不好的使用者體驗；

而這個特性也是為什麼在js檔案中開頭需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是讓dom文件載入完成之後才執行js檔案，這樣才不會出現查詢不到dom節點等問題；

js阻塞其他資源的載入的原因是：瀏覽器為了防止js修改dom樹，需要重新構建dom樹的情況出現；

3、解決方法

前提，js是外部指令碼；

在script標籤中新增 defer=「ture」，則會讓js與dom並行載入，待頁面載入完成後再執行js檔案，這樣則不存在阻塞；

在scirpt標籤中新增 async=「ture」，這個屬性告訴瀏覽器該js檔案是非同步載入執行的，也就是不依賴於其他js和css，也就是說無法保證js檔案的載入順序，但是同樣有與dom並行載入的效果；

同時使用defer和async屬性時，defer屬性會失效；

可以將scirpt標籤放在body標籤之後，這樣就不會出現載入的衝突了。