加速优化 JavaScript 函数答案

【问题标题】：Speed optimizing a JavaScript function加速优化 JavaScript 函数
【发布时间】：2011-03-05 17:01:36
【问题描述】：

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

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

我可能在一两页中使用fun1，但其他功能仅适用于特定页面。

我的问题是：我应该将所有功能包含在一个文件中，例如script.js，还是包含特定页面的特定功能？哪个更适合速度优化？

【问题讨论】：

标签： javascript optimization performance

【解决方案1】：

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

我建议将它们尽可能集中在一个 js 文件中。否则，你将不得不加载大量的小 js 文件，增加页面加载时间。

也考虑缩小你的 JS 文件。

【讨论】：

我正在使用 jQuery.ajaxSetup({ cache: false }); 来解决 ie 问题。会不会影响页面加载速度
参数可以通过 jQuery.ajax() 来定义每个请求的参数，或者通过 jQuery.ajaxSetup() 来定义默认参数。如果您的大部分 Ajax 请求可以被缓存，您应该考虑仅在不可缓存的查询中定义“cache: false”。否则，ajaxSetup() 就可以了。

【解决方案2】：

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

【讨论】：

【解决方案3】：

.js 文件由您的浏览器缓存。因此，您可以在单个文件中包含任意数量的函数。如果将它们拆分为单独的文件，则会从浏览器进行大量额外调用，这会减慢加载页面的速度。如果您担心 .js 文件的大小，也可以压缩 js 文件 ..@ http://javascriptcompressor.com/

【讨论】：

【解决方案4】：

这在很大程度上取决于您的服务器如何发送这些文件。如果您有 Firebug，请打开 Net 选项卡并检查您的 JS 文件。如果您在 Headers 选项卡中看到 Last-Modified 条目，则意味着您最好将所有 JS 放入一个文件中。如果您没有看到它，最好将其拆分为特定于页面的文件。

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

服务器标头——这个设置更复杂，但是如果您控制服务器设置或者如果您愿意通过动态页面（PHP 或 ASP）提供您的 JS，您可以向浏览器发送额外的指令缓存特定时间段的特定内容。由于您的 JS 文件可能很少更改，因此对它们执行此操作通常非常安全。您基本上只需将Expires 标头设置为将来的某个时间点。这意味着如果浏览器在缓存中拥有该文件，则根本不需要请求该文件。如果您有一次又一次回来的访客，这是最有意义的。如果你有很多一击即中的访客，这不会有什么不同。这确实意味着如果您更改这些文件，许多浏览器将不会接受更改；因此，您应该更改文件名或将某些内容附加到查询字符串中，如下所示：<script type="text/javascript" src="/sitescript.js?v=1.1"></script>。如果您有多个静态 HTML 页面，这可能是一个维护问题。
文件数量——在我看来，这是您最大程度地节省成本的地方。我几乎可以肯定大多数浏览器一次仍然只支持四个活动请求。这意味着如果您的网页有五张图片，则在之前的一张图片完成加载之前不会请求最后一张图片。如果您的网站有 50 张图片、3 个 CSS 文件和 10 个 JS 文件，则需要一段时间才能清除所有这些请求。请记住，即使您发送 Last-Modified 标头，浏览器仍然需要检查内容是否已更改，因此它需要这些请求槽之一。如果您可以将所有图像组合成一个图像（使用 CSS sprites）并将所有 JS 组合成一个文件，那么您的页面加载速度会大大加快。
文件大小——随着网络速度的加快，这变得越来越不重要。如果您的服务器不支持内容压缩，那么缩小 JS 是一个不错的主意，尽管我认为节省的时间被高估了。这确实使维护变得更加耗时并且几乎不可能进行实时调试，但它肯定会大大降低文件大小。如果您有大量的 JavaScript（大约 150KB+？），或者如果您知道您的访问者来自较慢的网络（例如，公司网络上的人），我建议您这样做。如果您的服务器确实支持压缩，那么节省的成本实际上可以忽略不计。
脚本放置——当浏览器点击<script src="...">标签时，它会停止所有渲染，直到脚本加载并执行，这意味着不可避免的延迟。如果您将脚本放在页面中间，您会注意到一半的页面加载然后暂停。要加快渲染速度，请将尽可能多的 <script> 引用放在页面的底部。您需要在页面顶部的脚本可以到那里，但是您在上面的<script> 混乱越多，页面呈现的速度就越慢。由onLoad 或DOMReady 执行的任何代码都可以安全地放在页面底部。

Yahoo 在他们的Best Practices 页面上有一个非常棒的优化技巧列表。

【讨论】：