【问题标题】:Where is the best place to put JavaScript/Ajax in a document?将 JavaScript/Ajax 放入文档的最佳位置在哪里?
【发布时间】:2011-10-06 03:15:07
【问题描述】:

抱歉这个听起来很愚蠢的问题,但我需要专家来澄清一下。

head$(document).readybody 这三个放置 JavaScript 的位置中,放置一些使用大量 $GET 函数的 ajax 的最佳位置是哪里?

例如,我正在使用一个名为 execute_send() 的 JavaScript 函数,但我不确定放置它的最佳位置在哪里。以下是错误:

第 67 行字符 22 处的问题:在定义之前使用了“execute_send”。
函数执行_发送() {

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

【问题讨论】:

  • $(document).ready 不是一个“地方”。它是 JavaScript 代码(特别是 jQuery,一个 JS ),就像任何其他代码一样。

标签: javascript html jquery ajax jquery-events


【解决方案1】:

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

举个例子,当你可能真的想把 JS 放在头部时:你可能想要在页面渲染之前运行一些 A/B 测试代码——在这种情况下,代码应该放在头部,因为您确实希望它尽快运行。

【讨论】:

    【解决方案2】:

    正如@Thom Blake 所说,一般来说,最好的位置是在<body> 的底部(+1)——但我会进一步扩展:

    这样做的原因是,当浏览器加载页面时,它必须停止加载并在遇到 JavaScript 时对其进行解析。因此,例如,如果您的所有脚本都在 <head> 中,那么在加载 <body> 中的所有内容时会有延迟

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

    通常,所有这些都很重要,因为您希望网页尽可能地响应,因此 JavaScript 的最佳实践列表通常如下:

    1. 将所有脚本放在<body> 的底部,这样就不会延迟加载图片等非JS 资源。

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

    3. 缩小脚本,减少它们的总大小,从而加快加载时间

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

    【讨论】:

      【解决方案3】:

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

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

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

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

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

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

      区别是可见的,<body> 标记中的资源将按顺序加载/显示。当浏览器开始加载<script src=...js> 时,必须先加载完整的文件,然后浏览器才能获取另一个资源。所以,这是一种错觉,因为浏览器会在“javascripts”之前加载/di 更多“可见”内容。

      可视化整个事物:firebug > Net (tab)

      【讨论】:

        【解决方案4】:

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

        但是,将所有 JavaScript 包含和 JavaScript 放在 <body> 部分的底部是最佳加载性能。 “渐进式渲染”和“并行下载”对于脚本下方的所有内容都被阻止。如果您的脚本是页面上的最后一件事,那么您不会阻止任何内容。

        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>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-12-03
          • 2011-02-22
          • 1970-01-01
          相关资源
          最近更新 更多