ASP.NET MVC 应用程序中的 javascript 隔离/性能答案

【问题标题】：javascript segregation/performance in an ASP.NET MVC ApplicationASP.NET MVC 应用程序中的 javascript 隔离/性能
【发布时间】：2013-11-04 20:40:42
【问题描述】：

我们有一个包含多个区域的 MVC 4 Web 应用程序。

网站上的所有页面都使用一个主布局视图，它包含所有 CSS 包含、渲染主体标记，然后是所有 JavaScript 库。

<head>
<link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" />
..
</head
<body>
    <div id="main-content">@RenderBody()</div>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    ..   
</body>

JavaScript 由 jquery、jqueryui 和插件等常用库组成。还有一个 JavaScript 文件包含整个网站的自定义代码

由于只有 1 个包含数千行的大型 JavaScript 文件，因此通过检查特定 DOM 元素的存在来决定是否继续执行代码例程。

runExample = function() {
    if ($(".Example").length > 0){
      // execute code
    }
}
..
runExample();

这当然是有问题的，因为所有文件都包含大量脚本，而有适用于所有页面的代码，大多数代码只适用于某些区域或页面。

有没有更好的方法来为网站拆分 JavaScript？ 请记住，有条件的是自定义代码，不一定是插件
即使有办法为每个区域创建一个 JavaScript 文件，如何会在主布局中引用吗？
是否最好在包含文件的末尾加载 JavaScript 包含文件？
缩小对性能有什么影响，是否有利于自定义代码文件？

任何建议将不胜感激。

【问题讨论】：

我不完全确定您将如何使用 MVC 完成此操作，但基本上当您想要为特定页面包含特定 js 文件时，而不是使用
“是否最好在包含文件的末尾加载 JavaScript 包含文件？” 对于性能，是的，但有时可维护性变得比性能更重要，此时指出将它放在标题中会更好。只是取决于您项目的要求。

标签： javascript jquery asp.net-mvc performance

【解决方案1】：

首先，使用捆绑。看看你项目中 App_Start 文件夹下的 BundleConfig.cs。通过简单地将所有 JS 缩小和捆绑在一起，有时某些代码实际上并未在当前页面上使用是无关紧要的（从每个页面使用的一个缓存 JS 文件中获得的节省有时比加载新的不同位更好） JS 在每个页面上。）

如果您需要更细粒度的控制，您可以使用 Require.js 之类的东西。您基本上将 JS 编写在依赖于其他模块运行的模块中（在这种情况下，您的所有插件、jQuery 等都成为“模块”）。您需要尽可能地在逻辑上手动缩小和组合您的 JS，但这将允许您将各种脚本集成在一起，而不必担心加载顺序和缺少依赖项。

作为旁注，我很不同意 Kevin B 的观点。如果可维护性要求您的 JS 必须在头脑中，我会说这是您的代码设计存在更大问题的征兆。在头部添加 JS 的唯一好理由是当页面渲染之前运行 JS 是必不可少的。一个很好的例子是 Modernizr，它为 html 元素添加了类，以允许您指定不同的样式等，具体取决于用户浏览器中是否可用某些功能，或者在 IE 的情况下，用户正在运行什么版本。如果不加载头部，您的样式会在页面加载后发生变化，导致无样式内容的闪烁等。除了这样的情况，all JS 应该在结束 body 标记之前，因为 JS 是阻塞的：浏览器将完全停止它正在做的事情和页面的所有渲染，并在继续之前完全运行脚本.脑子里想的太多了，你的用户盯着空白页的时间太长了。

all 脚本（以及 CSS）也应该被缩小。没有充分的理由不这样做，而且用户必须下载的字节数差异通常非常显着。尤其是在当今这个万物皆可移动且数据计划非常有限的时代，每个字节都非常重要。

【讨论】：

假设 JavaScript 被拆分为“模块”，我仍然想知道负责加载的代码如何知道何时使用正确的模块，基于用户所在的区域/页面目前正在观看？
您为您的模块指定依赖项，并且 require.js（或类似的）确保在您的模块运行之前满足这些依赖项。如果您有兴趣，请阅读 requirejs.org/docs/start.html。