加載外部CSS和JavaScript文件的順序

Question

我有一個加載許多 css和javascript文件的第三方應用程序，我現在想通過將所有javascripts合並到一個文件中來優化它，由yuicompressor壓縮，但是...當我們有一個混合時：

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js"></script>

這里中間有一個css是否重要？ 我應該整理和yuic壓縮4個javascripts並在CSS之前或之后加載它們嗎？

Answer 1

查看雅虎加速網站的最佳實踐 ，他們建議首先加載你的css（最好是在標題中），然后你的js加載（在正文中的所有內容之后）。 Google的最佳做法還建議首先加載CSS。

Answer 2

這取決於。 如果所有JS只能在DOM上運行，那么順序就不重要了。 但是，如果有任何內聯javascript更改DOM元素的CSS樣式，那么您將遇到問題。

更實際的是，您可能應該首先使用CSS，以便用戶需要更少的時間體驗無格式內容。

Answer 3

這沒關系，雖然如果加載需要一段時間，用戶可能會看到他的頁面改變外觀並想知道為什么。 在任何DOM操作之前，我首先將CSS文件放在樣式定義中，最有可能在頁面加載時最小化可見變化，但最終並不重要。