If multiple versions of JS files (Bootstrap) are referenced in HTML which takes precedence?

Question

HTML loads it's libraries starting from the top of the page to the bottom correct? What if you have an older version of a framework/library (e.g. jQuery or Bootstrap) referenced below the newer version?

How would two versions of Bootstrap referenced in HTML take precedence?

1. Will the last library loaded take precedence?

2. Will the most recent JS version take precedence?

3. Will the two JS versions load cumulatively?

Does the same apply to other libraries such as CSS?

Apologies if I'm getting the web terms wrong here. I'm still fairly new to web development and how the different components work together. Thanks!

• Bootstrap 3.0.2
• Bootstrap 3.3.7 new version

Answer 1

If they are different files, (.js and .min.js) they will both load cumulatively). If they define the same JavaScript variables, in the same scope, the library that appears second will/should win. This happens because the variables defined in the first library will be reassigned new values from the second. In your example, including both the minified and non-minified versions of bootstrap.js in your page, whichever is included last, wins.

This will happen with CSS as well if the two libraries use the same exact selectors/class names with the same level of specificity. So again with your example of including both versions of bootstraps CSS, the second will be applied. Since they are two different versions, there may be a little bleed over from the fist referenced library to the second, so visibility you may notice some strange side effects.

FYI: You probably already know this, but another reader might just be tempted to include both. It's not good practice to include both sets of files because it could lead to unexpected results, will increase the page weight and number of requests sent to the server which impacts your loads times and, ultimately, your user's experience.

Answer 2

Multiple JavaScript versions can coexist on the same page.

This can happen on pages that use different frameworks that were supported using different versions of jQuery. Most developers will try to avoid multiple versions of libraries however if fixing a client site that is already coded with multiple versions you might not have that luxury.

To answer your question directly the last function in a JavaScript library takes precedence assuming they are defined exactly the same otherwise the two libraries would essentially merge. If a function changed from two to three arguments both would be active and would behave as if they were overloaded by design.

There are ways to reference the version of JS file using a variable as an alias like the example below, also some libraries have support for multiple components such as Adobe AEM via Client-side Library Folders and prefixing components with an alias but it is built into the entire solution.

Here is an example for JQuery

<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>

Each framework could behave differently when multiple versions are loaded which is why developers probably try to avoid it if possible.

With Cascading Style Sheets (CSS) the last style takes precedence

If you need to override a bootstrap style than it should be placed last. This assumes the exact same level of specificity as a rule with a higher specificity will take precedence over a more generic one no matter where it is loaded.