优化JavaScript函数的速度

我的页面上有许多JavaScript函数，如下所示：

function fun1(){...}
function fun2(){...}
function fun3(){...}
function fun4(){...}

我可以在一个或两个页面中使用

fun1

，但其他功能仅用于特定页面

---

我的问题是：我应该在一个文件中包含所有函数，比如

script.js

，还是为特定页面包含特定函数？哪一个更适合速度优化？

我想你的问题是关于优化页面加载速度

我建议将它们尽可能多地组合在一个js文件中。 否则，您将不得不加载大量小js文件，从而增加页面加载时间

---

也可以考虑缩小JS文件。

取决于函数的大小、访问者的访问模式、缓存设置和其他情况。下载文件的速度取决于服务器必须发送多少TCP数据包。（数据包大小通常在1,5K左右。）增加文件大小只在意味着需要将文件分成更多数据包时才起作用（处理不需要运行的脚本的客户端大小延迟可以忽略不计），因此，如果您的脚本很短（您当然应该先缩小它们），最好将它们捆绑起来。如果您希望普通访问者最终需要所有脚本，那么最好还是将它们发送到一个文件中。但是，如果普通访问者不需要一些较大的脚本（例如，上传时只需要一个部分，只有0.1%的访问者曾经上传过内容），那么最好单独发送它们。

浏览器会缓存.js文件。因此，您可以在单个文件中包含任意多个函数。如果将它们拆分为单独的文件，那么大部分附加调用都是通过浏览器进行的，这会降低加载页面的速度。。如果您关心.js文件的大小，也可以压缩js文件。@

这在很大程度上取决于服务器发送这些文件的方式。如果您有Firebug，请打开Net选项卡并检查您的JS文件。如果您在Headers选项卡中看到上次修改的

条目，这意味着您最好将所有JS放在一个文件中。如果看不到，最好将内容拆分为特定于页面的文件

在我看来，有四种主要方法可以加快页面加载时间：

服务器头——这个设置更复杂，但是如果您控制服务器设置，或者如果您愿意通过动态页面（PHP或ASP）为JS提供服务，那么您可以向浏览器发送额外指令，在特定时间段内缓存特定内容。由于您的JS文件可能很少更改，因此为它们这样做通常是非常安全的。基本上，您只需要将
Expires
头设置为将来某个时间点。这意味着，如果缓存中有文件，浏览器根本不需要请求该文件。如果你有来来往往的访客，这是最有意义的。如果你有很多一炮打响的访客，这不会有什么不同。这确实意味着，如果您更改这些文件，许多浏览器将不会接受更改；因此，您应该更改文件名或向查询字符串添加如下内容：
。如果您有多个静态HTML页面，这可能是一个维护问题
文件的数量——在我看来，这是节省成本的最大好处。我几乎可以肯定，大多数浏览器一次只支持四个活动请求。这意味着，如果您的网页有五个图像，则在前一个图像之一完成加载之前，不会请求最后一个图像。如果你的站点有50个图像、3个CSS文件和10个JS文件，那么清除所有这些请求需要一段时间。请记住，即使您正在发送上次修改的
标题，浏览器仍需要检查内容是否已更改，因此它需要其中一个请求槽。如果您可以将所有图像合并到单个图像（使用CSS精灵）中，并将所有JS合并到单个文件中，那么页面的加载速度将显著加快

文件大小——随着web速度的提高，这一点变得越来越不重要。如果您的服务器不支持内容压缩，那么缩小JS是一个不错的主意，尽管在我看来节省的时间被高估了。这确实会使维护更加耗时，并且几乎不可能进行实时调试，但它确实会将文件大小降低很多。如果您有很多JavaScript（可能是~150KB+？），或者如果您知道您的访问者来自较慢的网络（例如，公司网络上的人），我建议您这样做。如果您的服务器确实支持压缩，那么节省的成本实际上可以忽略不计
脚本放置——当浏览器点击
标记时，它会停止所有渲染，直到加载并执行脚本，这意味着不可避免的延迟。如果你把你的脚本放在页面的中间，你会注意到页面的一半加载，然后暂停。要加速渲染，请将尽可能多的
引用放在页面的最下方。页面顶部需要的脚本可以放在那里，但是上面的
越杂乱，页面呈现的速度就越慢。通过
onLoad
或
DOMReady
执行的任何代码都可以安全地放在页面底部
雅虎在他们的页面上有一个非常惊人的优化提示列表。
我正在使用jQuery.ajaxSetup（{cache:false}）；对于ie问题。这将影响页面加载速度。可以通过jQuery.ajax（）为每个请求参数定义参数，或通过jQuery.ajaxSetup（）为默认参数定义参数。如果大多数Ajax请求都可以缓存，则应该考虑仅在非可缓存查询中定义“Cache：false”。否则，ajaxSetup（）就可以了。