CODEWITHSUNDEEP
javascript
AGamePlayer
AGamePlayer

Reputation: 7734

In what order would the dynamical added script files be executed in this case?

I read an article here:

https://varvy.com/pagespeed/defer-loading-javascript.html

It says that I should use something like this to load javascript:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

I am wondering, if I have more than one defer.js to load, in what order would it be executed?

For example:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element1 = document.createElement("script");
  element.src = "defer1.js";
  document.body.appendChild(element);

  var element2 = document.createElement("script");
  element.src = "defer2.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Will the defer1.js SURELY be executed before defer2.js?

Thanks

Upvotes: 3

Views: 56

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075079

I am wondering, if I have more than one defer.js to load, in what order would it be executed?

Chaotically.

Will the defer1.js SURELY be executed before defer2.js?

No.

When you add scripts dynamically like that, there is no guarantee about the order. They'll be run as soon as they're retrieved, and so if defer2.js is retrieved more quickly than defer1.js, it'll run first.

To do them in order, you'd have to request them in order, which means you can't request defer2.js until you've received a load event on defer1.js. Which means you'll download your JavaScript more slowly, because the browser can't make the requests in parallel, which it can do if you just put the script tags at the end of the document just prior to the closing </body> tag.

You've said you're concerned about getting a less-than-perfect score from PageSpeed Insights. Don't worry. Despite what your linked article says, PageSpeed Insights is plenty smart enough to know that script tags immediately prior to the closing </body> tag do not pose any load-time problem. This page, for instance, receives 100/100 on PageSpeed Insights if you serve the JavaScript with proper caching headers:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
body {
    font-size: 16px;
}
</style>
</head>
<body>
<p>Testing 1 2 3.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script1.js"></script>
<script src="script2.js"></script>
</body>
</html>

(Where script1.js and script2.js have a bit of jQuery code in them.)

Of course, where possible, avoid having multiple scripts (e.g., combine script1.js and script2.js above if you can; there are arguments either way about whether to include jQuery in that one combined file or use a CDN as above).

Upvotes: 1

rani
rani

Reputation: 68

defer1.js this script will load first and then defer2.js thi one load and so on

Upvotes: 0

MarcoS
MarcoS

Reputation: 17721

appendChild()synchronously appends the script node, but it loads the script asynchronously. So the execution order is undefined (it depends on network delays).

Upvotes: 2

Related Questions