在文档中放置JavaScript/Ajax的最佳位置是什么?

Where is the best place to put JavaScript/Ajax in a document?

本文关键字：Ajax 最佳位置 是什么 JavaScript 文档      更新时间：2023-09-26

为这个听起来很蠢的问题道歉，但我需要专家来澄清。

在三个地方把JavaScript, head, $(document).ready，或body，在哪里最好的地方是把一些ajax，使用了很多$GET函数?

例如，我正在使用一个名为execute_send()的JavaScript函数，但我不确定把它放在哪里最好。下面是错误:

第67行字符22的问题:'execute_send'在定义之前被使用。
命令功能execute_send() {

位置如何影响页面加载时间?

一般来说，除非出于某种原因你需要在其他地方使用它，否则将所有JS放在body的最后。在解析完JS之前，浏览器不会继续运行，所以最好先加载页面。见http://developer.yahoo.com/performance/rules.html

作为一个例子，当你可能真的想把JS放在头部:你可能有一些A/B测试代码，你想在页面甚至渲染之前运行-在这种情况下，代码应该在头部，因为你真的想要它尽快运行。

正如@Thom Blake所说，一般来说，最好的地方是在<body>的底部(+1)-但我将在这一点上展开一点:

这样做的原因是，当浏览器加载页面时，它必须在遇到JavaScript时停止加载并解析它。例如，如果你把所有的脚本都放在<head>中，那么在加载<body>

中的所有内容时会有延迟。

注意，这是加载的延迟-与脚本的实际执行分开。$(document).ready()之类的代码处理的是脚本何时执行，而不是何时加载。

一般来说，所有这些都很重要，因为你想让网页尽可能地响应，所以JavaScript的最佳实践列表通常是这样的:

  1. 将所有脚本放在<body>的底部，以便加载非js资源，例如图像，不会延迟。

  2. 将您的脚本合并到单个文件中，以便服务器必须对资源发出更少的请求(您将看到这被称为"最小化HTTP请求")

  3. 最小化你的脚本，以减少他们的总大小，这加快了加载时间

  4. 将任何依赖于DOM的代码(例如点击处理程序，HTML操作等)放在$(document).ready()中(或在页面上使用的JS库的等效方法)

同一主题:what -pros- cons-putting-javascript-in-head-and-putting-just-before-the-body

在过去，我遇到了一些jquery的问题，它不是'加载器'初始化时。这就是为什么我们决定把它插入<head> .

在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用document。写入插入部分页面内容时，它不能在页面中移动到更低的位置。可能还存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。

对于其余的javascript，在结束的</body>标记之前。

解释为什么页面加载更快:It doesn ' t.

浏览器是单线程的，所以当脚本正在执行时，浏览器无法启动其他下载是可以理解的。但是，当脚本正在下载时，浏览器没有理由不能开始下载其他资源。而这正是较新的浏览器，包括Internet Explorer 8、Safari 4和Chrome 2所做的。

不同之处在于，<body>标记内的资源将依次加载/显示。当浏览器加载<script src=...js>时，在浏览器可以获取另一个资源之前，必须加载完整的文件。所以，这是一种错觉，因为浏览器会在'javascripts'之前加载/di更多的'可见'内容。

可视化整个过程:firebug> Net (tab)

如前所述，$(document).ready不是一个地方。(对于jQuery, $(document).ready只是确保在执行任何脚本之前DOM已完全加载(准备好进行操作)。)您可以将JavaScript放在<head>或<body>中。

然而，把你所有的JavaScript包含和JavaScript脚本在<body>部分的底部是最好的加载性能。"渐进式渲染"answers"并行下载"被阻止的一切下面的脚本。如果您的脚本是页面上的最后一个内容，那么您没有阻塞任何内容。

本文对此进行了更深入的解释。

例子: 

<html>
      <head>
        <!-- MY HEAD CONTENT - LOAD ALL CSS -->
      </head>
      <body>
        <!-- MY HTML CODE -->
            <!-- START javascript -->
            <script type="text/javascript" src="/ajax/jquery/jquery-1.6.2.min.js"></script>
            <script type="text/javascript" src="/ajax/jquery/plugins/jquery.random_plugin.js"></script>
            <script type="text/javascript" src="/includes/some_other_scripts.js"></script>
            <script type="text/javascript" language="JavaScript">
            //<![CDATA[
                $(document).ready(function(){
                    // my jQuery/JavaScript code
                });
            //]]>
            </script><!-- END javascript -->
      </body>
</html>
相关文章：