Question

在具有大量HTML页面的ASP.NET Web应用程序中，许多内联JavaScript函数正在积累。将它们组织成外部文件的好计划是什么？大多数函数特定于编写它们的页面，但有一些与整个应用程序相关。

单个文件可能会变得非常大。使用C＃等，我通常将文件至少划分为包含一般函数和类的文件，以便我可以将同一文件用于其他应用程序，并将一个文件用于特定于此应用程序的函数和类。但是，我不认为大文件对Web应用程序的性能有好处。

这方面的想法是什么？

Answer 1

您可能希望每个页面在一个位置具有特定于页面的JavaScript，然后在大文件中包含所有共享JavaScript。如果SRC是大文件，那么用户的浏览器将在第一次加载时缓存JavaScript代码，文件大小不会成为问题。如果您特别担心，可以将JavaScript源打包/缩小为“可分发”形式，并节省几千字节。

Answer 2

单个文件很大但是已缓存。太多的小文件意味着对服务器的请求越多。这是一种平衡的行为。使用Firebug和YSlow等工具来衡量您的表现并找出最适合您应用的内容。

Answer 3

每个请求的开销都有一些，所以总的来说，通过将它们全部组合到一个文件中，可以提高性能。但是，它可能会降低用户访问的第一页上的加载时间，如果某些用户从不需要您的某些部分，则可能会导致无用流量。

但是，第一个问题并不是那么成问题。如果您有一个注册页面，每个人都先访问并花费一些时间（填写表格等），一旦加载html，页面将显示，并且js可以在后台加载，而用户是无论如何都忙于表格。

我会在开发期间将js组织成不同的文件，i。即一个用于一般内容，一个用于每个模型，然后在构建过程中将它们组合成一个文件。此时你也应该compression。

Answer 4

更新：我在a blog post中深入解释了这一点。

当您指出“HTML页面”时，假设您的意思是.aspx页面，我就是这样做的：

假设我有一个名为foo.aspx的页面，我有特定于它的JavaScript。我将.js文件命名为foo.aspx.js.然后我在基础页面类中使用类似的东西（即我的所有页面都继承自此类）：

protected override void OnLoad(EventArgs e)
{
   base.OnLoad(e);
   string possiblePageSpecificJavaScriptFile = string.Format("{0}.js", this.TemplateControl.AppRelativeVirtualPath);
   if (File.Exists(Server.MapPath(possiblePageSpecificJavaScriptFile)) == true)
   {
      string absolutePath = possiblePageSpecificJavaScriptFile.Replace("~", Request.ApplicationPath);
      absolutePath = string.Format("/{0}", absolutePath.TrimStart('/'));
      Page.ClientScript.RegisterClientScriptInclude(absolutePath, absolutePath);
   }
}

因此，对于我的应用程序中的每个页面，这将查找与页面名称匹配的* .aspx.js文件（在我们的示例中为foo.aspx.js）并在呈现的页面中放置一个脚本标记引用它。（base.OnLoad(e);之后的代码最好被提取出来，我只是想尽可能地缩短它！）

要完成此操作，我有一个注册表黑客，会导致任何* .aspx.js文件在Visual Studio的解决方案资源管理器中的* .aspx页面下崩溃（即它将隐藏在页面下方，就像* .aspx.cs文件确实）。根据您使用的Visual Studio的版本，注册表黑客是不同的。以下是我与 Windows XP 一起使用的一对（我不知道它们是否因为我不使用Vista而与Vista不同） - 将每个文件复制到一个文本文件中并用一个文件重命名。 reg扩展，然后执行文件：

Visual Studio 2005

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""

Visual Studio 2008

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""

在生效之前，您可能需要重新启动计算机。此外，嵌套仅适用于新添加的.js文件，任何已经命名为* .aspx.js的文件都可以通过将它们重新添加到项目或手动修改.csproj文件的XML来嵌套。

无论如何，这就是我做事的方式，它确实有助于保持井井有条。对于包含常用JavaScript的JavaScript文件，我将它们保存在一个名为JavaScript的根级文件夹中，并在我的基页类中添加一些代码来添加这些引用。这应该很简单，可以搞清楚。希望这有助于某人。

Answer 5

它还取决于用户会话的生命周期。如果用户可能会访问多个页面并在网站上花费很长时间，那么单个大文件在缓存时可能值得初始加载。如果用户更有可能来自谷歌并且只打一个页面，那么最好每页都有单独的文件。

Answer 6

将“命名空间”与文件夹结构一起使用：

alt text http://www.roosteronacid.com/js.jpg

您需要做的就是包含 Base.js ，因为该文件会设置所有命名空间。以及要在给定页面上使用的 .js 文件（类）。

就特定于页面的脚本而言，我通常根据ASPX / HTML页面命名脚本：

Default.aspx
Default.aspx.js

Answer 7

我建议如果将JS拆分成单独的文件，不要使用大量标记来包含它们，那将会破坏页面加载性能。相反，使用服务器端包含在它们离开服务器之前内联它们。

组织外部JavaScript文件的好方法是什么？

7 个答案:

Visual Studio 2005

Visual Studio 2008