10

可能重复：
页面底部的Javascript？

我在一些 twitter 引导示例中看到了一条评论。它说

JavaScript 放置在文档末尾，因此页面加载速度更快

这是真的？？如果是，那么它是如何工作的？

4

5 回答 5

10

有很多优点

  • 无需检查 DOM 是否已加载，因为通过在末尾添加脚本，您可以确定它已加载。
  • JavaScript 脚本文件必须在 Web 浏览器甚至开始下一个 JavaScript 文件之前完全加载。这样做的效果是，如果 JavaScript 文件包含在文档的顶部，那么在最终用户看到实际页面之前会出现视觉延迟。如果您在文档末尾包含 JavaScript 文件，则可以完全避免这种情况。

也有一些限制

虽然在底部包含 JavaScript 文件可以帮助我们解决延迟页面渲染的问题，从而给人一种网站中每个页面加载速度更快的印象，但它确实有一个缺点。

  • 如果页面对最终用户可见，但 JavaScript 文件尚未完成加载，则尚未对元素应用任何事件（因为每个人都使用不引人注目的方法，对吗？）并且用户可能会开始四处点击而不是得到预期的结果。

  • 如果您有适当的后备，例如，如果支持 JavaScript 并且应用了适当的事件，则链接元素通过 AJAX 获取内容，否则它是通向另一个页面的正常链接，那么问题还不错。不过还是有点烦。

有用的文章在这里

于 2013-01-27T12:01:00.573 回答
5

如果浏览器遇到<script>标签，HTMLRenderer将默认停止，ECMAscript 解析器将完成其工作。HTMLRenderer将不会继续，直到所有的 Javascript 代码都被完全评估。

因此，如果您的“上部<script>”HTML 代码中有很多标签和大量 Javascript 代码，您网站的浏览者可能会意识到加载过程很慢。

有几种方法可以避免这个问题。第一个是，正如您所提到的，只需将所有 Javascript 代码和标签放在元素<script>的最底部。<body>这可确保至少所有HTML 标记和样式表定义都已完全加载。

另一个选项是元素本身的标签名称。<script>例如，async并且defer将向浏览器/ JS 解析器指示不需要立即加载和评估此填充。例如

<script async defer src="/foo/bar.js"></script>

HTML Renderer将实现标签并将其存储到队列中，但不会直接停止和评估。

于 2013-01-27T11:59:08.483 回答
3

大多数浏览器执行 JavaScript 并使用同一线程加载页面。因此，当 JavaScript 正在执行时，页面无法加载。因此，如果您的页面包含大量图像或嵌入的内容，这些资产将在 JavaScript 完成执行之前开始加载。

这就是建议将长时间运行的同步代码放在文档末尾的原因，或者将其推迟到页面加载或 DOM 内容加载时加载。然而，现代浏览器通常会通知用户长时间运行的阻塞脚本，并允许他们在需要时终止脚本。

于 2013-01-27T12:00:05.287 回答
1

与将它们放在页面末尾一样重要的是，使用 HTML5属性将它们指定为异步。async这将确保解析器不会停止并解析它们，而是继续页面加载流程并并行下载/解析 JS。

http://davidwalsh.name/html5-async

于 2013-01-27T12:02:08.560 回答
0

该概念背后的逻辑是，由于浏览器动态呈现您的代码，通过将所有 html 元素放在脚本之前，理论上它可以比您首先拥有脚本更快地加载，假设您有大量的脚本要处理和。

然而在实践中，没有人会遇到这样一种情况，即需要如此多的脚本时间，以至于它会影响网站的加载时间，而不是像 D/L 带宽这样更紧迫的瓶颈。

于 2013-01-27T12:04:25.290 回答