Question

已经发布entry关于将javascript放入<head>元素与关闭正文标记（</body>）之前的优缺点。

但是我看到有时开发人员会将JavaScript代码放在HTML页面的任意位置。这似乎主要是由于懒惰。在页面的任意位置嵌入JavaScript代码有什么缺点？存在许多明显的缺点，例如没有缓存，重用次数较少等。在这方面您还能想到其他哪些缺点？

感谢asdvance。

Answer 1

阅读本文：

http://groups.google.com/group/closure-library-discuss/browse_thread/thread/1beecbb5d6afcb41?hl=en&pli=1

短篇小说是我们不想要的等待DOMContentReady（或者更糟负载事件）因为它导致坏用户体验。用户界面不是响应直到所有DOM都已存在从网络加载。所以首选方法是使用内联脚本尽快地。

<div id="my-widget">&lt;/div>  
<script>  
    initWidget(document.getElementById('my-widget'));  
</script>

是的，这并不容易保持，但它会带来更好的用户经验。通过故意离开我们有DOMContentReady包装器能够阻止Google Apps 使用这种反模式。

而且：

Using DOMContentReady considered anti-pattern by Google

Answer 2

无论何时在页面中放置script元素，无论它在何处，除非您使用defer or async attributes并且访问者使用的浏览器支持它们，否则所有HTML解析都会完全停止并将控制权交给JavaScript解释器（如果脚本位于单独的文件中，则等待脚本文件下载）。这可以阻止页面的呈现。因此，除非您有充分的理由将脚本标记放在其他位置，否则将脚本标记放在页面的最底部将改善其明显的加载时间。

当然，有充分的理由。例如，如果脚本使用document.write将HTML输出到页面（就像许多广告脚本一样），那么当然它必须位于HTML所必需的位置走。类似地，如果您的UI中有一个按钮，并且您正在将一个处理程序连接到调用您的脚本的该按钮，如果该脚本在页面中向下，则可能有一个机会窗口供用户单击该按钮在您的脚本处理点击之前，无论是什么都不做或者出错，这两者都会对用户体验产生负面影响。

如果您的页面完全正常运行而没有任何脚本（大多数通用网站的良好做法），脚本只是增强了体验，请将脚本放在底部。如果脚本对您站点的功能至关重要（对于某些站点来说是完全可以接受的做法，当然对于许多基于Web的应用程序而言），最好让您的构建过程将所有自定义JavaScript组合到一个文件中，缩小它并链接它在head中，以便您尽可能简短地处理。（如果您的脚本依赖于库，您可以单独从CDN加载它们，或者将它们添加到您的自定义代码中，具体取决于您对用户的评估速度更快。）

这都是速度/感知速度的论点。从关注点分离的角度来看，确保所有JavaScript都在单独的文件中（至少是单独的源文件;您可以使用构建过程将JavaScript合并到HTML中以生成输出文件在不违反关注点的情况下为用户提供服务;但如果您在多个页面上使用它，则无法获得JavaScript的缓存）。一旦你有一个单独的JavaScript文件，你将不得不链接到某个地方的脚本，我不认为它真的与关注点分离其中< / em>只要您没有遍布HTML源的脚本元素。

修改：另请参阅David Murdoch's answer引用Google，了解内联脚本块的值，以便连接UI。我想引用它但却找不到它;他做到了。这是一种痛苦，因为（除非你使用构建脚本执行此操作），它真的会让关注点分离。从好的方面来说，使用标签和构建脚本不应该那么难......

Answer 3

对我来说最明显的缺点是，如果它是一个框架，成员在下载和解析之后才能访问。请考虑以下情形：

<html>
  <head>
    <script type="text/javascript">
       $(document).ready(function () { /* ... */ });
    </script>
  </head>
  <body>
    <!-- rest of content -->
    <script type="text/javascript" src="jquery.1.4.2.min.js"></script>
  </body>
</html>

当然，您会收到“$ is undefined”错误。依赖于该脚本的所有代码必须按执行顺序执行（除非您使用计时器，defer属性或window.onload事件）。

就我所见，超过了缺点。

Answer 4

这与创建CSS的原理相同。在使用带有HTML的样式表分隔表示和标记的方式中，应该通过在外部包含javascript来分隔功能和标记，而不是与HTML元素内联。

此外，更少的代码重写。说真的，谁想写？

<input type="text" onfocus="$(this).css('background', 'yellow');" />

每个输入元素何时更容易编写所有该功能一次？

$('input[type="text"]')
    .focus(function() { $(this).css('background', 'yellow'); })
    .blur(function() { $(this).css('background', 'white'); });

在页面主体中而不是在head元素中包含脚本有哪些缺点/问题？

4 个答案: