0

This is the bottom of my webpages. As you can see, there are several instances of jquery.min.js.

    <!-- JavaScript at the bottom for fast page loading -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- Changed from src="/ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" -->
    <script>window.jQuery || document.write('<script src="/mysite/js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Responsive Grid System -->
    <script src="/mysite/js/responsivegridsystem.js"></script>
<!-- Responsive Menu Acordeón -->
    <script src="/mysite/js/accordionmenu.js"></script>
<!-- For automatic applying of a webp or no-webp class to HTML element, depending on browser support -->
    <script src="/mysite/js/modernizr-custom.js"></script>
    <script>
      Modernizr.on('webp', function (result) {
        if (result) {
          // supported
        } else {
          // not-supported
        }
      });
    </script>
<!-- Carousel -->
    <script src="/mysite/js/jquery.min.js"></script>
    <script src="/mysite/js/slick.min.js"></script>
    <script>
    $('.carousel-view').slick({
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 3,
      responsive: [
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
    </script>
<!-- modal box to work in IE9 -->
    <script src="/mysite/js/jquery.hoverTransition.js"></script>
    <script> amenu.open("88", true); </script>
    <!--[if (lt IE 9) & (!IEMobile)]>
    <script src="/mysite/js/selectivizr-min.js"></script>
    <![endif]-->
<!-- Pretty float pictures-->
    <script src="/mysite/js/prettyfloat.js"></script>
<!-- Make all divs in a row the same height (Responsive Grid System) -->
    <script src="/mysite/js/jquery.matchHeight-min.js"></script>
    <script>
    jQuery(function($){
        $('.matchheight').matchHeight();
    });
    </script>
<!-- Table (tabla) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
     $(function() {
            /* For zebra striping */
            $("table tr:nth-child(odd)").addClass("odd-row");
            /* For cell text alignment */
            $("table td:first-child, table th:first-child").addClass("first");
            /* For removing the last border */
            $("table td:last-child, table th:last-child").addClass("last");
    });
    </script>
<!-- Usado para colapsos -->
    <script>
        function toggleDiv(divid){
        if(document.getElementById(divid).style.display == 'none'){
        document.getElementById(divid).style.display = 'block';
        }else{
        document.getElementById(divid).style.display = 'none';
        }
        }
    </script>
<!-- Menu navigation -->
    <script src="/mysite/js/jquery-1.7.2.min.js"></script>
    <script src="/mysite/js/script.js"></script>
<!-- Tooltips -->
    <script src="/mysite/js/jquery.min.js"></script>
    <script src="/mysite/js/tooltip.js"></script>
<!-- Zendesk Live Chat Script -->
    <script>
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
    d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
    _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
    $.src="https://v2.zopim.com/?26AnsOGmySbDiEq6CAIx8dIxyvck1SUC";z.t=+new Date;$.
    type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
    </script>   
<!-- TrustedSite Script -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="https://cdn.ywxi.net/js/1.js" async></script>
</body>

This is because each time I use a JavaScript solution for implementing say, a carousel, a menu, etc., the developer gives you instructions about the .js that will be needed.

As I am a newbie in web design, there are several questions I have regarding this:

  1. The source of one instance is https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. Is that better than having the .js in a folder of the website?
  2. Are the 4 or 5 instances of this particular .js the same code, I mean, are all of them the same?

    1.1 If not, can I have all of them in a js folder renaming each one differently and then pointing the webpage to them?

    1.2 How the browser/site/software knows which version to call?

    2 If yes, should I take all but one out and everything will work OK? I made a small experiment and took one instance of jquery.min.js out trying to make a carousel work, and even though it still didn't work, at least it behaved better than before.

My googling with different versions of “css3 html5 can a java script file appear several times in the document” brought not an answer.

3
  • 2
    1. Pros/cons of using a CDN for code delivery -> do some research. Commented Feb 17, 2020 at 10:51
  • 3
    2. You should not embed the same scripting library multiple times. The instructions you find on any such plugin pages of course say that you need to embed jQuery, but that does not mean you need to do it multiple times. Commented Feb 17, 2020 at 10:52
  • Thank you misorude, I didn't know that, About the Pros and Cons of using a CDN, I just was investigating that as per your suggestion, and I think I will go for its use. Commented Feb 17, 2020 at 21:47

1 Answer 1

3

The source of one instance is https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. Is that better than having the .js in a folder of the website?

"Better" is subjective.

There's a greater chance that Google's CDN version is already cached by any given visitor's browser, and that Google's CDN will be faster than your server. The user's browser will load more stuff in parallel if it is split across multiple hostnames.

But adding another server adds an additional single point of failure, and you're trusting Google to not serve up tainted code, and people might not be able to access Google's server (e.g. behind the Great Firewall of China).

Are the 4 or 5 instances of this particular .js the same code, I mean, are all of them the same?

If multiple <script> elements define values for the same variables (e.g. jQuery will define $ and jQuery as globals) then subsequent <script> elements will overwrite earlier ones.

Best case scenario is that you've wasted bandwidth and CPU loading scripts you aren't using.

Worse case is that you load jQuery, attach plugins to it, then load a new version of jQuery and blow away all the plugins.

Load jQuery once … and use a version which is current and supported (so not, for example, 1.7.2 which has known security issues).

Sign up to request clarification or add additional context in comments.

4 Comments

Just to add to the last point - loading jQuery once. You can load it multiple times if absolutely necessary. But it's not recommended. Not that it can't work but it's very hard to manage and maintain for the future, as you now have a lot extra logic to ensure the instances don't trample each other and that the plugins use the "correct" version for themselves. So, only do that as last resort. For the vast majority of cases, you should be able to just use a single version, even if it's not the absolute latest.
Thank you very much for your enlightening answers Quentin, VLAZ. I googled and find that the latest version is this <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.4/…>, so I will use it and take out all of the rest.
@elviti — Your search failed you. The latest version is 3.4.1. The whole 1.x branch is unsupported.
Thank you @Quentin. At developers.google.com/speed/libraries#jquery I saw this: 3.x snippet: <script src="ajax.googleapis.com/ajax/libs/jquery/3.4.1/…> 2.x snippet: <script src="ajax.googleapis.com/ajax/libs/jquery/2.2.4/…> 1.x snippet: <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.4/…> On my site 1.7.2 is used, so I thought I should use the latest of the 1.s, not knowing I should go to the latest of the 3.s. Thanks a lot for directing me in the right direction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.