1. Introduction I mentioned the sequential execution feature of JavaScript at the end of the article "How to use the same HTML fragment on multiple pages - continued". Although modern browsers can download JavaScript in parallel (some browsers), considering the dependencies of JavaScript, their execution is still carried out in the order of introduction.
In order to better test this process, I wrote a simple HTTP handler page service.ashx, which can accept two parameters:
1. file, which needs to return the server-side path of the file.
2. delay, delay for a certain period of time before returning this HTTP request (milliseconds).
A typical page such as: ./service.ashx?file=js/jquery-ui.js&delay=2000 means a delay of 2 seconds before returning to the js/jquery-ui.js file on the server side.
The key code of service.ashx is as follows:
public void ProcessRequest(HttpContext context)
{
int delay = 0;
if (!String.IsNullOrEmpty(context.Request["delay"]))
{
delay = Convert.ToInt32 (context.Request["delay"]);
}
if (delay > 0)
{
System.Threading.Thread.Sleep(1000);
}
string filePath = context.Request["file"].ToString();
string fileContent = String.Empty;
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))
{
fileContent = sr.ReadToEnd();
}
if (filePath.EndsWith(".js"))
{
context.Response.ContentType = "application/x-javascript ";
}
else
{
context.Response.ContentType = "text/plain";
}
context.Response.Write(fileContent);
}
2. Directly introduce JavaScript (test1.htm) through the script tag.
First, let’s analyze the situation of sequentially introducing JavaScript in the tag. The page source code of test1.htm is as follows:
<script> <br>function addScript(url, inline) { <br>var head = document.getElementsByTagName("head")[0]; <br>var script = document.createElement ('script'); <br>script.type = 'text/javascript'; <br>if (inline) { <br>script.text = url; <br>} else { <br>script.src = url ; <br>} <br>head.appendChild(script); <br>} <br>$(function () { <br>addScript('./service.ashx?file=js/jquery-ui.js&delay= 2000'); <br>addScript('alert(typeof(jQuery.ui));', true); <br>}); <br></script>
我们分别在各种浏览器中测试这个例子：
test3.htm
通过JavaScript添加<script>标签 <br>
<table style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; MARGIN-LEFT: 10.5pt; BORDER-LEFT: medium none; WIDTH: 413.1pt; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse" cellspacing="0" cellpadding="0" width="689" border="1">
<tbody>
<tr>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112">
<p align="left"><span>Firefox 3.6</span></p>
</td>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576">
<p align="left"><img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231405311.gif" style="max-width:90%" border="0"></p>
</td>
</tr>
<tr>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112">
<p align="left">IE 8</p>
</td>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576">
<p align="left"><img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407246.gif" style="max-width:90%" border="0"></p>
</td>
</tr>
<tr>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112">
<p align="left"><span>Chrome 10</span></p>
</td>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576">
<p align="left"><img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407150.gif" style="max-width:90%" border="0"></p>
</td>
</tr>
<tr>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112">
<p align="left"><span>Safari 4</span></p>
</td>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576">
<p align="left"><img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231407465.jpg" style="max-width:90%" border="0"></p>
</td>
</tr>
<tr>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="112">
<p align="left"><span>Opera 11</span></p>
</td>
<td style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 345.85pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" valign="top" width="576">
<p align="left"><img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201103/20110303231406793.gif" style="max-width:90%" border="0"></p>
</td>
</tr>
</tbody>
</table></span></p>
<p align="left"><span style="FONT-FAMILY: 宋体">It can be seen that when </span>JavaScript<span style="FONT-FAMILY: 宋体"> is introduced after </span>DOM<span style="FONT-FAMILY: 宋体"> is loaded and then external or inline </span>JavaScript<span style="FONT-FAMILY: 宋体"> is introduced, </span>Firefox<span style="FONT-FAMILY: 宋体"> and The behavior of </span>Opera<span style="FONT-FAMILY: 宋体"> is consistent, ensuring that the execution order of </span>JavaScript<span style="FONT-FAMILY: 宋体"> is consistent with the order of introduction. However, </span>IE8, Chrome, Safari <span style="FONT-FAMILY: 宋体"> cannot guarantee this execution order. </span></p>
<p><span style="FONT-FAMILY: 宋体">Although various browsers differ in ensuring the order of execution, the biggest benefit at this time is that multiple </span>JavaScript<span style="FONT-FAMILY: 宋体"> files can be downloaded in parallel, which behaves consistently across all browsers. Of course this is not the topic of this article, you can </span><a href="http://www.google.com/search?q=javascript%20parallel%20download">Google<span style="FONT-FAMILY: 宋体"><span> for more details</span></span></a><span style="FONT-FAMILY: 宋体">. </span></p>
<p><span style="FONT-FAMILY: 宋体">How to solve the inconsistency between browsers, two solutions are provided below: <br><strong>4. Solution 1, how to ensure the execution order when dynamically adding script tags <br></strong> Sometimes the page logic requires us to dynamically execute JavaScript through the above method, so how to ensure the execution order under all browsers (currently only Firefox and Opera ensure the execution order). <br>In fact, the solution is very simple. We just add a complete callback function for function execution. The following test4.htm gives a specific solution: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="768" class="copybut" id="copybut768" onclick="doCopy('code768')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code768"> <br><html> <br><head> <br><title></title> <br><script src="./js/jquery-1.4.4.js" type="text/ javascript"></script>
<script> <br>function addScript(url, inline, callback) { <br>var head = document.getElementsByTagName("head")[0]; <br> var script = document.createElement('script'); <br>script.type = 'text/javascript'; <br>if (inline) { <br>script.text = url; <br>} else { <br>script.src = url; <br>script.onload = script.onreadystatechange = function () { <br>if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') { <br>if (callback) { <br>callback(); <br>} <br>script.onload = script.onreadystatechange = null; <br>}; <br>}; <br> } <br>head.appendChild(script); <br>if (inline && callback) { <br>callback(); <br>} <br>} <br>$(function () { <br>addScript( './service.ashx?file=js/jquery-ui.js&delay=2000', false, function () { <br>addScript('alert(typeof(jQuery.ui));', true); <br> }); <br>}); <br></script>
< /div>
