什么时候你把Javascript放在body里，什么时候在头，什么时候用doc.load？

可能重复：
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?什么时候你把Javascript放在body里，什么时候在头，什么时候用doc.load？

我一直在想，这主要是因为在创建页面时，我总是遇到麻烦，基于以下的事情：

你什么时候写你的javascript

在<head>
在<body>
与$(document).ready()

我可能是愚蠢的，但是当我的JavaScript（/ jQuery的）是不是因为执行我也曾有过几次错误的地方或是或不是doc.ready()命令。所以我真的很想。

同去的jQuery和“变种”命令

来源

2013-01-14 Sander Schaeffer

那么'var'是一件事情，是严重不像其他人... – Pointy

请参阅[这个答案]（http://stackoverflow.com/a/10661977/575527） – Joseph

要尖，我见过[var ]也写在头部和身体，所以我想知道是否有任何分歧。 Mark Schultheiss，我问的是差异，而不是一段文字应该在头还是身体。这有点不同。谢谢，不过。 –

$(document).ready()只是确保加载你的JavaScript之前，所有的DOM元素被加载。

当不要紧

无需等待该事件，火灾，你可能最终操纵DOM元素或样式尚未在页面上存在。 DOM就绪事件还允许您更灵活地在页面的不同部分上运行脚本。例如：

<div id="map"></div> 
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

将运行，因为地图div已在脚本运行之前加载。实际上，通过将脚本放置在页面的底部，您可以获得一些pretty good performance improvements。

当事情确实

但是，如果要加载在<head>元素脚本，大部分的DOM还没有加载。此示例不起作用：

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script> 
<div id="map"></div>

不会，因为地图div尚未加载。

一个安全的解决方案

您可以通过避免这个只需等到整个DOM加载：

<script type="text/javascript">$(document).ready(function() { 
    document.getElementById('map').style.opacity = 0; 
}); 
</script> 
<div id="map"></div>

有很多articles解释这一点，还有jQuery documentation本身。

来源

2013-01-14 23:09:32 Kyle

在外部样式表中加载它在哪里下降？ – Hashim

通过现代的“最佳实践”，是这样的：

在<head>认沽脚本时的页面开始被渲染，才应该发生。示例是HTML 5 Shim库或Modernizr之类的东西。
当对脚本的导入方式进行有限控制时，将脚本放入“就绪”处理程序中。像可以包含在页面中的实用程序一样，不显眼地添加功能通常使用“准备好”的处理程序，因为它们无法确定它们将如何使用。
如果在其他所有情况下都可以避开它，请将脚本放在<body>的末尾。

有时候最终会出现页面中的依赖关系，这些页面中需要的东西是否需要加载到body元素的末尾。这是一种不可取的情况，但是如果您无法避免，可能会强制脚本在<head>中加载，而不是在<body>的末尾加载。

在文档的末尾加载内容是件好事，因为浏览器在加载内容时会评估<script>标签的内容。（有一些“现代”的方法可以避免这种情况，但这种方式正在进入更加复杂的领域。）

何时使用“就绪”处理程序（或“加载”处理程序，就此而言）的决定稍有不同比关于在哪里放置<script>标签的决定。如果您从服务器端模板系统获取页面内部小部件（不合意，但您能做什么？），例如，jQuery引用，则需要在页面顶部导入jQuery，即使其他代码可以将初始化推迟到“就绪”处理程序。也就是说，关于何时使用“准备就绪”的决定与您的脚本是否愿意在正确的点上依靠被导入到页面中有关，或者如果它想要确保正确的事情发生而不管在哪里其<script>标签被放置。

来源

2013-01-14 23:09:40 Pointy

这是你何时需要执行代码的问题。

如果您要操纵DOM树（例如移动元素/ show-hide等），并且将代码放在文档的头部，那么执行代码时您的元素将不会存在，因此您的代码代码将无法使用。

在这种情况下，你可以把你的代码在文档的头部和调用它在文档DOM准备就绪，与$(document).ready()

在文档的末尾把代码很少是必要的，有一次我可以想到的是谷歌加+1按钮，这需要你在最后的+1按钮之后放置一个脚本，所以你只需将它粘贴到文档的末尾以确保。

来源

2013-01-14 23:11:33 ppp

我订阅了这种方法。我知道“现代”的方法是将JS文件放在主体的末尾。但除非性能是关键任务，或者期望用户使用传统硬件/软件，否则将您的JS文件放在首位是没有问题的。实际上，用户可能甚至没有注意到任何性能差异。对于维护和清洁，我更愿意将JS文件保存在头部或将它们异步加载到头部。但是，如果页面只使用vanilla JS，我可能会将JS文件加载到主体的末尾。 – user3621633

什么时候你把Javascript放在body里，什么时候在头，什么时候用doc.load？

回答

相关问题