元素后的 HTML 脚本标签答案

【问题标题】：Html script tags after elements元素后的 HTML 脚本标签
【发布时间】：2013-05-16 09:41:33
【问题描述】：

假设我有一段带有内联 javascript 的 html，如下所示：

<div id="myDiv">
</div>

<script type="text/javascript">
    var myElement = document.getElementById("myDiv");
    if(!myElement)
        throw "Invalid";
<script>

<div /> ...and so on

所以我有一个被 div 标签包围的脚本标签，脚本在它之前声明的 div 上运行。

这是一种浏览器安全/HTML 标准的处理方式吗？

【问题讨论】：

以防万一...<div /> 不是有效标记
内联 javascript 不是一个好习惯，只能在我认为有充分理由的情况下使用，但我认为您的代码不会失败。

标签： javascript html browser

【解决方案1】：

这是一种浏览器安全/HTML 标准的处理方式吗？

这是安全的，是的。甚至是advocated by the Google Closure library engineers。

更标准的方法是将所有脚本放在页面的最底部，就在结束 </body> 标记之前，如 advocated by the YUI folks。

在它们作用的元素之后立即将它们放入会导致在您的内容标记中散布许多小的 script 标签，这并不理想（尤其是在标记/内容团队和脚本团队很可能完全分开）。

相反，将所有脚本放在最底部会导致简而言之，您可以在页面上放置用户可以点击的内容（比如说），您打算在哪里处理该点击在代码中，但用户设法在代码连接点击事件处理程序之前到达那里。这是一个很小的机会之窗，但它就在那里。为了解决这个问题，你有几个选择来减轻它：

渐进式增强，即使脚本没有钩住它，点击也会做一些有用的事情，或者
页面顶部的一个小内联脚本（不是单独的文件）与document.body 上的相关事件挂钩（假设它是一个冒泡事件），该小脚本要么将点击排队，然后分发当主代码到达时，或者（这不太好）显示“只需一秒钟，我们仍在加载”之类的消息。

您不做过去的标准做法是完全正确的，将您的脚本放在head 中并依赖“就绪”样式事件。如果您控制脚本的去向，则无论如何都不需要这样做。

【讨论】：

很好的解释。我不知道标准方法是远离head。
非常详细的答案。谢谢
@KevinBowersox：谢谢。是的，这是一个缓慢的过程，但我们越早将内容呈现在用户面前，他们对性能的感知就越好。下载脚本等需要时间。（不是很多时间，而是时间。）我认为，YUI 团队在这方面具有开创性，其口号是：“样式、内容、脚本”。当然，如果你的东西是一个网络应用程序，而不是一个网络页面，你最好使用某种“加载”窗口让用户等到一切准备就绪。 :-)

【解决方案2】：

通常，如果您依赖文档中的元素，您将在页面底部包含所有脚本（就在</body> 之前）。这具有不阻塞页面呈现的额外好处。

阅读更多关于它的信息here。

【讨论】：

没错，在很多情况下，但通常更重要的是，将功能片段分离到包含标记和对其进行操作的逻辑的孤立模板中

【解决方案3】：

最好在文档末尾插入脚本

【讨论】：

没错，在很多情况下，但通常更重要的是，将功能片段分离到包含标记和对其进行操作的逻辑的孤立模板中