快速优化JavaScript函数

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文件浏览器发出文件.. @ HTTP：/ /javascriptcompressor.com/

Answer 4

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

我认为，有四种主要方法可以加快页面加载时间：

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

雅虎在其“ 最佳实践”页面上提供了非常惊人的优化提示列表。