Same or different instances of a JavaScript code?

Question

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.

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

"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 (eg 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 (eg 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).