yslow /裁減jquery

Question

我正在使用Yslow來檢查速度。

問題是，我有太多的腳本鏈接，我想，以減少重複： 問題在於第2個腳本： 我一直在使用jQuery的剛試過1.8，即使從jQuery網站的所有內容。 在1.7.2中有一些是必需的，我無法弄清楚。

我也用1.7代替了，jquery-1.3.min，它的工作原理。 由於HTTP請求的數量，Yslow在這方面給了我一個低等級，總共有9個外部Javascript腳本和5個外部css腳本。 （3爲風格切換）

如果我碰到第一個腳本，自動完成不起作用。

 <script type="text/javascript" src="js/jquery-1.7.2.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script> 

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAOpIKcVcsbojjjFIwnAOSsDwi_lARLp8o&sensor=false"></script> 
      <script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geometa.js"></script> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="js/jquery.ui.autocomplete.js"></script> 
    <script type="text/javascript" src="scripts/downloadxml.js"></script> 

總之，我試圖減少外部焦耳/秒+ CSS的數量。

Answer 1

它看起來像當自動完成包含在UI您可以整合這兩個

<script src="js/jquery.ui.autocomplete.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script> 

。如果您不希望整個用戶界面只在自定義構建中包含自動完成功能。

此外，您可以使用公共來源爲您的jQuery，谷歌和公司有一個分佈式的服務器網絡，所以很可能從他們到您的用戶比從您到您的用戶少點。

在短期嘗試這種組合：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAOpIKcVcsbojjjFIwnAOSsDwi_lARLp8o&sensor=false"></script> 
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geometa.js"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script> 

Answer 2

首先，你爲什麼要更換1.7 1.3？這太愚蠢了。其次，我建議Minify鞏固你的JS到一個組合和縮小文件。

縮減大小提供groupsConfig.php文件與腳本數組，基本上是這樣的：

'js' => array( 
    '//js/jquery-1.7.2.js', 
    '//js/jquery-ui.js', 
    '//js/libs/geolocate/geometa.js', 
    '//js/libs/downloadxml.js' 
), 

'css' => array(
    // same thing with css files 
) 

那麼你還是隻有一個<script src="/min/?g=js"></script>標籤和一個<link rel="stylesheet" src="/min/?g=css" />標籤。

Answer 3

一種選擇是讓所有的源代碼（js & css）在手，然後縮小和合並源文件。

通過這種方式，您可以爲特定頁面（也可以合併/縮小）使用一個可選的額外js文件，其中包含1個主要css文件和1個主要js文件。