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文件。