javascript - 将JS文件放在网页底部实际上好吗？

Question

广泛建议将 JS 文件放在页面底部，以便首先加载 html 代码。在这种情况下，访问者在等待页面完全加载时会看到一些东西。但是，我认为这是不利的，原因如下：

现代设计主要依赖于JS。这意味着在加载 JS 之前，页面会看起来很丑。
如果在加载过程中中断连接（根本不加载 JS），访问者会错过一些网站功能（可能非常重要）；他们不会明白这是加载的问题（重新加载页面）。
如果服务器端脚本die（由于错误）位于脚注之前的脚本末尾（例如在 PHP 中），访问者将错过整个页面的功能（通过 JS）；但是如果在顶部加载 JS，它们只会错过页脚或页面的一半。
如果先加载 JS，浏览器会并行加载其他东西（比如图片）；但如果最后加载 JS，可能会增加加载时间。因为 JS 文件很大（例如 JQuery 和 JQuery UI），并且所有小东西（如图像）都已加载，我们正在加载一个大文件，排在最后。

更新： 5. 由于 jQuery 库应该在代码之前加载；如果在页脚（例如 footer.php）中加载 jQuery 库，则不能为不同的页面（在正文内）添加自定义 jquery 代码。

如果我错了，请纠正我！将 JS 文件放在页脚仍然有益吗？

score 4 · Accepted Answer

标头中的脚本标记会阻止所有其他请求。如果你有 10 个这样的标签：

<script src="http://images.apple.com/home/scripts/promotracker.js"></script>

...它们将按顺序执行。不会同时下载其他文件。因此，它们增加了页面加载时间。

在此处查看 HeadJS作为示例解决方案。

score 4 · Accepted Answer

编辑：我补充一点，以回应我在人们耳中看到的关于这个话题的棉花。

补充点#5。如果你非常关心 JS-fail 上的处理行为，我的意思是，人们关闭了 JS 浏览，你应该做的是接受渐进增强的概念。例如，您可以设计一个手风琴菜单，默认情况下充当悬浮菜单，是的，仅使用 CSS，然后在启用 JS 时通过更改键类来删除该行为。这样，如果用户应该将其关闭，则用户可以在没有 JS 的情况下访问链接，但在 JS 工作时他们会获得增强的行为。

但是你不应该试图处理的是页面上没有整个 JS 文件，因为页面在后端被破坏了。处理意外是一回事，但在提供 HTML 文件之前处理未能完成构建的问题不应被视为生产中可接受的场景，尤其是如果您的模板语言中有实际的后端代码（您不应该这样做）等待溢出并给潜在的黑客一些可能有趣的东西。损坏的页面应作为错误消息。

=================================

大错特错。每当您使用 JS 来调整页面的初始静态外观时，您都做错了。保持关注点分离，您的页面将更加灵活。使用 JS 来调整页面的 STATIC 样式不是现代的，它是低级的，你可以告诉 jQuery mobile 的人我说了这么多。如果您绝对必须支持 IE6 和 IE7 以及 IE8，请告诉您的客户，如果他们拒绝接受任何替代绝对优雅降级的 5% 客户，他们将花费多少成本来切割整个地方的圆形渐变角 -根据。
如果你的页面，事先没有 JS，加载时间很长，那么你还有其他问题需要解决。你加载了多少资源？您的 PHP 进行了哪些不敬虔的预处理？我打电话给后端或设计恶作剧。
你是说半个页面有工作的 JS 是可以接受的，而不是完全不可接受的？不要放过那个客户，不管他们是谁。
jQuery，当最小化时大约是一个中等大小的 JPEG 大小。

注意：将一些 JS 放在顶部并不是完全不可接受的。一些专门的代码，如分析东西或画布规范器需要它。但任何不需要的都应该在底部。每次解析 JS 时，整个页面加载和流量计算过程都会停滞不前。将您的 JS 推到底部可以改善感知的页面加载时间，并且还应该提供证据证明您的团队中的某个人需要快速解决问题，以找出他们的代码为什么会出现问题或者可以用他们的 25 兆字节 png-24s 做什么他们只是缩小而不是重新格式化。

score 2 · Accepted Answer

您需要考虑“在执行一些 javascript 之前是否需要准备好 DOM”。基本上你把脚本标签放在页面底部，基本上保证 DOM 已经准备好了。如果您在标题中链接您的样式，并正确设置页面样式，您不应该得到“丑陋”。其次，如果您依赖页面的某些部分来使用 javascript 显示来处理 DOM 对象，我也会使用更多的 ajax 调用来防止这个问题。两全其美的。页面加载了您可以加载的内容，然后 ajax 调用正在获取 html 以填充页面的其他部分。

score 2 · Accepted Answer

推荐将JS放在页面底部或异步加载的原因是JS会减慢页面加载速度。

如果某些下载 JS 的浏览器阻止了其他并行下载，并且在所有执行 JS 的浏览器中阻止了 UI 线程并因此进行渲染（在某些情况下也解析块）。

将其置于底部或异步加载会尝试延迟问题，直到它对访问者页面加载体验的影响较小。

不要忘记，无论您的页面多么漂亮，加载时间是否太长人们都不会等待，而 2 /3 秒是它开始引起问题的地方。

现代设计对 JS 的依赖可能比它曾经拥有的要少 - 是的，我们仍然需要 polyfill，但是随着浏览器变得更好，我们可以用 CSS 做更多的事情
这对于 Backbone.js 应用程序之类的应用程序来说可能是正确的，但如果缺少 JS 会破坏网站，那么我认为设计应该有所不同。
如果服务器端脚本死掉了，可能还有其他问题需要担心，但不能保证页面有足够的用处。
不！JS 会阻塞 UI 线程，在某些情况下会阻塞下载，因此图像会延迟。此外，由于 JS 使用连接，因此可用于并行下载的连接较少。
看看@samsaffron 关于延迟加载 jQuery 的文章 - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

如果你可以延迟 JS 加载，你应该

score 1 · Accepted Answer

我对将脚本放在页脚中并不是很熟悉，但您可能想研究告诉页面仅在页面完全加载后运行 JavaScript 的各种方法。

这打开了几个选项 - 您可以让 JS 仅在页面准备好后动态加载外部脚本。

您还可以隐藏部分或全部页面内容，然后在页面准备好后使其可见。只要确保你用 JS 隐藏它，以便非 js 浏览器仍然可以看到它。

见这些：

score 1 · Accepted Answer

我偶尔会建议将 Javascript 放在页面底部（就在之前</body>），但仅限于新手程序员无法真正应对的情况，window.onload或者<body onload...>这是对他们的代码进行最简单的修改以使其工作的情况。

我同意您的实际缺点，这需要与迈克尔关于加载时间影响的说明相平衡。在大多数情况下 [I submit] 在<head>页面中加载脚本获胜。

score 1 · Accepted Answer

每个人的需求都不一样，让我们来看看你的清单：

1）我从来没有因为javascript而对页面的布局或样式有任何问题。如果您有 HTML 和 CSS，那么缺少的 javascript 将几乎不可见。您可以在 css 中隐藏元素，并在它们准备好时使用 javascript 显示它们。你可以使用jQuery的.show();方法

这是一个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="showr">Show</button><button id="hidr">Hide</button>
  <div>Hello 3,</div><div>how</div><div>are</div><div>you?</div>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});
$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>
</body>
</html>

如果您仍然有问题，您可以将您的 javascript 拆分为您的站点依赖的脚本和其他脚本，并将一些放在页眉中，一些放在页脚中。

2）这是用户错误，您无法控制，但您可以检查所需的功能是否存在并尝试重新加载它。大多数插件都会提供某种确认是否正在运行，因此您可以运行测试并尝试重新加载它们。

您还可以延迟加载文件，直到用户需要它们，例如等待它们加载验证脚本或滚动到某个点以加载“折叠”以下内容的focus代码form

3）如果页面dies 你无论如何都会得到一个半空白页。使用 PHP 5，您可以使用s进行更好的错误处理exception

if (!$result = mysql_query('SELECT foo FROM bar', $db)) {
        throw new Exception('You fail: ' . mysql_error($db));
}

还有这个

try
{
  // Code that might throw an exception
  throw new Exception('Invalid URL.');
}
catch (FirstExceptionClass $exception) 
{
  // Code that handles this exception
} 
catch (SecondExceptionClass $exception) 
{
  // you get the idea what i mean ;)
}

4）如果你缩小你的脚本，它们不应该比图像大很多。JQuery 是 32KB 的压缩和 gzip 文件。JQuery-UI 的脚本是 51KB。这还不错，大多数插件应该比这更小。

所以我建议你应该做你必须做的事情来获得你想要的结果，但要寻找减少错误和多余代码的最佳实践。给猫剥皮总是有更好的方法...

javascript - 将JS文件放在网页底部实际上好吗？

7 回答 7

Related

Reference