關於CSS和JS檔案引用順序---BS的標準模版（轉）
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html> <head> <!--網頁頁面字符集--> <meta charset="utf-8"> <!--讓IE使用最新的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--針對移動裝置,網站顯示寬度等於裝置螢幕顯示寬度,內容縮放比例為1:1--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--將下面的 <meta> 標籤加入到頁面中，可以讓部分國產瀏覽器預設採用高速模式渲染頁面：--> <meta name="renderer" content="webkit"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>Bootstrap Basic Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--下面這一大塊的註釋是說:"為了讓IE9以下的瀏覽器支援響應式和HTML5標籤.需要引入下面兩個JS檔案"--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 英:jQuery (necessary for Bootstrap's JavaScript plugins) --> <!--中:必須在JS檔案引入之前引入JQ檔案,這裡src引用的是本地.線上建議使用CDN引用) <script src="js/jquery-2.1.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> ---------------------
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 的下載時機都非常優先，和位置無關。