多個JavaScript/css文件：最佳實踐？

我現在有大約7個Javascript文件（感謝各種jQuery插件）和4-5個CSS文件。我很好奇處理這些問題的最佳做法，包括應在哪些文檔中加載它們？ YSlow告訴我，JavaScript文件應儘可能包含在最後。身體的盡頭？它提到，分隔符似乎是他們是否寫內容。我所有的Javascript文件都是函數和jQuery代碼（全部在ready（）時完成），因此應該可以。多個JavaScript/css文件：最佳實踐？

所以我應該包括一個CSS和一個Javascript文件，幷包含其餘的？我應該將所有文件連接成一個嗎？我應該在Javascript文檔的最後加上Javascript標籤嗎？

編輯： FWIW是的這是PHP。

來源

2009-01-29 cletus

您可以添加'php'標籤，並將PHP添加到問題的標題中嗎？ – ripper234 2011-09-03 20:00:28

這個問題是怎麼樣的PHP？ – BentOnCoding 2012-06-12 19:31:47

我建議使用PHP Minify，它允許您爲一組JS或CSS文件創建一個HTTP請求。 Minify還爲客戶端緩存處理GZipping，Compression和HTTP Headers。

編輯：Minify還允許您設置請求，以便爲不同的頁面可以包含不同的文件。例如，一些JS文件的核心集合以及某些頁面上的自定義JS代碼，或者僅僅是其他頁面上的核心JS文件。

在開發過程中包含所有文件，就像通常那樣，然後當您更接近切換到生產運行時，將所有CSS和JS文件縮小並加入到單個HTTP請求中。這很容易設置和工作。

此外，CSS文件應該設置在頭部，JS文件在底部，因爲JS文件可以寫入您的頁面，並可能導致大量的超時問題。

這裏是你應該如何包括您的JS文件：

</div> <!-- Closing Footer Div --> 
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
</body> 
</html>

編輯：您還可以使用Cuzillion看到你的頁面應該如何設置。

來源

2009-01-29 06:42:40

你還沒有明確說，你就可以訪問服務器端的解決方案，但假設你做什麼，我一直使用PHP做以下涉及的方法了：

jQuery的。 js.php：

<?php 
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata'); 
foreach($jquery as $file) 
{ 
echo file_get_contents('jquery.' . $file . '.js'); 
} 
?>

隨着上述到位片斷，然後我調用該文件就像我通常會：

<script type="text/javascript" src="jquery.js.php"></script>

，然後如果我曾經認識的具體功能我會去的需要，我只是通過我的要求作爲查詢字符串（jquery.js.php？r =核心，影響）。如果他們是分支的，我對CSS要求也完全一樣。

來源

2009-01-29 06:06:01

這種東西不會抑制緩存嗎？ – cletus 2009-01-29 06:22:57

如果緩存在涉及遠程包含時遇到問題，大多數瀏覽器會重新考慮如果您只是將時間戳傳遞到URL中...... – 2009-01-29 06:25:04

但是...使用緩存標頭仍然應該是首選方法。 – 2009-01-29 15:49:51

以下是我的工作：我最多使用兩個JavaScript文件，每個頁面通常使用一個CSS文件。我想知道哪些JS文件在我的所有頁面上都很常見（或者足夠多，所以它很接近 - 包含jQuery的文件將是一個很好的候選項），然後我連接它們並使用jsmin-php縮小它們，然後緩存組合文件。如果剩下的JS文件只針對那一個頁面，我將它們串聯，縮小並緩存到單個文件中。第一個JS文件將通過多個頁面進行調用，僅次於那一個或者幾個頁面。

如果你喜歡css-min，你可以使用CSS的相同概念，儘管我發現我通常只使用一個CSS文件。還有一件事是，當我創建緩存文件時，我在文件的開頭放入了一些PHP代碼，將其作爲GZip文件提供，實際上，無論如何您都可以獲得大部分儲蓄。您還需要設置過期標題，以便用戶的瀏覽器也有更好的緩存文件的機會。我相信你也可以通過Apache啓用GZipping。

對於緩存，我檢查文件創建時間是否比我設置的時間長。如果是，我重新創建緩存文件並提供它，否則我只獲取現有的緩存文件。

來源

2009-01-29 06:32:02 VirtuosiMedia

縮小和合並文件的想法很好。

我做同樣的事情在我的網站，但簡化開發，我建議一些代碼，看起來像這樣：

if (evironment == production) { 
    echo "<style>@import(/Styles/Combined.css);</style>" 
} else { 
    echo "<style>@import(/Styles/File1.css);</style>" 
    echo "<style>@import(/Styles/File2.css);</style>" 
}

這應該讓你保持你的文件，開發，方便管理中分離出來，並在使用組合文件部署更快的頁面加載。這假定您可以將文件和更改變量作爲部署過程的一部分進行組合。

肯定會考慮包括您的js在底部和css在頂部按照YUI建議保持JS低對頁面其餘部分的外觀有實際影響，並且感覺快得多。

來源

2009-01-29 07:31:28 mjallday

我不會推薦使用基於JavaScript的解決方案（如PHP Minify）來包含您的CSS，因爲如果訪問者禁用JavaScript，您的頁面將變得無法使用。

來源

2009-01-29 15:42:00 jeroen

我也傾向於複製+我所有的jQuery插件粘貼到單個文件：jquery.plugins.js然後鏈接到

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

的實際jQuery庫。

來源

2009-01-29 18:43:03 Birk

多個JavaScript/css文件：最佳實踐？

回答

相關問題