Question

我的朋友阅读了一篇文章，其中提到将所有JavaScript文件移动到结束正文标记（</body>）的末尾，将提高网页的性能。

我已将所有JS文件移到最后，除了JQuery和将文件附加到页面上的元素的JS文件，如下所示;

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

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

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

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

由于

Answer 1

将所有js包含移到页面底部是标准做法。这是因为当浏览器加载脚本时，它不会产生新的线程来执行此操作，因此基本上浏览器将等到它加载脚本后才进入下一行。

这对您的用户意味着他们会看到一个空白屏幕。让他们看到完整的（ish）页面会好得多，因为它看起来并没有停滞不前。

Answer 2

$(document).ready函数表示在DOM完成实例化之前不会运行 - 所以只要首先加载JQuery库，就可以将它移动到body之后。非常规和一些假设可能不再正确，但没关系。

Answer 3

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

Answer 4

使用“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>

Answer 5

问：为什么我经常看到JavaScript   在结束前书面/包括   （x）HTML文档中的body元素？

A - 无法访问DOM元素   通过JavaScript直到浏览器   将HTML元素加载到DOM中。   将JavaScript放在最后   （x）HTML文件（截止日期前）   身体元素），你会确保   该脚本一旦被调用   DOM已构建/加载并准备就绪   操纵。这样做的一个优点   方法是JavaScript代码   在DOM之后立即执行   建造，可能在之前   onload事件会触发。

JavaScript初学者被绊倒了   这通过放置代码不断   操纵标题中的DOM   （x）HTML文档的元素。这个   由于DOM有错误导致错误   尚未建成，因此是   JavaScript尚无法访问   遍历/操纵DOM。

来自JavaScript Execution & Onload Techniques in Web Browsers

Answer 6

文章要求您将脚本移到底部的原因是允许首先下载其他工件。（css＆amp; images，这将加快明显的渲染时间）

这是因为HTTP 1.1建议每个主机名只下载2个项目。你肯定希望你的css文件是下载的第一个文件之一，而不是javascript，这可能会使网站看起来渲染得更慢（仅仅是因为浏览器还没有获得css文件，并且不确定应该怎么做html）

但是如果您使用了google to host your jQuery，则可以并行下载，并且无理由将其移至页面底部。

或者，您可以设置第二个主机名来托管静态内容（例如css / scripts / images）。

但谷歌已经为你完成了艰苦的工作，所以如果它适合的话，使用它是有道理的。： - ）

Answer 7

使用不显眼的javascript（将事件侦听器添加到元素而不是onclik =“...”等）。将所有.js文件放在body标签的底部，首先放置主库（在本例中为jQuery），一切都会好的。您可以使用bundle fu

之类的捆绑包

您将看到加载页面的巨大性能提升。

将jQuery移动到body标记的末尾？

7 个答案: