logo标签列表

将jQuery移到body标签的末尾？

javascriptjqueryxhtml
12

我的朋友读了一篇文章，提到将所有的JavaScript文件移到关闭body标签（</body>）之前可以提高网页性能。

我已经将除了JQuery和那些附加事件到页面元素上的JS文件之外的所有JS文件都移到了结尾，像下面这样：

$(document).ready(function(){
    //submit data
    $("#create_video").click(function(){ //... });
});

但他说要将jQuery库文件移到body标签的结尾。

我认为这是不可能的，因为我正在使用jQuery选择器在加载时将许多事件附加到页面元素，并且为了使用jQuery选择器，必须先加载jQuery库。

是否可以将JQuery库文件移动到页面末尾，在关闭body标签（</body>）之前？

谢谢

这是关于页面加载优化的问题。请查看邓肯的答案以获取更多详细信息。只要您正在使用onload来触发脚本执行的开始，就应该没问题。更多信息请参见http://developer.yahoo.com/performance/rules.html。 - Justin Johnson
7个回答
24

将所有js引用移至页面底部是标准做法。这是因为当浏览器加载脚本时，它不会生成新线程来执行，因此浏览器会等待直到加载完成后再继续处理下一行。

这对用户意味着他们会看到空白屏幕。最好让他们看到完整的页面，这样就不会显得卡住了。

16

$(document).ready 函数会在 DOM 实例化完成后才运行 - 因此，如果先加载 JQuery 库，把它放到 body 后面是可以的。这种做法可能有些不常规，而且一些假设可能已经不正确了，但还是可以的。

13

请注意，在调用$(...)函数之前必须加载jQuery JavaScript文件。

12

使用“Dom Ready Queue”来收集需要在jQuery加载并且DOM准备就绪后执行的函数。

示例：

<html>
  <head>
    <script type="text/javascript">
      var domReadyQueue = [];
    </script>
  </head>
  <body>
  ...
  <div class="foo"></div>
  <script type="text/javascript">
    domReadyQueue.push(function($){
      $('.foo').doSomething();
    })
  </script>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
    jQuery(function(){
      while (domReadyQueue.length) {
        domReadyQueue.shift()(jQuery);
      }
    });
  </script>
  </body>
</html>
3
问 - 为什么我经常看到JavaScript在(x)HTML文档的闭合body元素之前被编写/包含？
答 - 在浏览器将HTML元素加载到DOM中之前，JavaScript无法访问DOM元素。通过将JavaScript放置在(x)HTML文档的末尾（在闭合body元素之前），您将确保脚本在DOM构建/加载并准备好进行操作时立即调用。这种方法的优点是JavaScript代码在DOM构建之后立即执行，可能早于onload事件触发。
JavaScript初学者经常因将操作DOM的代码放置在(x)HTML文档的头部元素中而出错。这会导致错误，因为DOM尚未构建，因此无法访问DOM，也无法遍历/操作DOM的JavaScript。
来源：Web浏览器中的JavaScript执行和Onload技术
3
该文章建议将脚本移到底部的原因是为了让其他元素先下载（如CSS和图像），这将加快呈现时间。这是因为HTTP 1.1建议每个主机名只下载2个项目。您肯定希望CSS文件是最先下载的文件之一，而不是JavaScript文件，因为后者可能会使网站呈现速度变慢（仅仅因为浏览器尚未获取CSS文件并不确定应该如何处理HTML）。但是，如果您使用Google托管您的jQuery，那么它将并行下载，从而抵消了将其移动到页面底部的任何理由。或者，您可以设置第二个主机名来托管静态内容（如CSS /脚本/图像）。但是，Google已经为您完成了艰苦的工作，因此如果符合要求，使用它是有意义的。 :-)
2

使用不显眼的JavaScript（将事件监听器添加到元素而不是使用onclick ="..."等）。

将所有.js文件放在body标签底部，主库（在这种情况下为jQuery）放在第一位，一切都会很好。您可以使用类似于bundle fu的打包工具。

您将看到页面加载速度大大提升。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接