All geek questions in one place

Can Bootstrap boot asynchronously?

I have not used Bootstrap for a very long time and am not sure whether it should be loaded non-asynchronously in <head> for the purpose of building the page.

Google suggests using this code to asynchronously load JS files:

 <script type="text/javascript"> // Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Can I load bootstrap.min.js this way or load it non-asynchronously?

+9
source share
2 answers

Bootstrap.js requires jquery to run. If you want to benefit from loading an asynchronous script, then you probably want to also download asynchronous jquery (and possibly other libraries) ... The problem is that you have no guarantee that asynchronous jquery will complete before loading using the above above code example. I am also sure that you have your own javascript that you want to write in order to use bootstrap.js functions. This means even more dependencies. You can write the logic for connecting dependencies and asynchronous loading manually, but it will be a lot of work, as the number of scripts that you may need to include will increase.

Requirejs is a library that takes care of all this dependency management and can load your files asynchronously (and in the correct order). Another advantage of this library is the optimizer, which can track dependencies and "write" them to one (optionally reduced) file. After you use the optimizer to optimize your “main” js file (a file with all the dependencies needed for the page), requireJS can simply load this file asynchronously. You only need to include one script!

An example would look like this:

/app/main.js:

 requirejs.config({ paths: { jquery: "lib/jquery-1.11.0", bootstrap: "lib/bootstrap" }, shim: { bootstrap: { deps: ['jquery'] } } }); //Define dependencies and pass a callback when dependencies have been loaded require(["jquery", "bootstrap"], function ($) { //Bootstrap and jquery are ready to use here //Access jquery and bootstrap plugins with $ variable });
In this case

jquery.js and bootstrap.js will be in the / app / lib directory (along with require.js).

In your HTML code you will have a script like this:

 <script src="/app/lib/require.js" data-main="/app/main"></script>

This will load both jquery (in the correct order) at boot and then pass these modules as parameter (s) (only jquery / $ is needed, since bootstrap is just a plugin on top of jquery) into your callback function.

+25
source

Therefore, if Patrick gets an excellent answer (which helped me a lot), if you run your site against https://developers.google.com/speed/pagespeed/insights/ , he will still warn you that

 Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources Remove render-blocking JavaScript: http://mydomain/js/require.js

But, using the OP setting (and the one that Google recommends), you can do this immediately before the </body>

 <script type="text/javascript"> function requireJSOnload() { var element = document.createElement("script"); element.src = "/js/require.js"; element.setAttribute('data-main', '/js/main'); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", requireJSOnload, false); else if (window.attachEvent) window.attachEvent("onload", requireJSOnload); else window.onload = requireJSOnload; </script>

Now that you are working with https://developers.google.com/speed/pagespeed/insights/ , you will not have JS blocking scripts.

+2
source

Source: https://habr.com/ru/post/972467/

More articles:


All Articles