Is a javascript parsed when appendChild is called?

Question

Google page speed tells me that I should Defer parsing of JavaScript.

I have two external Javascripts loaded in the header and a call to an initialization function at the bottom of my document.

If I follow Google's recommendations, I should/could create a function like this:

function downloadJSAtOnload() {

  var element = document.createElement("script");
  element.src = "myscript1.js";
  document.body.appendChild(element);

  element = document.createElement("script");
  element.src = "myscript2.js";
  document.body.appendChild(element);

  myinitialization();

}

Can I be 100% sure that myinitialization() will not be called before my scripts have been loaded and parsed successfully? Else, what is the solution?

If I understand correctly, you're asking how can we be sure that the creating of the element, and the attaching of the `src` attribute, leads to that content being loaded prior to the call of `myinitialization()`? — Ian Clark, Jul 01 '13 at 19:59
Yes, myInitialization() calls functions defined in the two scripts. — Jérôme Verstrynge, Jul 01 '13 at 20:00
I can't remember if these calls are synchronous or not, but normally when something depends on another, you listen for the `load` event — Ian, Jul 01 '13 at 20:01
You can be 100% sure that the function will be called **immediately**. The other code won't be downloaded and evaluated until the *current* script terminated. — Felix Kling, Jul 01 '13 at 20:03
@Felix, so you are saying that the answer to my question is no, and that the parsing happens asynchronously? — Jérôme Verstrynge, Jul 01 '13 at 20:09
Yes. Have a look at this question and the accepted answer: http://stackoverflow.com/q/950087/218196. You can bind an event handler to the `load` event of the `script` element. But you really only gain anything from that if you load the code only *when/if* you need it. If you are loading both scripts immediately anyways because you need the code, then you can just put the `script` tags in the HTML. — Felix Kling, Jul 01 '13 at 20:10

score 1 · Answer 1 · answered Jul 01 '13 at 19:57

1

It is usually sufficient to include script files at the end of your document (before the '' tag).

        ...
        <script src="myscript1.js"></script>
        <script src="myscript2.js"></script>
        <script>
            myinitialization();
        </script>
    </body>
</html>

This means the document will load before scripts start to be downloaded, but it also means you guarantee your order of execution.

answered Jul 01 '13 at 19:57

Fenton

241,084
71
387
401

But I believe the load time will be 'much' longer than if I implement 'real' deferred parsing, no? – Jérôme Verstrynge Jul 01 '13 at 20:02
@JVerstry - measure it - I will be surprised if you find a real difference. – Fenton Jul 01 '13 at 20:04
I bet you would make your page faster by combining and minifying `myscript1.js` and `myscript2.js` to cause one less HTTP request. – Fenton Jul 01 '13 at 20:11
Thing is, I am not always loading both on all pages... but I could create mutliple compressed versions, true... – Jérôme Verstrynge Jul 01 '13 at 20:23
One file would still win - because it would be cached by the browser. This means you pay for the download just once for the whole visit (and subsequent visits). – Fenton Jul 01 '13 at 20:25

score 0 · Accepted Answer · answered Aug 05 '13 at 17:28

0

As per Felix, the answer is no. I cannot rely on the fact that appended code will be executed before the call to myinitialization();.

A solution is to wrap the code in one file and use async.

answered Aug 05 '13 at 17:28

Jérôme Verstrynge

57,710
92
283
453

Is a javascript parsed when appendChild is called?

2 Answers2