前端-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-->
<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 的下載時機都非常優先,和位置無關。