Question

这两个片段是否有任何区别：

在HTML // where should we write the script anyways, is it inside body tag or just after body tag.

的末尾编写此代码段

<script type="text/javascript">
insertNavigation(); // any arbitrary method
</script>

或者在HTML结尾处编写此代码段

<script type="text/javascript">
if (window.addEventListener){   
    window.addEventListener('load', insertNavigation, false);   
} else if (window.attachEvent){ 
    window.attachEvent('onload', insertNavigation );    
}
</script>

两个片段的输出是否相同？如果是，那么应遵循哪种方法。如果没有，那怎么样？

Answer 1

有什么不同吗？

如果它位于文档的最末端，那么在大多数情况下，它们将是相同的。第一种方法的问题是它在遇到它时立即运行，文档等待它完成。

脚本应放在哪里？

general recommendation是它们位于文档的末尾，位于正文中。该规范不允许除head和body之外的任何内容直接位于html标记内。

这个建议的原因是，因为几乎所有的javascript都将在文档加载完毕后运行，所以直到最后都没有加载点。如果你把它放在文档的开头，在头部，那么浏览器必须先下载所有脚本，然后才能访问内容，这意味着用户必须坐在空白页面上稍长一点。

<强>建议：

如果你现在使用任何常见的javascript工具包/库，他们通常会有自己的构造，用于指定在页面准备好后运行的代码。例如，在jQuery中，就是这样：

$(function() {  /* code here */ });

此外，在服务器端使用javascript打包/缩小，缓存和gzipping将最大限度地减少将脚本放在通常放置的头部的负面影响。尽管如此，最后还是没有伤害它。

Answer 2

存在一个主要区别，插入<script>标记的代码会阻止浏览器呈现，直到执行代码，而使用加载甚至浏览器都会渲染所有内容并执行代码，这是更好的恕我直言。

如果您需要的所有DOM元素都可以访问，那么您也不会使用第一种方法，使用load方法可以确保您可以安全地操作DOM。

在构建非侵入性javascript方面，第二种方法更好，因为它可以在任何地方工作，脚本应该依赖id等插入一些内容。

以下javascript片段有什么区别吗？

2 个答案: