将JavaScript / Ajax放在文档中的最佳位置在哪里?

时间:2011-10-06 03:15:07

标签: javascript jquery html ajax javascript-events

为愚蠢的问题道歉,但我需要专家澄清。

在放置Javascript,head$(document).readybody的三个地方中,最好放置一些使用大量{{1}的ajax的地方函数?

例如我使用的是一个名为$GET的JavaScript函数,但我不确定哪个地方最适合放置它。以下是错误:

execute_send()

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

4 个答案:

答案 0 :(得分:9)

一般情况下,除非由于某种原因你需要在其他地方使用它,否则将所有的JS放在体内。浏览器在解析你的JS之前不会继续,所以让页面首先加载是很好的。见http://developer.yahoo.com/performance/rules.html

作为一个例子,你可能真的想把JS放在头脑中:你可能有一些你希望在页面呈现之前运行的A / B测试代码 - 在这种情况下,代码应该放在头脑中,因为你真的希望它尽快运行。

答案 1 :(得分:4)

正如@Thom Blake所说,一般来说,最好的位置是<body>的底部(+1为此) - 但我会稍微扩展一下:

这样做的原因是,当浏览器加载页面时,它必须在遇到JavaScript时停止加载和解析JavaScript。因此,如果您在<head>中拥有所有脚本,则加载<body>

中的所有内容会有延迟

请注意,这是加载延迟 - 与脚本的实际执行分开。像$(document).ready()这样的东西处理脚本执行的时间,而不是处理它的时间。

通常,所有这一切都很重要,因为您希望网页尽可能具有响应性,因此JavaScript的最佳实践列表通常都是这样的:

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

  2. 将您的脚本合并到一个文件中,这样服务器就可以减少对资源的请求(您会看到这称为“最小化HTTP请求”)

  3. 缩小脚本,减少总大小,加快加载时间

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

    < / LI>

答案 2 :(得分:1)

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

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

  

在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则无法在页面中向下移动。可能还存在范围问题。在许多情况下,有办法解决这些问题。

对于其余的javascripts,都在结束</body>标记之前。

解释'为什么页面加载速度更快':它不会。

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

如果<body>标记内的资源将加载/显示顺序,则可以看出差异。当浏览器加载<script src=...js>时,必须先加载整个文件,然后浏览器才能获取另一个资源。所以,这是一种幻觉,因为浏览器会在“javascripts”之前加载/显示更多“可见”的内容。

想象整件事:firebug&gt;净(标签)

答案 3 :(得分:0)

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

但是,将<body>部分底部的所有JavaScript包含和JavaScripts置于最佳以加载性能。脚本下面的所有内容都会阻止“渐进式渲染”和“并行下载”。如果你的脚本是页面上的最后一件事,你就不会阻止任何事情。

This article explains it in more depth.

示例:

<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>