使用Javascript进行脚本缓存的最佳做法

Question

使用：C＃MVC5和Jquery

我有一个筛选器屏幕，它可能使用多个不同的筛选器。 根据用户的选择，我调用服务器，然后将部分视图加载到引导模式中，如下所示：

$.ajax({
            url: filterUrl,
            contentType: 'application/html',
            success: function (filterContent) {
                $("#divReportFilterModalBody").html(filterContent);
                LoadFilterScript(SCOPESTRINGS[currentReport.Scope]);
            },....

下一步是为该过滤器页面加载必要的javascript，因为您不能在部分视图上使用脚本。 为此，我还从服务器请求脚本，如下所示：

 $.getScript(scopeString + "FilterJavaScript",
            function () {

MVC控制器：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult ScopeFilterJavaScript()
    {
        return
File(System.IO.File.ReadAllBytes(Server.MapPath("~/Scripts/.../filterPartial.js")), "text/javascript");

    }

由于用户一次只能使用一个过滤器，而可能使用或不使用多个过滤器，我的问题是：

1. 脚本不是很大，是否最好是预先加载所有脚本，然后根据需要提取它们？ 我按要求加载它们的原因是因为它们可能不会被调用并且不想加载一堆不会被使用的脚本
2. 缓存它们不是一个好主意，因为用户可以多次使用同一个过滤器，而在我目前的情况下，每次都会加载脚本？ 还是我应该缓存脚本并找出不再次加载的方法？
3. 我也不是100％清楚脚本缓存。 在这种情况下，脚本加载后会发生什么情况？ 如果我调用服务器，可以看到它再次被加载，以前的脚本是否被删除了？ 因为当我查看Firebug上的脚本选项卡时，它们仍在此处列出吗？ 这会导致页面冲突吗？

在这种情况下，最佳做法是什么？

谢谢

编辑：我一直在对该主题进行进一步的研究，并找到了这篇文章（旧的，但在我看来仍然很相关）。 在此处输入链接说明

Answer 1

1. 仅在实际需要时才加载东西始终是一个好主意。 当文件太大时，也许您可​​以将它们合并并首先包含它们。

2. 还是我应该缓存脚本并找出不再次加载的方法？

   对。

3. 加载脚本（不进行任何查询）时，浏览器将对其进行缓存。 但这与再次加载脚本时发生的情况无关。 服务器要么“再次”交付它，要么浏览器使用缓存的服务器。 但是，该脚本然后再次执行。 即使您将其从dom中删除-加载的脚本也就在那里。

也许您可以像这样包装脚本：

if (!window.foobarLoaded) {
  // your script content
  window.foobarLoaded = true;
}

然后，您可以根据需要多次加载脚本-它仅“执行”一次。