在正文中而不是在标头中链接 javascript 文件会导致问题吗？答案

【问题标题】：Will linking javascript files in the body rather than in the header cause a problem?在正文中而不是在标头中链接 javascript 文件会导致问题吗？
【发布时间】：2011-07-27 02:01:27
【问题描述】：

这就是我想做的事情

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

id 喜欢避免将两者分开，虽然我通常只在标题内看到脚本链接，但 document.ready 函数在放在那里时似乎不起作用。但是，当放置在主体的末端时，一切似乎都可以正常工作，那么这会导致任何问题吗？或者这样可以吗？

【问题讨论】：

你有 jquery 库的参考之前那些脚本？此外，您不需要在一个文件中包含多个$(document).ready()。
为什么在 ready() 调用中没有匿名函数？
我经常在正文中直接链接标题和页面特定脚本中的库（jQuery、插件等）。根据我的经验，它可以正常工作。
贾里德是对的！如果您想将脚本文件中定义的函数直接引用到就绪事件处理程序，那么我认为它应该不带括号： document.ready(createHeader);否则定义一个匿名函数。

标签： javascript jquery dom

【解决方案1】：

从功能上讲，只要将代码包含在 $(document).ready(function(){ }); 中并且它出现在 jQuery 文件包含之后，它会不不管是在head 还是body。 $(document).ready 确保在执行任何脚本之前 DOM 已完全加载。

但是，将所有脚本包含和脚本放在body 的底部是最佳加载性能。

This article explains it nicely.

示例：

        <body>

    <!-- MY HTML CODE -->

    <!-- START javascript -->
        <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
        <script type="text/javascript" src="/javascript/some_other_scripts.js"></script>

        <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            $(document).ready(function(){
                // my code
            });
        //]]>
        </script>
    <!-- END javascript -->

        </body>

【讨论】：

严格遵循这一点，即使$.ready() 也必须在 jQuery 脚本下载之后进行，这是性能因素。将所有脚本（不包含）放在底部似乎有点过分热心（即使是雅虎主页也不这样做，虽然它大部分都这样做），但如果网站有很多图像或其他内容下载，或者是一个非常高流量的网站（如 SO），包含的脚本可能应该放在底部（以及任何需要这些包含才能运行的脚本）。
@Jared：是的，ready 在 jQuery 包含之后。我应该发布一个例子。
@Sparky 您链接到的那篇文章非常好，整个性能系列对于任何构建网站的人来说都是必读的。谢谢指点！

【解决方案2】：

在正文中有脚本标签没有问题。请记住，页面是自上而下解析的，因此在使用脚本之前必须包含它们。

【讨论】：

【解决方案3】：

您确实意识到您在$(document).ready() 中放置的函数不会等待DOMContentLoaded 触发？您必须将它们包装在函数调用（事件处理程序）中，以避免在它们出现在代码中时立即调用它们。匿名函数通常就可以了。

$(document).ready(function(){
    createHeader();
    scriptSet();
});

【讨论】：

【解决方案4】：

我已经部署了许多 Web 应用程序，并且脚本在 body 标记中从未遇到过问题。我喜欢将它放在页面的末尾，以免妨碍页面上可见元素的下载进度。我相信谷歌也用他们的一些脚本（也许是分析？）做到了这一点。

就像其他人所说的那样，确保在 $(document).ready(); 之前有 jQuery 引用。称呼。很容易溜过去，很难排除故障:)

JMax

【讨论】：

【解决方案5】：

不，事实上，将脚本放在 HTML 末尾对“性能”有好处。

仍然是一个很好的做法是将所有 javascript 放在另一个文件中，并设置一个标题来调用它，如果可能的话，甚至压缩文件。

现在，我将为此更改该代码

$(document).ready(function(){
    createHeader();
    scriptSet();
});

所以你不会两次调用 $(document).ready :)

【讨论】：

我不知道为什么在页面末尾放置 .ready() 调用的性能会很重要，而且您在 .ready() 调用中缺少匿名函数。跨度>
没错，我所说的性能并不是因为准备好了。当您在 html 的末尾设置 javascript 时，页面将在末尾解析 javascript，因此它会被视为“加载得更快”，这并不是真正的性能提升，它看起来就是这样。顺便说一句，我添加了匿名函数:)

【解决方案6】：

如果您将脚本包含和块放在您的 BODY 元素中，通常并不重要；在大多数情况下，它们会运行得很好。有些人认为这是一种不好的做法，但这并不是一种错误的做法。它一直在发生。

但是，我想指出的是，将 $.ready() 函数调用放在哪里并不重要，只要它在 jQuery 包含之后，因为它总是在 DOM 准备好之后运行（这将发生页面加载后）。所以，在这种情况下，它没有任何区别。

注意函数调用中的匿名函数。这将为匿名函数传递一个对$.ready() 的引用，这允许它的函数体在以后执行，因此您的函数将在以后被调用。

<script type="text/javascript">
$(document).ready(function(){
    createHeader(); 
    scriptSet();
}); 
</script>

【讨论】：

嗯，你能告诉我在哪里可以获得更多关于为什么要这样做的更多信息吗？想了解一下
你的意思是.ready()?？还是anonymous functions?