Good day. I decided to speed up the site. Scripts were transferred to the basement . jQuery is loaded from CDN in the header :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" async ></script>

But there is a problem. Everything related to jQuery writes:

 $ is not defined

Read the difference between async and defer . As I understand it, the defer scripts are executed at the very last moment, when all the HTML is received and parsed, while async will be processed immediately after loading. Then I decided to add defer to all scripts in the footer, but this works through time. Sometimes there are "not defined" errors, sometimes not. How to fix?

  • And in the body of the page there are no other scripts? jQuery loaded without defer / async? - Visman
  • I wrote and wrote, and published without an example my jQuery download. Yes, jquery is loaded via async - dantey89
  • remove async from jQuery. - Visman
  • if you remove async, then GooglePageSpeed ​​swears at blocking scripts! - dantey89
  • Move everything to the basement, and async needs to be removed - Robert Dampilon

2 answers 2

David Flanagan - JavaScript. Detailed guide:

Both attributes, defer and async , tell the defer that the script does not
uses the document.write() method and does not generate the contents of the document, and that the browser can continue parsing and displaying the document while the script is loading.

The defer attribute causes the browser to postpone the execution of the script until the document is loaded, analyzed and ready to perform operations. The async attribute causes the browser to execute the script as soon as it becomes possible, but does not block parsing the document while the script is loading.

If the <script> has both attributes, the browser supporting both of these attributes will prefer the async attribute and ignore the defer attribute.

Note that deferred scripts are executed in the order in which they appear in the document . Asynchronous scripts run as soon as they are loaded, that is, they can be executed in any order .

Thus, I advise you to leave all the scripts in the header (why spoil the code), and everywhere where jquery is used, and the connection of the library itself to register the attribute defer . Scripts where jquery is not used (that is, they do not depend on the connection of other scripts) can be connected with the async attribute, for the fastest possible download. Postponed scripts (those with defer ) must be defer starting with jquery so that there are no errors.

In general, I personally always use defer - it does not block the download and you know exactly the sequence of execution (the DOM model is already loaded and you don’t need to use window.onload ).

    I have the same problem on my project. The people wrote that they need to code the sequence of loading the scripts into the string where jquery itself is loaded. I read this on the portal http://ruhighload.com/post/%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0% BD% D0% B0% D1% 8F +% D0% B7% D0% B0% D0% B3% D1% 80% D1% 83% D0% B7% D0% BA% D0% B0 + javascript dedicated to acceleration and scaling. While I have a crutch. The jquery itself is loaded from above without asynchronous loading. If you do not have animation modules, then everything should work. I will try to find the article. Maybe some of the JS gurus will tell you how to find these functions. But as I understand it, you need to find functions that use $ and make them wait for Jquery. In the meantime, here's my connection style:

     <script src="//wob.su/design/assets/js/jquery.min.js"></script> <script> $(document).ready(function() { $("head").append("<link href='//wob.su/design/assets/css/green.css' rel='stylesheet' title='Color' >"); $("head").append("<link href='//wob.su/design/assets/css/owl.carousel.css' rel='stylesheet' >"); $("head").append("<link href='//wob.su/design/assets/css/owl.transitions.css' rel='stylesheet' >"); $("head").append("<link href='//wob.su/design/assets/css/animate.min.css' rel='stylesheet' >"); $("head").append("<link href='//wob.su/design/assets/fonts/fontello.css' rel='stylesheet' />"); });


    </ script> </ script>

      <script src="//wob.su/design/assets/js/jquery.easing.1.3.min.js" async></script> <script src="//wob.su/design/assets/js/bootstrap.min.js"></script> <script src="//wob.su/design/assets/js/bootstrap-hover-dropdown.min.js" async></script> <script src="//wob.su/design/assets/js/skrollr.min.js" async></script> <script src="//wob.su/design/assets/js/skrollr.stylesheets.min.js" async></script> <script src="//wob.su/design/assets/js/waypoints.min.js" ></script> <script src="//wob.su/design/assets/js/waypoints-sticky.min.js" ></script> <script src="//wob.su/design/assets/js/owl.carousel.min.js" ></script> <script src="//wob.su/design/assets/js/jquery.isotope.min.js" ></script> <script src="//wob.su/design/assets/js/jquery.easytabs.min.js" ></script> <script src="//wob.su/design/assets/js/viewport-units-buggyfill.js" ></script> <script src="//wob.su/design/assets/js/scripts.js" async></script>