在 asp.net 网站上是否可以在结束正文标记之前放置 javascript？答案

【问题标题】：Is putting the javascript before the closing body tag okay on an asp.net website?在 asp.net 网站上是否可以在结束正文标记之前放置 javascript？
【发布时间】：2012-11-03 13:02:58
【问题描述】：

我几乎说出了我要问的问题。但是，在 asp.net 网站上是否可以将所有外部 .js 文件放在 before 母版页上的结束正文标记之前？

我只是想摆脱 yslow 和 google speed 的表现。我无法组合这些 javascript，因此我尝试在“页面加载后”加载它们，但这样做会使它们毫无用处； 我的一些 jquery 东西不起作用。

我将我的 .js 文件移到了开始的 body 标记上方，它们可以工作了。我究竟做错了什么？我可以做些什么来加载我的 .js 文件页面加载后？感谢任何人可以提供的任何建议！

【问题讨论】：

你有什么理由不能把它们放在头上吗？您需要在需要它们之前放置它们。如果你的正文中间或头部有 jQuery/Javascript 代码，你不能只在后面包含外部文件。 HTML 是从上到下解析的，因此您的 Javascript 将在读取后立即执行。
这真的取决于这些文件的内容是什么。如果它们是一堆直到稍后才会调用的实用函数，那么无论如何，将它们放在主体的末尾。但是，如果您的头部/主体中有直接调用外部文件中的某些内容的内联代码，则需要将该文件放在您的内联代码之前。你总是可以以某种方式重构你的代码，但这就是它的方式。
谢谢@Ian！我想我开始学习一点关于 Javascript 的知识……感谢您的 cmets 和其他 cmets。感谢您抽出宝贵时间回复！

标签： javascript asp.net performance

【解决方案1】：

“在 asp.net 网站上是否可以将 javascript 放在结束正文标记之前？”

简短的回答。是的。

长答案。这取决于javascript。

有些事情在页面加载后可能无法正常工作，因为正如所写的那样，它们只是需要在 DOMReady 或之前加载某些资源，随后的逻辑可能依赖于此。也就是说，如果您有任何在 DOMReady 上添加图像的 jQuery，然后需要处理这些图像，获取它们的高度或其他什么，您可能会在页面加载时运行一些代码（在加载图像之后）。如果页面已已加载，则此策略不起作用。 onload 不会触发两次，IIRC。

一定要这样写吗？不，最好编写一些仅在验证已加载每个图像（或任何其他资源）之后运行的代码，如果您考虑到正确的代码 sn-ps，这通常很容易，但是这也不是微不足道的。

“我做错了什么？页面加载后我该怎么做才能加载我的 .js 文件？”

有很多方法可以“错误”地做事，我敢打赌，一个人可能会写一整章各种检查，但仍不能涵盖所有情况。我这样说并不是要阻止您尝试重写以便在页面加载后加载它们，因为我认为涵盖 common 情况很容易——我只是不相信自己准确地列出我脑海中最常见的情况。

【讨论】：

哇，@JayC，你给了我很多思考......我想我必须做更多的研究，并像你（和其他人）一样受过教育......你'虽然是对的......一些jquery东西在根文件夹上完美运行，然后当你进入子文件夹（例如，ussvision.com然后ussvision.com/services/然后ussvision.com/services/cognex......即便如此，ussvision.com/services/cognex/more/cognex.aspx ......即使我将额外的 ../ 添加到每个 .js 文件中，它也会变得令人困惑。嘿，我真的很感谢你花时间阅读和回答我的问题！非常感谢！

【解决方案2】：

即使在 asp.net 网站中，也可以将 js 文件放在结束 body 标记之前，这通常被认为是最佳实践。但是，母版页可能会有点烦人/棘手/混乱。

从好的方面来说，您只需引用 jquery（或其他）一次即可。但是，如果您在正文的控件/部分中使用 javascript/jquery，它将在加载母版页上的文件之前执行。

您可以采取一些措施来应对这些竞争状况...

将您的 javascript 包装在 window.onload = function() { /*your code*/ } 中。这将等到页面完成加载（图像、外部文件等）后才被调用。

我的选择（在 asp.net MVC 上工作）是使用 RenderSection()。 Details here。 Webforms 中可能有等价物，也许有人可以插话。

【讨论】：

好建议...除了在 可重用 javascript 文件中使用 window.onload = function() { /*your code*/ }. 没有很好的理由，尤其是在使用 jQuery 时，并且鉴于 jQuery 为您提供了一种常见的方法来通过$(window).load(function () { /*your code*/ });添加多个事件处理程序。
你是对的。我本来可以更清楚的。我想象的用例是在控件/部分中包含 js 代码（包装在脚本标签中）。在这种情况下，jquery 甚至不会被加载，$ 将是未定义的。我希望永远不会把它放在一个外部的、可重用的文件中:)
感谢您提供的信息，@brains911！我到了那里......还没有，但我只想在加载页面时尽量减少http请求的数量。感谢您的建议，并且已经将您的链接添加到我最喜欢的...谢谢！
很高兴我能帮上忙。如果您希望减少 http 请求，我使用了 Combres，它似乎在合并/最小化外部文件方面效果很好。

【解决方案3】：

正如他们在 cmets 中所说，JavaScript 从上到下加载。因此，如果在您的身体中调用您在脚本中定义的函数，该函数在以后加载，您可能/将会遇到错误。您可能想要做的是将这些脚本（位于正文中间的那些）移动到它自己的文件中，并用准备好的文档保护将它们包围。

$(document).ready(function () {
  //Your code in here
});

这将保证在文档 dom 准备好之后执行代码。还要确保在您的库和依赖项之后添加此文档。

这也将使您的 JavaScript 更易于维护。

【讨论】：

我相信如果 jquery 也在页面底部 doc ready 将会失败，因为 $ 将是未定义的。
是的，你是对的。这就是为什么我提到要在库之后而不是之前添加这个文档。
对不起，我错过了。我的错。
谢谢你，@theprogrammer！我不完全确定你的意思，但我知道我会弄明白的——这听起来对我来说是个很好的建议。我的意思是说，一些 .js 文件可以移动到结束 body 标记的正上方，但其他文件则不能……仅取决于 javascript，我对此一无所知！呵呵....我一直在使用 .jscompress --- jscompress.com -- 来减小文件大小，但是你和其他人给了我足够的知识，我认为我知道我应该做什么。感谢您抽出宝贵时间回答我的问题！
不客气。我知道你不能向下移动的唯一库是modernizr和其他一些检测或添加功能到dom的shims库。其他任何东西都应该可以移动到文件的底部。干杯。