Fatal编程技术网
  • javascript/
  • Javascript 将脚本包含在页面主体而不是head元素中有哪些缺点/问题？

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

javascript

Javascript 将脚本包含在页面主体而不是head元素中有哪些缺点/问题？,javascript,Javascript,关于将javascript放在元素中与放在close body标记（）前面的利弊，已经发布了一篇文章 然而，我有时看到开发人员将JavaScript代码放在HTML页面的任意位置。这似乎主要是因为懒惰。在页面的任意位置嵌入JavaScript代码的缺点是什么？有许多明显的缺点，例如没有缓存、重用较少等。在这方面，您还能想到哪些其他缺点 感谢asdvance。对我来说，最明显的缺点是，如果它是一个框架，那么只有在下载并解析之后才能访问成员。考虑下面的场景： <html> <h

关于将javascript放在
元素中与放在close body标记（
）前面的利弊，已经发布了一篇文章

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

感谢asdvance。

对我来说，最明显的缺点是，如果它是一个框架，那么只有在下载并解析之后才能访问成员。考虑下面的场景：

<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>


$（document）.ready（函数（）{/*…*/}）；
当然，您会得到一个“$未定义”错误。依赖于该脚本的所有代码都必须按执行顺序跟随它（除非使用计时器、延迟属性或window.onload事件）

就我所见，缺点大于缺点。

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

当然，可能有很好的理由。例如，如果脚本使用
document.write
将HTML输出到页面（就像许多广告脚本一样），那么当然它必须位于HTML必须到达的位置。类似地，如果你的UI中有一个按钮，并且你正在将一个处理程序连接到调用脚本的按钮，如果脚本在页面的较低位置，那么在脚本处理单击之前，用户可能有机会单击按钮，要么什么都不做，要么出错，这两种情况都会对用户体验产生负面影响

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

这都是一个速度/感知速度参数。从关注点分离的角度来看，确保所有JavaScript都在不同的文件中（至少，独立的源文件；您可以有一个构建过程，将JavaScript合并到HTML中，生成一个输出文件，在不违反关注点分离的情况下为用户提供服务；但是如果您在多个页面上使用JavaScript，则无法获得JavaScript缓存）。一旦你有了一个单独的JavaScript文件，你就必须在某个地方链接到脚本，我认为这与分离关注点的观点没有太大区别，只要你的HTML源代码中没有脚本元素


编辑：另请参见引用Google关于用于连接UI的内联脚本块的值。我想引用它，但找不到；他引用了。这很痛苦，因为（除非您使用构建脚本执行此操作）这真的搞砸了关注点的分离。从好的方面来说，使用标记和构建脚本应该没有那么难…
这与创建CSS的原理相同。通过使用HTML样式表分离表示和标记，功能和标记应该通过包含javascript外部来分离而不是与HTML元素内联

另外，更少的代码重写。说真的，谁想写呢


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


请阅读以下内容：



简短的故事是我们不想
等待DOMContentReady（或更糟）
加载事件），因为它会导致坏消息
用户体验。用户界面不可用
响应，直到所有DOM都已恢复
从网络加载。所以
首选的方法是使用内联脚本
尽快


/div>
initWidget（document.getElementById（'my-widget'）；


是的，这并不容易
维护，但它会带来更好的用户
通过故意离开
我们有现成的包装纸
已经能够阻止谷歌应用程序
使用此反模式

这是：


+1.将脚本放在页面底部可以通过提高感知性能来改善用户体验。+1我正在寻找该引用，但找不到它。：-）我记得当时很惊讶，这在跨浏览器上运行得很可靠，但如果谷歌应用程序的人说它可以，我很肯定我相信它。@T.J.克劳德……我还在等他们（埃里克·阿维德森和朋友们？）将要发布的那篇文章。：-）是的，人们会很忙。；-）这样做确实意味着需要一个构建工具或一些预处理发布构建文件的东西，不是吗？你最不想做的就是让你的设计师在他们的HTML中加入这些东西。。。

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



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