All geek questions in one place

How to prevent HTML JavaScript blocking

How to prevent JavaScript from starting to block other JavaScript?

I have the following on my website:

<html> <body> .... <script type="text/javascript" src="http://example.com/ex.js"></script> <script type="text/javascript" src="http://google.com/google-maps.js"></script> </body> </html>

When I use the YSlow Firefox add-on, I can see on the network traffic tab that google.com/google-maps.js JavaScript will not start loading until ex.js finishes loading.

Question How can I load both ex.js and google-maps.js at the same time and in parallel?

+4
source share
4 answers

Use the <script> element async or defer attribute :

Both async and defer start downloading the parser immediately without a pause, and both the optional onload handler for addressing the general need to perform initialization which depends on the script. the difference between async and defer centers around when the script is displayed. Each async script executes as soon as possible after the download is completed and before the window s load event. This means that it is possible (and probably) that async scripts are not executed in the order in which they appear on the page. defer scripts, on the other hand, are guaranteed to be executed in the order they appear on the page. This execution begins after full parsing but before the document s DOMContentLoaded event.

  • defer supported by IE4 +, Firefox 3.5+, Chrome 2+ and Safari 4+.
  • async supported by Firefox 3.6+, Chrome 7+ and Safari 5+. (Support No IE)

defer is your best bet. Scripts will be loaded in parallel and executed synchronously (in order). It is also better supported and more predictable than async . (See also this very detailed analysis of async / defer .)

 <script defer type="text/javascript" src="script.js"></script>
+3
source

It's ugly, but you can get scripts to load in parallel by injecting DOM elements ... using javascript.

Let's open this blog post for a working example.

+2
source

This is normal for embedded scripts in HTML. You can add scripts dynamically using the following code:

 <script type="text/javascript"> var head = document.getElementsByTagName("head")[0]; var sTag1 = document.createElement("script"); var sTag2 = document.createElement("script"); sTag1.type = sTag2.type = "text/javascript"; sTag1.src = "http://example.com/ex.js"; sTag2.src = "http://google.com/google-maps.js"; head.appendChild(sTag1); head.appendChild(sTag2); </script>

However, this can lead to unexpected results - they cannot be loaded and parsed in the correct order, which is important if script 2 refers to variables or functions from script 1.

If you want your HTML to load before loading scripts, save them sequentially and place them at the bottom of your HTML file, and not in the head tag. This will load the page before loading and parsing the script. See http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html .

+2
source

JavaScript files will always load in the order in which they are listed.

0
source

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

More articles:


All Articles