可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

My friend read an article which mentioned that moving all JavaScript files to the end of the closing body tag (</body>), will improve the performance of a web page.

I have moved all JS files to the end except the JQuery and the JS files which are attaching event to an element on page, like below;

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

but he's saying to move the jQuery library file to the end of body tag.

I don't think it is possible, because I am attaching many events to page elements on load using jQuery selectors, and to use jQuery selectors it is must to load jQuery library first.

Is it possible to move JQuery library file to the end of page right before closing body tag (</body>) ??

Thanks

回答1:

The $(document).ready function says not to run until the DOM has finished being instantiated - so moving it to after body is okay so long as the JQuery library is loaded first. Unconventional and some assumptions may not be correct anymore but okay.

回答2:

It's standard practice to move all your js includes to the bottom of your page. This is because when a browser loads script, it does not spawn a new thread to do so, so basically the browser will wait until it has loaded the script before it proceeds to the next line.

What this means for your users is that they will see a blank screen. Much better to have them see the full(ish) page as then it doesn't look like it has stalled.

回答3:

Just take in account that the jQuery JavaScript file must be loaded before any call to the $(...) function.

回答4:

Use a "Dom Ready Queue" to collect functions to be executed once jQuery is loaded and the DOM is ready.

Example:

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

回答5:

The reason that article asked you to move scripts to the bottom, is to allow other artifacts to get downloaded first. (css & images, which will speed up apparent rendering times)

This is because HTTP 1.1 recommends only downloading 2 items per hostname. And you would definitely want your css file to be one of the first files downloaded, rather than javascript which could make the site appear to render slower (just by the fact that the browser hasn't got the css file yet and isn't sure what it should do with the html)

But if you used google to host your jQuery then that would download in parallel and negates any reason for moving it to the bottom of your pages.

Alternatively, you could set up a second hostname to host static content (such as css/scripts/images).

But google have already done the hard work for you, so it makes sense to use it if it suits. :-)

回答6:

Q - Why do I often see JavaScript written/included before the closing body element in an (x)HTML document?

A - DOM elements can not be accessed by JavaScript until the browser has loaded the HTML elements into the DOM. By placing JavaScript at the end of an (x)HTML document (before the closing body element), you will ensure that the script is called as soon as the DOM is constructed/loaded and ready for manipulation. An advantage of this approach is that JavaScript code is executed right after the DOM is constructed and possibly before the onload event would fire.

JavaScript beginners get tripped up by this constantly by placing code that manipulates the DOM in the header element of an (x)HTML document. This causes an error because the DOM has not yet been constructed and thus is not yet accessible to JavaScript that traverses/manipulates the DOM.

From JavaScript Execution & Onload Techniques in Web Browsers

回答7:

Use unobtrusive javascript (adding event listeners to elements instead of onclik ="..." etc). Put all your .js files at the bottom of the body tag, with the main library (jQuery in this case) placed first, and everything will be fine. You can use a bundler like bundle fu

You will see a big performance boost of loading your page.