网页底部/顶部有JavaScript吗？

73

我只是在Mozilla Firefox中使用插件“ Yslow”，它告诉我应该将JavaScript放在底部。我以前听说过，但并没有考虑太多。与顶部相比，将JavaScript放在网页底部真的有优势吗？

javascript webpage

— 用户
source

如果Javascript位于单独的文件中怎么办？我更喜欢这种方式，只是因为它更易于调试/读取。加载速度更快/更慢吗？

— Mark Kadlec

2

您可以直接从这本书的源代码开始... developer.yahoo.com/performance/rules.html是Yahoo对这种做法的解释。

— 尼克·拉森

1

这些Yahoo性能规则是否仍是最新的？我必须想象，有人发布了一套类似的完整规则（或者雅虎可能发布了更新），其中考虑了过去四年中发生的更改。

— kralco626

1

@kralco我发现这篇文章很有趣。考虑到当今网络的性质。

— 拉法2014年

54

它将允许在执行JavaScript之前明显地加载网页，这对于Google Analytics（分析）之类的东西来说是有意义的，而在页面加载之前不需要发生这种事情。

您可能还需要研究jQuery，prototype等内容，并附加到“就绪”处理程序，该处理程序在DOM完全加载后执行JavaScript代码，这是许多JavaScript代码的适当位置。

— jo
source

这是否意味着通常位于<head> </ head>标记内的JavaScript可以位于页面中<body>标记之后的任何位置？

— 用户

1

是的，<script>标记可以在任何地方，遇到时将执行，因此很有可能用户之前看不见的所有内容（但不能保证）。

— vava

1

您甚至不必将脚本放在html标签中，也可以将其放在底部的外面，并且仍然可以工作……尽管它看起来可能有点有趣。

— 尼克·拉森

1

在主要使用事件驱动的jQuery之前，我随处都添加了脚本标签，如vava和NickLarsen所述。它们几乎可以在HTML中的任何位置，即使在HTML标记之后也是如此。

— wojo

13

@NickLarsen，这没有验证。不好的做法。

— 科里·巴卢

46

假设您不在CDN上运行，或者不在单独的子域或服务器中提供JS，它将同步加载并强制HTML内容等待，直到它下载了文件。通过将JS放在页面底部的结束</body>标记之前，您可以在加载javascript之前解析HTML。 这样可以加快页面加载时间。

— 科里·巴鲁
source

5

如果您有静态的html内容和大量的javascript，则可能会导致页面加载时间有所不同，因为html会首先加载，从而使用户可以查看一些内容。如果您没有太多的javascript，或者现有页面内容依赖于javascript才有用，那么实际上这并不是有用的。

— 布莱恩·莫斯考
source

4

是的，该页面将在加载和执行javascript之前加载内容并呈现内容，因此该页面将加载得更快。

— CodeJoust
source

4

我想对此主题进行更新，Google最近引入了异步摘录http://support.google.com/analytics/bin/answer.py?hl=zh_CN&answer=1008080&rd=1，您可以将其添加到您的网站中，例如谷歌统计支持。它应该放在<head>部分的实现最佳性能。关键是，这增加了在用户离开页面之前发送跟踪信标的可能性。

如果您想使用Google Analytics（分析）在google网站管理员工具中验证您的网站，也应该位于该位置。

除此之外，相同的规则基本上仍然适用-底部的javascript用于“快速”加载页面。我使用引号是因为在javascript完成之前，我不统计页面已完全加载；-)

— MaunoVähä
source

0

它允许所有DOM元素在加载处理它们的Javascript之前完全加载。该标准也是Visual Studio的一部分。

— 乌马尔·阿尔·法鲁克（Umar AlFarooq）
source

0

将脚本放在元素的底部可以提高显示速度，因为脚本编译会降低显示速度。

— Aakriti Kishore
source

0

最佳

当您将JavaScript放在页面顶部时，浏览器将开始在标记，图像和文本之前加载JS文件。而且由于浏览器是同步加载JavaScript的，因此在加载JavaScript时不会加载其他任何内容。因此，在加载JavaScript的同时，会有几秒钟的时间，用户将看到空白页面。

底部

另一方面，如果将JavaScript放在页面底部，则用户将首先看到页面加载，然后JavaScript会在后台加载。因此，例如，如果您的CSS和HTML加载时间为5秒钟，而JavaScript的加载时间为5秒钟，则将我们的JavaScript置于页面顶部将为用户提供10秒钟的“感知”加载时间，然后将其底部的“加载时间”为5秒。

摘自Demian Labs。

— 伊万列翁奇
source

0

是的，包括页面底部的javascript确实可以加快页面的加载。由于浏览器是同步执行，因此如果将其放在页面顶部，则会影响页面加载。如果将其放置在页面底部，那么当浏览器开始加载JavaScript时，该页面将加载整个标记，从而为用户提供更好的体验。

— raj240
source