鏈接字體，CSS和腳本的順序是什么

Question

如果我有一個網站項目：

reset.css
遠程bootstrap lib
master.css
遠程字體真棒CSS
兩個谷歌字體
JQuery lib
main.js

考慮最佳加載速度和可能的覆蓋。 在<head>鏈接它們的最佳順序是什么？

我知道以后添加的內容會覆蓋相同優先級的相同規則，前一個樣式表應用，瀏覽器渲染從上到下， <head>首先是<body>

我還從谷歌那里了解到現代瀏覽器中有一些叫做預取的東西。

就個人而言，我會做reset.css，字體真棒，谷歌字體，bootstrap lib，master.css，Jquery lib，main.js. 首先是通用規則，首先是lib。 但我不知道如何處理字體，因為它們也是樣式表。

Answer 1

在Bootstrap之前加載jQuery以及在引導之后加載所有自定義CSS非常重要。 最好在開頭加載谷歌字體樣式表。

順序應該是庫首先跟隨自定義腳本和樣式。 由於bootstrap依賴於jQuery，因此在加載Bootstap的JavaScript文件之前應該加載jQuery。

谷歌字體
fontawesome
JQuery lib
遠程bootstrap lib
reset.css
master.css
main.js

與在head標記之間使用JavaScript文件相比，在正文末尾加載JavaScript文件（就在</body>之前）將提高網站加載速度。

Answer 2

我想指出，之前答案中建議的訂單與Google和MDN建議的開發人員最佳做法並不完全一致。

首先應該在頭部加載CSS，然后是字體樣式表或谷歌字體樣式表，這樣布局就不會出現斷裂，特別是在慢速連接上。

因此，Bootstrap css可以加載到頭部，而Bootstrap js應該在jQuery之后加載。

JS，jQuery及其依賴項可以移動到頁面底部以促進更快的頁面加載，因為JS代碼可以影響網頁的內容和布局，瀏覽器會延遲呈現跟隨腳本標記的任何內容，直到該腳本被下載為止，解析和執行。

而作為bootstrap js有jQuery作為依賴。 因此，應首先加載jQuery，然后加載boootstrap js和main js文件。

因此，根據最佳開發人員實踐的正確順序：

<head>

 1. Bootstrap CSS    
 2. Reset CSS
 3. Master CSS
 4. Google Font CSS
 5. Font Awesome CSS

</head>
<body>

Your content goes here    

<!-- add js files to the bottom of the page-->

 6. jQuery 
 7. Bootstrap js
 8. Main js

</body>

Answer 3

既然你的問題是在性能方面。 以下是我的一些看法

1.加載谷歌字體aysnc你可以異步加載字體，這樣就不會阻止頁面的渲染。 你可以使用javascript字體加載器， https：//github.com/typekit/webfontloader

2.首先加載css以下方法可能是最好的方法

fontawesome
JQuery lib
刪除bootstrap lib
reset.css
master.css

我還建議您合並reset.css和master.css，因為我相信發送一個單獨的reset.css請求是沒用的，並將這些小代碼集與master.css合並將是一個更好的方法。

3.加載JS最后加載master.js文件，最好在body標簽的底部加載這個文件，從那時起它將提高影響關鍵渲染路徑的頁面加載性能。

注意：請閱讀關鍵的rending路徑，這可以深入解釋頁面加載性能。

鏈接字體，CSS和腳本的順序是什么

問題描述

3 個解決方案

解決方案1
4 2017-09-14 09:13:31

解決方案2
3 已采納 2017-09-14 10:27:26

解決方案3
1 2017-09-14 09:58:53

鏈接字體，CSS和腳本的順序是什么

問題描述

3 個解決方案

解決方案1 4 2017-09-14 09:13:31

解決方案2 3 已采納 2017-09-14 10:27:26

解決方案3 1 2017-09-14 09:58:53

解決方案1
4 2017-09-14 09:13:31

解決方案2
3 已采納 2017-09-14 10:27:26

解決方案3
1 2017-09-14 09:58:53