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

Question

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

我的朋友读了一篇文章,其中提到将所有JavaScript文件移动到结束体标记(</body>)的末尾,将提高网页的性能.

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

是否有可能在关闭body标签(</body>)之前将JQuery库文件移动到页面末尾？

谢谢

Answer 1

Dun*_*can 24

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

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

Answer 2

Che*_*ion 16

该$(document).ready功能说不运行,直到DOM完成实例化-因此它移动到后如jQuery库第一次加载身体是好的这么久.非常规和一些假设可能不再正确,但没关系.

Answer 3

CMS*_*CMS 13

请记住,在调用函数之前必须加载jQuery JavaScript文件$(...).

Answer 4

Col*_*inM 13

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，3 月前
查看次数：	25482 次
最近记录：	11 年前