Question

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

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

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

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

Answer 1

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

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

考虑缩小你的JS文件。

Answer 2

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

Answer 3

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

Answer 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精灵）并将所有JS合并到一个文件中，那么您的页面加载速度会明显加快。
文件大小 - 随着网络的加速，这变得越来越不重要。如果你的服务器不支持内容压缩，那么缩小你的JS是个不错的主意，尽管在我看来节省的时间被高估了。这确实使维护更耗时，并且实时调试几乎不可能，但它肯定会使文件大小降低很多。如果您有很多JavaScript（可能约150KB +？）或者如果您知道您的访问者来自较慢的网络（例如，公司网络上的人），我建议您这样做。如果您的服务器支持压缩，那么节省的费用实际上可以忽略不计。
脚本放置 - 当浏览器点击<script src="...">标记时，它会暂停所有呈现，直到脚本加载并执行，这意味着不可避免的延迟。如果您将脚本放在页面中间，您会注意到一半页面加载然后暂停。要进行渲染，请在页面的底部放置尽可能多的<script>引用。您在页面顶部需要的脚本可以到达那里，但是那里的<script>混乱越多，页面呈现的速度就越慢。由onLoad或DOMReady执行的任何代码都可以安全地放在页面底部。

雅虎在Best Practices页面上提供了非常惊人的优化提示列表。

加速优化JavaScript功能

4 个答案: