Menu
I have the following script, where the first and third document.writeline are static and the second is generated:
<script language="javascript" type="text/javascript"> document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>"); document.write("<script language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>"); document.write("<script language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>"); </script> Firefox and Chrome will display before, during and after, while Internet Explorer first shows during and only then does it show before and after.
I've come across an article that states that I'm not the first to encounter this, but that hardly makes me feel any better.
Does anyone know how I can set the order to be deterministic in all browsers, or hack IE to work like all the other, sane browsers do?
Caveats: The code snippet is a very simple repro. It is generated on the server and the second script is the only thing that changes. It's a long script and the reason there are two scripts before and after it are so that the browser will cache them and the dynamic part of the code will be as small as possible. It may also appears many times in the same page with different generated code.
392
The Javascript code on the page is part of the HTML document, so the order in which Javascript is loaded is the order in which the tag < script /> appears, and the external JS in the < script /> tag or introduced through src is executed in the order in which the statement appears, and the execution process is part of ...
Inline JavaScript can be achieved by using Script tag inside the body of the HTML, and instead of specifying the source(src=”…”) of the JavaScript file in the Script tag, we have to write all the JavaScript code inside the Script tag.
Inline small CSS should be included within the <head> tags of an HTML file while inline small JavaScript can be included either within the <head> tag or the <body> tag. In most cases, using an external file to call your CSS and JavaScript is considered best practice.
The "Inline JavaScript" filter reduces the number of requests made by a web page by inserting the contents of small external JavaScript resources directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
No, this is the behavior of Internet Explorer.
If you attach scripts dynamically, IE, Firefox, and Chrome will all download the scripts in an asynchronous manner.
Firefox and Chrome will wait till all of the async requests return and then will execute the scripts in the order that they are attached in the DOM but IE executes the scripts in the order that they are returned over the wire.
Since the alert takes less time to "retrieve" than an external javascript file, that likely explains the behavior that you are seeing.
From Kristoffer Henriksson's post on the subject of asynchronous script loading:
In this scenario IE and Firefox will download both scripts but Internet Explorer will also execute them in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM.
In Internet Explorer this means your scripts cannot have dependancies on one another as the execution order will vary depending on network traffic, caches, etc.
Consider using a Javascript loader. It will let you specify script dependencies and order of execution while also loading your scripts asynchronously for speed as well as smoothing out some of the browser differences.
This is a pretty good overview of a few of them: Essential JavaScript: the top five script loaders.
I've used both RequireJS and LabJS. In my opinion, LabJS is a little less opinionated.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
