45990

Is dynamic javascript added synchronously or not?

Question:

Also, when is the code loaded, on setting the .src attribute or on appending the element. To illustrate:

var test = document.createElement('script'); test.src = 'some_path'; // is code loaded here? document.head.appendChild(test); // or here? ... // or is it an asynch operation?

Answer1:

When creating a script element dynamically, <strong>the source file will not be loaded or executed before the element has been inserted into the document</strong>. Loading of a script is <strong>asynchronous</strong>. This means your code does the following:

<ol><li>Create the script element</li> <li>Assign a source attribute</li> <li>Place the element into the document</li> <li>Start loading the source file asynchronously</li> <li>When loaded, execute the script</li> </ol>

<strong>Edit:</strong> Thanks for pointing out that setting the <em>async</em> property does not have any effect on the loading behaviour of scripts. I never actually used it and assumed it would work, but it apparently does not. I removed the part claiming it would. <a href="http://jsbin.com/ivasobo/2/edit?js,console" rel="nofollow">I made an example to show this</a>.

Answer2:

Javascript runs top to bottom unless it's a function, an asynchronous call to a server, or in a closure that waits for some event (ie: window.load())

Your code is as follows:

var test = document.createElement('script'); //declare variable test to create script element test.src = 'some_path'; //define element with src attribute 'some_path' document.head.appendChild(test); //place script element in head block

Though I would recommend creating dynamic script blocks server-side to avoid complications due to exceptions and high-load/timeout possibilities.

You can insert breakpoints in Firebug and Chrome Dev tools to step through your scripts and see what is happening too. More Info: <a href="https://developers.google.com/chrome-developer-tools/docs/javascript-debugging" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/javascript-debugging</a>

Recommend

  • Python xmpp jabber client in tornado web application
  • How to create a Python decorator that can wrap either coroutine or function?
  • Android: NullPointerException on getWritableDatabase()
  • jQuery unload with an AJAX call not working in Chrome
  • md-autocomplete onSelectionChange fired twice
  • Access all files in folder from FileActivated file
  • Angular 2 mock response not working
  • Access denied while saving image in UWP.Access is denied. (Exception from HRESULT: 0x80070005 (E_ACC
  • Python async websocket client with async timer
  • On Windows Phone “Step Over” exits from async method when I step over async method call with await
  • Select an attribute with Xpath in a XML with namespace using Powershell
  • Java AsyncTask passing variable to main thread
  • Intermittent JSON parser failure for unescaped control character
  • IE memory leak and eval with jQuery
  • Canceling async httpwebrequests
  • createRecord with ember-data + ember-data-django-rest-adapter
  • I got jquery errors randomly
  • How to check for connectivity with server using javaScript from native Android 2.1 browser?
  • kendo uploader Cross domain issue in Web.Api
  • Why does this use of getImageData leak memory
  • Efficient way to upload multiple images to S3 from iOS
  • Xamarin iOS debugger not hitting breakpoints
  • Share two different things in Windows Phone 8.1 C#
  • Run EF6 Query in separate Thread on WinForm Button Click Event
  • Exception HRESULT: 0x800455BC in speech recognition in Windows phone 8
  • Loading fixtures in sails tests
  • Glassfish - java.lang.NoClassDefFoundError
  • is there a way to update filter with async data
  • Authentication failed with Azure Active Directory in Windows Phone
  • Magento site down due to mysql error General error: 1030 Got error -1 from storage engine
  • In loopback documentation what does variable 'cb' stands for?
  • Best way to dynamically load an xml configuration file into a Flex4/Flash movie at runtime?
  • ThreadStatic in asynchronous ASP.NET Web API
  • Security issues with PHP's Readfile method
  • onBackPressed() not being executed
  • JQuery Internet Explorer and ajaxstop
  • How to delay loading a property with linq to sql external mapping?
  • Cannot connect to cassandra from Spark
  • Delete MySQLi record without showing the id in the URL
  • Programmatically clearing map cache