Question

这是一个最佳实践问题。

我最近开始将HTML5 boilerplate用于我一直在做的一系列项目，但最近发现了一些可能存在问题的问题。另一位开发人员引起我的注意，由于某些功能无法在页面加载（即使用jQuery $ .ajax的表单）上加载JS文件，因此在文档底部加载JS文件可能是个问题，反过来又会出现一些可用性问题。我想就解决可能出现的这类常见问题的最佳方法获得一些意见。我一直在使用HTML5样板，因为我知道Paul Irish和朋友们已经真正考虑过这个系统并且不断改进它。

示例问题：网站主页上有简报注册表单，该表单使用jQuery $.post函数提交表单值。用户有权输入值并按提交，但这将不会执行任何操作，因为未加载js会显示可用性问题。

在网站底部使用JS的最佳方式是什么？

Answer 1

理想情况下，您不应该使用JS作为动作/活动的唯一推动者。无论JS是否存在，您的站点都需要具有可用的功能。 JS只需要添加额外的图层。如果您遵循此规则，那么将JS包含在哪里都无关紧要。

无论如何，如果你像@thrtydot所提到的那样将它包含在底部，那么只有几秒钟的差异（除非你的HTML太长以至于页面顶部和JS之间存在很大的差距加载 - 在这种情况下，您需要担心更大的问题），从长远来看并不重要

Answer 2

我的建议如下：

将所有SCRIPT元素放在页面底部
让jQuery脚本位于第一个SCRIPT元素
让第二个SCRIPT元素包含一个ready（）处理程序，用于您希望尽快使用的行为

像这样：

<script src="http://ajax.googleapis.com/.../jquery.min.js"></script>  
<script>
    $(function() {
        // bind the handler to the newsletter submit button
        // etc.
    });
</script>
<!-- all other external and inline scripts should be below this line -->
<script src="pluginA.js"></script>
<script src="pluginB.js"></script>
<script>
    $(function() {
        // other page load code
    });
</script>

这是你能做的最好的事情。

顺便说一句，用户希望页面在前几秒内被破坏。我经常在Facebook，Youtube上体验这一点......

Answer 3

使用您的Ajax表单，您可能绑定了一个提交或单击事件来触发Ajax调用，对吧？并且该绑定只能在DOM加载时使用（使用jquery ready方法）。因此，在HTML正文渲染后，您的代码将被执行，这意味着您可以将其加载到正文的底部。

如果您在Ajax功能绑定之前发现用户尝试提交的问题，那么您可以在按钮上具有可视“禁用”状态，直到绑定发生。

但是，通过在头部加载脚本文件，您可以阻止任何内容的呈现，从而使用户获得空白页面。通常，即使您需要等待一段时间来获取功能，获取内容也是一种更好的体验。

在文档底部需要JS文件会出现可用性问题

3 个答案: