前端-JS和CSS的引入/寫入位置應該放在哪裡？
阿新 • • 發佈：2018-12-26
在HTML5中：
引入CSS和JS檔案時 到底應該在head標籤中還是body中？
1，引入CSS在head中,
2,JS 的放置位置
a.有的js是立即執行，有的js是呼叫執行。
（ 立即執行在網頁上開啟時就可以看到效果，而呼叫執行的，一般會在其它控制元件觸發事件的時候呼叫。）
對於呼叫執行的，我們最好放在head裡，直接宣告或者引用外部檔案（head）。
對於即時執行的，我們在需要js執行的地方宣告或者引用外部檔案（body）。
b.追求效率高的話：
JS建議在body的尾部引入，（強調是自己編寫的或者不是非初始化就要載入的）；
原因：當頁面依次序載入到script的時候，dom樹的解析和渲染會暫停，在js載入執行完畢之前，
頁面會保持後續內容不完整的狀態。將script後置，可以避免這個情況，特別在指令碼下載和執行耗時很長的時候會更明顯
PS:js執行順序問題，script標籤寫在上邊的先執行
3，BS的標準模版
<!DOCTYPE html>
<html>
<head>
<!--網頁頁面字符集-->
<meta charset="utf-8">
<!--讓IE使用最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--針對移動裝置,網站顯示寬度等於裝置螢幕顯示寬度,內容縮放比例為1:1--> PS:這麼做可以使得使用者先看到樣式 具體的操作邏輯可以等待整個網頁都傳輸完成後再生效有利於提高Web瀏覽體驗.
4，JS 和 CSS 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的載入順序，有三個值得注意的點：
a. JS 有可能會修改 DOM. 典型的，可能會有 document.write. 這意味著，在當前 JS 載入和執行完成前，後續所有資源的下載有可能是沒必要的。
這是 JS 阻塞後續資源下載的根本原因。
b. JS 的執行有可能依賴最新樣式。比如，可能會有 var width = $('#id').width(). 這意味著，JS 程式碼在執行前，瀏覽器必須保證在此 JS 之前的所有 css（無論外鏈還是內嵌）都已下載和解析完成。這是 CSS 阻塞後續 JS 執行的根本原因。
c. 現代瀏覽器很聰明，會進行 prefetch 優化。效能是如此重要，現代瀏覽器在 競爭中，在 UI update 執行緒之外，還會開啟另一個執行緒，
對後續 JS 和 CSS 提前下載（注意，僅提前下載，並不執行）。有了 prefetch 優化，這意味著，在不存在任何阻塞的情況下，
理論上 JS 和 CSS 的下載時機都非常優先，和位置無關。