Question

我已经对此做了一些搜索，但找不到任何形式的最佳做法或推荐 - 也许那是因为没有。我在我的网站上使用各种jQuery插件，除了TinyMCE和其他一些插件，以及我网站的特定JS文件。最重要的是，我有三个样式表......随着网站的增长，还会有更多样式！

是否存在任何类型的“限制”或任何您应该注意在标记中包含脚本的内容？我知道每一个都是需要完成的另一个HTTP请求，但是如果它们都被缩小并且尽可能小，那么会出现问题吗？

    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" />

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" />
    <![endif]-->

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script>

Answer 1

不好！

我建议在部署到live之前使用脚本将这些文件合并为一个js和一个css。造成这种情况的原因有很多，请参阅以下链接获取更多信息：

http://developer.yahoo.com/performance/rules.html

编辑：要进一步回答否，对文件数量没有限制，但大多数浏览器在任何时候都只能有2个连接（对于一个站点）到Web服务器将一次加载您的js 2文件。 firefox的YSlow plugin会显示您的文件下载方式图。

如果您正在使用ASP.NET，这篇codeproject文章可能会有所帮助，如果您使用的是Linux，那么this可能有所帮助。

编辑：Windows上的简单批处理文件（插入构建工具）将是

@echo off
copy file1.js + file2.js + file3.js merged.js /b

Answer 2

浏览器对域的并发请求数量有限制，因此可以减慢页面中其他项目的加载速度。例如，IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2。

我建议您合并本地托管的文件，在外部引用其他文件（例如在Google上），并可能将其他文件移到页面底部，这样它们就不会延迟加载。

您可以将脚本与许多在线工具结合使用，例如jsCompress。它有一个“上传文件”选项卡，因此您只需上传所有的js文件，它就会压缩和缩小。

还有一些服务器端实用程序可以帮助您。您没有说明您正在使用的服务器端技术，但例如在PHP世界中，您可以使用Minify。

Answer 3

如果它让你感觉更好，那么许多其他网站都会被“加载”，js文件几乎被所有现代（甚至是旧版）浏览器缓存。有一件事可能有帮助，就是将你的jquery文件链接到googleapis网站上托管的文件，因为有些其他网站可能会链接到托管在那里的同一个jquery文件，而且它已经在他们的缓存中了：

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

您的网络服务器应该已经通过自动启用gzip压缩来优化文件，但请仔细检查以确保。

Answer 4

您在页面上引用的CSS和JS文件越多，加载所需的时间就越长。将它们组合成尽可能少的文件要好得多。

Answer 5

我不知道这个问题是否存在一个好的答案，但如果你对优化感兴趣，那么雅虎就完成了很多这样的问题！：http://developer.yahoo.com/performance/rules.html。

就个人而言，我倾向于忽略大部分规则，仅仅因为我正在建造的东西并不是那么大。

Answer 6

Google Page Speed是你的朋友。似乎基本上是类固醇的YSlow。

有多少包括在内？

6 个答案: