標籤：引入 子節點 一個 決定 dom節點 script 深度 應該 logs
在構建頁面時，我們會在html中載入一個或多個css和js檔案。或許大家都已經習慣了“最佳實務”中，css檔案應該放在<head>標籤中引入，而js檔案則是放在</body>關閉標籤前引入的原則，但其中的原因，很多人可能像我之前一樣，不是瞭解得很清楚。在查閱了書籍和資料後，稍微瞭解的其中的原由。
讓我們先看一看瀏覽器中的渲染流程：
主流程：
詳細流程：
當瀏覽器獲得一個html檔案時，會“自上而下”載入，並在載入過程中進行解析渲染。
步驟：
整個瀏覽器渲染頁面的流程就是這樣，可以說正是因為這個渲染的過程，決定了我們html文檔中css檔案和js檔案的引入位置。
在html中，css檔案一般是由href載入，而js用src載入，這兩者有什麼不同呢？
href：是hypertext reference的縮寫，表示超文本引用，用來建立當前元素和文檔間的連結。常用的有link，a。
src：是source的縮寫，表示資源，src指向的內容會嵌入到文檔中當前標籤的位置。常用的有img, script, iframe。
當css使用href引用時，當瀏覽器解析到該元素時，css檔案會並行下載，不會阻塞DOM樹的解析
當js使用src引用時，當瀏覽器解析到該元素時，會阻塞對文檔和解析和渲染以及資源的下載，等待js檔案的下載、解析和執行。直到指令碼全部執行完畢，瀏覽器才會繼續解析和渲染文檔
為什麼指令碼會阻塞文檔的解析和渲染？
因為指令碼有直接操作DOM節點和樣式的能力，例如 document.write，這意味著，在JS執行完成前，所有的資源載入解析可能是沒有必要的
OK，瞭解了以上原因，現在應該可以理解為什麼要將css放在頭部而js放在底部引入了：
css在頭部引入：在產生DOM Tree的同時，就可以同時對DOM Tree進行渲染，使頁面更快的呈現在螢幕上。如果css放在底部引入，那麼在DOM Tree已經產生完畢之後，還需要等待css檔案的下載和解析，之後才能進行渲染並繪製，這樣會導致頁面長時間白屏。
js在底部引入：不會阻塞檔案的載入和解析，在頁面渲染完畢時才載入執行，不影響使用者的瀏覽
讀書筆記（二）—— 淺析瀏覽器渲染過程和html中的檔案載入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
