一天，小明正在網上查詢資料，專案中遇到的問題需要通過查閱資料來解決，他看到乙個標題很有意思，覺得這應該是他要找的答案，於是他就點了進去，結果進入**後幾秒鐘的時間，網頁還是一片空白，過了好久才載入完成。
為什麼會出現這種情況？
說到這那我們就有必要先了解一下**載入的整個完整過程了。
1.首先瀏覽器從伺服器接收到html**，然後開始解析html
2.構建dom樹（根據html**自頂向下進行構建），並且在同時構建渲染樹
3.遇到js檔案載入執行，將阻塞dom樹的構建；遇到css檔案，將阻塞渲染樹的構建
（script標籤中的defer屬性：構建dom樹的過程和js檔案的載入非同步（並行）進行，但是js檔案執行需要在dom樹構建完成之後
script標籤中的async屬性：構建dom樹、渲染樹的過程和js檔案的載入和執行非同步（並行）進行）
為什麼要對css，js的放置位置進行調整？
從以上過程可以知道，當js檔案放在head中時，瀏覽器構建dom樹的時候遇到js檔案載入會阻塞，也就是說，瀏覽器不會載入body中的標籤，一旦這個js檔案的數量和內容都比較大，那麼就會造成剛剛小明遇到的那種情況，就不會給使用者乙個十分良好的視覺化回饋，而在前端開發中，給予使用者的視覺化回饋十分重要。
我們現在十分青睞於用進度條來描述乙個過程，而對使用者的視覺化回饋，就是網頁載入的進度條。
對於現如今有著快節奏的人們，如果乙個網頁開啟後在兩秒鐘內沒有反應，或者載入很慢，那麼使用者就會很不耐煩的關掉它，想當於被直接宣判死刑了。
應該放在**？
綜上所述，script標籤最好放在標籤的前面，因為放在所有body中的標籤後面就不會出現網頁載入時出現空白的情況，可以持續的給使用者提供視覺反饋，同時在有些情況下，會降低錯誤的發生。
而css標籤應該放在標籤之間，因為如果放在標籤的前面，那麼當dom樹構建完成了，渲染樹才構建，那麼當渲染樹構建完成，瀏覽器不得不再重新渲染整個頁面，這樣造成了資源的浪費。效率也不高。如果放在之間，瀏覽器邊構建邊渲染，效率要高的多。
（個人愚見，如有不足，或者錯誤的地方，還請大家不吝賜教）
CSS JS 放置位置與前端效能的關係？
一天，小明正在網上查詢資料，專案中遇到的問題需要通過查閱資料來解決，他看到乙個標題很有意思，覺得這應該是他要找的答案，於是他就點了進去，結果進入 後幾秒鐘的時間，網頁還是一片空白，過了好久才載入完成。為什麼會出現這種情況？說到這那我們就有必要先了解一下 載入的整個完整過程了。1.首先瀏覽器從伺服器接...
資料放置的位置
bbs段 未初始化的全域性變數 int g bss 1024 這個大小沒有反應在最後exe的大小上，它只佔執行記憶體空間，不占用檔案空間。data段 初始化過的全域性變數 rodata段 常量資料 的rodata直接和指令編碼一起，故存放在 段中 字串常量，編譯器會自動刪除重複的字串，保證在exe只...
ACL的放置位置規則
acl的放置位置規則 在適當的位置放置 acl 可以過濾掉不必要的流量，使網路更加高效。acl 可以充當防火牆來過濾資料報並去除不必要的流量。acl 的放置位置決定了是否能有效減少不必要的流量。例如，會被遠端目的地拒絕的流量不應該消耗通往該目的地的路徑上的網路資源。www.2cto.com 每個 a...