Question

如果我将JavaScript代码保留在底部，或者将<head>中的JavaScript代码保存在document.ready内，那么它们是否相同？

我对这两种方法感到困惑，http://api.jquery.com/ready/和http://developer.yahoo.com/performance/rules.html#js_bottom。

将JavaScript代码置于底部（就在</body>之前）是否有任何好处，即使我将代码保留在内部。

   $(document).ready(function() {
       // code here
   });

随着JavaScript附加

<head>
    <script type="text/javascript" src="example.js"></script>
</head>

Answer 1

一般情况下，您应该将您的Javascript文件放在HTML文件的底部。

如果您使用的是“经典”<script>标记文件，那就更为重要了。大多数浏览器（甚至现代浏览器）都会阻止UI thread，因此在加载时会阻止HTML markup的渲染过程。执行javascript。

反过来意味着，如果您在页面顶部加载了相当数量的Javascript，则用户将暂停“慢速”加载页面，因为他会在后看到您的整个标记 / strong>所有脚本都已加载并执行。

为了使这个问题更严重，大多数浏览器都会不以并行模式下载javascript文件。如果您有这样的事情：

<script type="javascript" src="/path/file1.js"></script> <script type="javascript" src="/path/file2.js"></script> <script type="javascript" src="/path/file3.js"></script>

您的浏览器

load file1.js

执行file1.js

load file2.js

执行file2.js

load file3.js

执行file3.js

并且在执行此操作时，UI thread和渲染过程都被阻止。

像Chrome这样的浏览器最终开始以并行模式加载脚本文件，这使整个问题不再成为一个问题。

解决该问题的另一种方法是使用dynamic script tag insertion。这基本上意味着您只能在<script>标记上加载一个javascript文件。然后，此（加载程序）脚本动态创建<script>标记并将其插入到标记中。这是同步的，并且更好（在性能方面）。

Answer 2

他们将加载所有相同的内容，以便您能够访问代码。

差异在于感知页面的加载速度。如果javascript是最后一个，它将不会阻止任何试图下载的CSS，它应该始终位于顶部，并且不会阻止任何需要下载的图像。

浏览器只会在HTML中找到项目，但它们只有有限的下载流量（在现代浏览器中约为10），所以如果你对图像/ css和JS做了很多请求，那么丢失和页面页面加载的感知速度/用户体验将受到影响。

Answer 3

它们与构建DOM树时触发的ready事件不同，而页面末尾的脚本实际上可能在之后执行。

无论哪种方式，它们都是应用程序执行的安全入口点。

Answer 4

雅虎！开发者网站说，如果你把JavaScript放在页面底部，它就不会阻止浏览器加载其他资源。这将使页面的初始加载更快。

jQuery指定了一个在加载整个页面时加载的函数。

如果您有一个在页面加载时执行的功能，无论您是将其包含在<head>中还是在页面底部，它都将同时执行。

Answer 5

在决定放置它的位置时，考虑JavaScript在页面上实际执行的操作非常重要。在大多数情况下，加载和运行JavaScript所花费的时间使得将它放在页面末尾更符合逻辑。但是，如果页面呈现本身依赖于Ajax调用或类似情况，则可能不是这种情况。

document.ready()的主题good read不适合所有JS。

Answer 6

如果您使用<script>，document.ready代码的位置不会涉及您的脚本。放在</body>之前，似乎JavaScript收费更快，但我不确定。

Answer 7

即使HTML文档底部的脚本，DOM也可能无法完全加载。脚本上方的所有已关闭元素通常准备就绪，在极端情况下可能需要DOM就绪事件。

如果我将JavaScript保持在底部或将JavaScript保留在document.ready中，那两者都是一样的吗？

7 个答案: