在每个页面上加载主要的javascript吗？还是将其分解为相关页面？

13

我有一个700kb解压缩的JS文件，它加载在每个页面上。在12每个页面上没有javascript文件但为了减少http请求之前，我将它们全部压缩为1 file。

该文件已~130kb gzipped送达gzip。但是，在本地计算机上，它仍然是解压缩的，并且已加载到每页上。这是性能问题吗？

我已经使用Firebug分析器对javascript进行了分析，但未发现任何问题。我面临的问题/幻想是该文件中压缩了一些jQuery库，这些库有时未在当前页面上使用。

例如，jquery datatables压缩为200kb，并且仅在我的网站页面中的2个页面上加载。另一个是jqplot，那是另一个200kb。

现在400kb，我有多余的代码未80%在页面上执行。

我应该将所有内容都保留在1个文件中吗？

我应该取出jquery库并仅在当前页面上加载相关的JS吗？

— 凯尔
source

如果有700kb的JS代码，您应该重新拆分它，并仅包含您真正需要的脚本。另外，使用jQuery（“……写得更少，做更多……”）似乎有点过大，因为它拥有如此庞大的JS文件。如此大量的JS，您到底在做什么？

— Feeela 2012年

@feeela看看jquery-ui，jquery.datatables。那些单独在一起就是400kb。我也使用了其他插件，例如jquery.validate，jquery.uniform-这些东西加起来了。xD

— 凯尔

在这种情况下-如下所述-您确实应该拆分脚本并仅加载所需的内容……

— Feeela 2012年

6

您可以使用requirejs动态加载仅在该页面上所需的库。然后，您只需要在所有页面上加载requirejs（大约14k），节省大约385kb。

集成也非常容易：只需将包含的代码“包装”到require包含的东西中：

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

— 麦可
source

1

我真的很喜欢那个网站设计。我从未听说过requirejs。您如何通过http请求对此进行评分？这不是在页面上放置了更多的http请求吗？（还不错吗？）对不起我的愚蠢问题。

— 凯尔2012年

少请求当然更好，但是节省> 350k也不错。是的，你的网站将会使一个更要求如果包括页面上的其他库。如果它datatables在一个站点jqplot上，而在另一个站点上，那很好。我同意，在50％的页面上再加载五个库会使优势消失。但是对于您而言，我认为这是一个很好的解决方案（假设其余的js保留一个gzip文件）。

— 2012年

谢谢迈克尔。该解决方案非常出色。在我将所有内容分解成一页之前，这……这比我的想法要好。谢谢你的建议。既然您熟悉requirejs，您认为requirejs就足够了吗？我在某些网站上看到他们使用google加载其jquery和其他库google.load('...')。

— 凯尔2012年

1

我强烈建议从Google（或其他提供它的网站）加载通用库。这有2个优点：a） lib文件在不同站点之间缓存。用户以前曾访问过一个网站，也可能使用从Google加载的jquery。然后从缓存而不是从服务器再次加载该文件！B）即使有被加载，这将是更快，从谷歌CDN加载它，不是从自己的网络服务器。

— 2012年

8

如果您的框架/ CMS /具有适当的功能，则可以按照@Michael的建议有条件地包含脚本，但无需附加库。

以您的数据表案例为例，WordPress可以通过以下方式处理这种情况：

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJS没有错；您只需要评估它所增加的额外复杂性级别（以及首先学习使用它）是否可以抵消更易于使用的工具为您带来的好处。如果只有上述两种情况，这可能是一个更好的选择。如果还有很多事情要做，那么RequireJS可能是整体上更好的方法。

— 苏'
source

我有一个自定义网站，该网站是由我从themeforest购买的html模板制成的。唯一的问题是，该家伙花了大约6个JS文件，周围杂乱无章。因此，我将它们放在一个文件中，其中包括几个库jqplot，datatables，jquery-ui。这些全部加起来大约为550-600kb。100kb是我使用这些库的JS。我觉得我应该解决这个问题，而不是在每个页面上加载太多无关的JS库。谢谢你的建议！=）

— 凯尔2012年

5

700kb的JavaScript是一个性能问题，因为必须在页面加载后对其进行解析。因此，您应该小心，仅加载那些需要的脚本。在内部处理导航而无需离开单个页面的情况下，一个完整的JavaScript在完整的AJAX网站（例如GMail）上可能是可以的。但是，即使是完整的AJAX站点也会进行动态JS加载，以防止在启动时加载不必要的JS（内存和速度问题）。

您已经说过要减少http流量。您应该使用HTTP缓存。问题是，如果您将过期时间设置得太高，则在缓存过期之前，对JS的更改可能不可见。

但是，有一个技巧，您不参考myscript.js，而是myscript.js?version={myversion}。应用程序更新后，您更改{myversion}并强制重新加载JavaScript。

— 达努比亚水手
source

是的，有了这种大小的JS，再加上它实际上是相当普遍的库，使用CDN将是一个很大的好处。

— Zhaph-Ben Duguid 2012年

1

约700kb的JavaScript是一个性能问题，如果将其压缩，则在优化代码时必须遵守以下规则：

Minify Javascripts-只需进行压缩和解压缩，而这不会减少代码。首先，使用良好的Minify JS工具并缩小代码。您有12个文件，每个文件在进行俱乐部合并以达到最佳性能之前将分别缩小。
使用异步javascript加载，通过使用异步加载可以非常快速地加载页面并呈现页面。对用户的影响非常大，因为良好的异步加载不会阻止呈现过程，并且感觉页面加载时间会大大减少。自未加载javascript以来，将定期显示图片和其他显示的项目。
使用GOOGLE cdn进行JQUERY ; 我认为您正在使用JQUERY并从自己的网站加载它，这也是一个不利之处，请使用GOOGLE CDN（免费）加载JQUERY。由于几乎每个第3个网站都在使用它，因此已经可以在缓存中的客户端计算机上使用它。
自定义long Expires标头：某些网站如何加载，以及加载时间的问题，然后您必须提供HTTP JS文件的Long Expires，以便不能每次都下载它们，这将减少第二次请求。根据我的研究，与第一次页面访问相比，第二页面上的加载时间有更多的退出机会。
使用页面速度进行检查：有时，其他资源也会影响页面的加载速度，请进行交叉检查，并且还会尝试优化其他资源。由于对每个资源都做了一步，给我们的JS加载增加了时间。

— Vineet1982
source