如何找出 Javascript 下载速度如此缓慢的原因？答案

【问题标题】：How to find out why Javascript is downloading so slowly?如何找出 Javascript 下载速度如此缓慢的原因？
【发布时间】：2013-05-06 08:42:52
【问题描述】：

我有一个 ASP.NET MVC 项目，它运行得像糖蜜一样慢。我在一个特定的电话上打开了 Fiddler，发现有几个电话有很大的改进空间，至少可以说：

我理解的蓝线是对我的控制器的调用，我知道去哪里优化这些东西。但我看到一堆绿线（我认为这意味着 javascript），而且这些也需要很长时间。我必须假设 jQuery 和 Kendo 脚本通常不会花费 4-6 秒来转身，所以我们的项目代码中肯定有一些东西导致了速度变慢。但是如何追踪哪些代码需要优化呢？

编辑： 下面 cmets 中的 @DaggNabbit 指出缓慢是因为这些 Javascript 是使用 cachebuster 参数调用的，因此每次调用都会重新下载它们！但是我在我的代码中看不到我们明确添加缓存拦截器的任何地方。例如：

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
...
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

我真的不是 UI 专家，但我看不出 cachebuster 是从哪里来的。还有其他想法吗？

【问题讨论】：

看起来这与javascript执行无关。 Fiddler 仅显示通过网络发送/接收的内容。所以绿线可能显示浏览器请求即 kendo.web.min.js 文件需要多长时间。还是我在问题中遗漏了什么？
所有这些 URL 上的下划线参数是什么？某种缓存破坏者？为什么要为 jQuery 和 Kendo 之类的静态内容破坏缓存？为什么要加载其中一些脚本三个不同的时间？
@DaggNabbit - 这是一个很好的观点 - 它看起来确实像一个缓存克星！但是我只是在我的代码库中搜索了对“kendo.web.min.js”的所有引用，但我看不到我们正在使用 cachebuster 调用它。示例 Razor 代码：<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> 在哪里可以找到 cachebuster 的来源？
谢天谢地，我不得不处理 .NET 的黑魔法的日子已经一去不复返了，所以我真的不知道，但如果你只是从 web 根目录提供这个应用程序，你可以摆脱@Url.Content 和 ~ 并使用普通路径；我不认为它会被重写。
@DaggNabbit - 请发布一个答案，其中有一个 cachebuster 每次都强制重新加载 javascript。我将发布一个单独的问题，以了解 cachebuster 的来源。

标签： javascript jquery asp.net-mvc-4 kendo-ui fiddler

【解决方案1】：

为了提高性能，您可以使用 javascript 闭包和 css 闭包，它们负责将所有 .js 文件绑定到一个文件中，并将所有 css 文件绑定到另一个文件中，这样会增加加载时间。

【讨论】：

【解决方案2】：

@DaggNabbit 正确识别的问题是使用 cachebuster 参数调用了 javascript。我已邀请他将他的答案发布为正确答案；当他这样做时，我会给他答案。

同时，如果您对为什么要插入 cachebuster 感兴趣，请参阅 here。

【讨论】：

【解决方案3】：

我建议将所有的 javascript 打包到一个compressed.js 文件中，将所有css 文件打包到一个compressed.css 文件中。这将减少加载时间。

目前，这需要 4-6 秒，因为 js/css 文件等待另一个文件完全加载，然后向服务器发出自己的请求以获取他的进程。在页面加载时调用控制器时，您也需要在查询中优化代码。

您将获得免费的 dll 来压缩并将所有 js/css 文件捆绑到一个压缩文件中。

希望你明白我的意思。

【讨论】：