控制的css文件

我的jQuery UI的CSS加載後加載的main.css文件的加載順序：控制的css文件

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <-- jQuery CSS 
<link rel="stylesheet" type="text/css" href="CSS/jquery.Jcrop.css" /> <!-- not used here --> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="/favicon.ico" type="image/x-icon"> 
<link rel="stylesheet" type="text/css" href="CSS/main.css" /> <-- my main.css

這是我想要的順序，因爲我覆蓋一些主題風格。

但在現實中，main.css的後jQuery的CSS加載，因爲兩個轉變爲叉形：

CSS load graph

我怎樣才能確保我的main.css的負載jQuery的主題CSS後？

感謝

來源

2014-02-05 Steve

重要的是它們在HTML文件中指定的順序。 –

無論加載時間如何，瀏覽器都會按照您指定的順序處理它們。唯一的例外是如果無法加載。 – j08691

@Pekka웃是正確的 - 該圖表是一種視覺輔助工具，用於顯示資源是否佔用了總頁面加載時間，而不是訂單。 CSS包括，實際上所有的html元素都會按照它們在頁面上遇到的順序精確加載。 – MaxPRafferty

它們在HTML文件中指定的順序是應算對最終結果的唯一的事。

無論哪種方式：從其他地方加載您的jQuery UI CSS，我不認爲code.jquery.com應該被用作CDN。

這應該會大幅降低加載時間。 2秒對於一張可憐的樣式表太多了。

來源

2014-02-05 20:30:19

是的，你是完全正確的。 jquery css被優先考慮，因爲它的規則是.ui-dialog .ui-dialog-titlebar {cursor：move;}，而我的主要規則是.ui-dialog-titlebar {cursor：default;}顯然拋出另一個類給出整體規則更具特異性。感謝jquery css負載上的單挑。你能推薦一款適合你的CDN嗎？ – Steve

我猜Google是個不錯的選擇：https://developers.google.com/speed/libraries/devguide#jquery-ui儘管AJC在下面指出code.jquery.com也應該是好的。不知道爲什麼它需要你這麼久。 –

如果您在.css之前附加.min，還會使用縮小版本，您將獲得最小化版本。

檢查出來..

http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css

@pekka我覺得code.jquery可以在腳註中所用的CDN jQuery的網站上，它說CDN: //code.jquery....

來源

2014-02-05 20:57:53 AJC

但是，如果真的需要2秒加載，它似乎不值得使用。（雖然我真的很驚訝地看到jQuery官方源代碼的這種災難性加載時間） –

同意，但是對於我來說縮小版本花了10毫秒，不過我在一個非常快速的專用光纖上！ – AJC

對不起。它並不需要2s來加載jQuery的CSS。我正在閱讀時間表錯誤。下面是正確的圖像：

css loading

的jQuery的ui.css只有7.5KB，所以沒有區別真正完整和最小版本之間。所有的時間都在連接和等待。

當我完成開發750KB的index.php代碼時，我會縮小和gzip它來縮短它的時間。

感謝您的幫助。

來源

2014-02-05 22:48:47 Steve

控制的css文件

回答

相關問題