1. 소개 "여러 페이지에서 동일한 HTML 조각을 사용하는 방법 - 계속" 기사 마지막 부분에서 JavaScript의 순차 실행 기능에 대해 언급했습니다. 최신 브라우저에서는 JavaScript를 병렬로 다운로드할 수 있지만(일부 브라우저) JavaScript의 종속성을 고려하여 여전히 도입된 순서대로 실행됩니다.
이 프로세스를 더 잘 테스트하기 위해 두 가지 매개변수를 허용할 수 있는 간단한 HTTP 핸들러 페이지 service.ashx를 작성했습니다.
1. 파일의 서버측 경로를 반환해야 합니다.
2. 지연, 이 HTTP 요청을 반환하기 전에 일정 시간(밀리초) 동안 지연됩니다.
./service.ashx?file=js/jquery-ui.js&delay=2000과 같은 일반적인 페이지는 서버 측의 js/jquery-ui.js 파일로 돌아가기 전에 2초의 지연을 의미합니다.
service.ashx의 키 코드는 다음과 같습니다.
public void ProcessRequest(HttpContext context)
{
int 지연 = 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. script 태그를 통해 JavaScript(test1.htm)를 직접 도입하는 경우
먼저 JavaScript를 순차적으로 도입하는 상황을 분석해 보겠습니다. 태그입니다. test1.htm의 페이지 소스코드는 다음과 같습니다.
<제목>
<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 (인라인) { <br>script.text = url <br>} else >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));', <br>}); /head> <br><div id="container"> <br></body> <br> <br>我们分别在各种浏览器中测试这个例子： <br>test3.htm <br>通过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>
<p align="left"><span style="FONT-FAMILY: 宋体"></span>DOM<span style="FONT-FAMILY: 宋体">이 로드된 후 </span>JavaScript<span style="FONT-FAMILY: 宋体">를 도입한 후 외부 또는 인라인 </span>JavaScript<span style="FONT-FAMILY: 宋体">를 도입하면 </span>Firefox가 실행되는 것을 볼 수 있습니다. <span style="FONT-FAMILY: 宋体"> 및 </span>Opera<span style="FONT-FAMILY: 宋体">의 동작은 일관적이므로 </span>JavaScript<span style="FONT-FAMILY: 宋体">의 실행 순서가 소개 순서와 일치합니다. 그러나 </span>IE8, Chrome, Safari<span style="FONT-FAMILY: 宋体">에서는 이 실행 순서를 보장할 수 없습니다. </span></p>
<p><span style="FONT-FAMILY: 宋体">브라우저마다 실행 순서가 다르지만 현재 가장 큰 이점은 여러 </span>JavaScript<span style="FONT-FAMILY: 宋体"> 파일을 병렬로 다운로드할 수 있다는 점이며, 이는 모든 브라우저에서 일관되게 작동합니다. 물론 이것은 이 기사의 주제가 아닙니다. 자세한 내용은 </span><a href="http://www.google.com/search?q=javascript%20parallel%20download">구글<span style="FONT-FAMILY: 宋体"><span></span></span></a><span style="FONT-FAMILY: 宋体">에서 확인할 수 있습니다. </span></p>
<p><span style="FONT-FAMILY: 宋体">브라우저 간의 불일치를 해결하는 방법은 아래 두 가지 해결 방법이 있습니다. <br><strong>4. 해결 방법 1, 스크립트 태그를 동적으로 추가할 때 실행 순서를 보장하는 방법 <br></strong> 페이지 로직에서는 위의 방법을 통해 JavaScript를 동적으로 실행해야 하므로 모든 브라우저에서 실행 순서를 보장하는 방법(현재는 Firefox 및 Opera만이 실행 순서를 보장합니다). <br>사실 해결책은 매우 간단합니다. 함수 실행을 위한 완전한 콜백 함수를 추가하기만 하면 됩니다. 다음 test4.htm은 특정 솔루션을 제공합니다. <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="768" class="copybut" id="copybut768" onclick="doCopy('code768')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code768"> <br> <br> <br><title></title> <br><script src="./js/jquery-1.4.4.js" type="text/ javascript"><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 (인라인) { <BR>script.text = url; >script.src = url; <BR>script.onload = script.onreadystatechange = function () { <BR>if (!script.readyState || script.readyState === '로드됨' || script.readyState === '완료') { <BR>if (콜백) { <BR>콜백(); <BR>script.onload = script.onreadystatechange = <BR>}; } <BR>head.appendChild(스크립트); <BR>if (인라인 && 콜백) { <BR>콜백() <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></head> <BR><div id="container"> /div> <BR></body> <BR></html> <BR>此时所有浏览器中的行为一致： <BR>test4.htm <BR>通过回调函数解决动态添加JavaScript的顺序问题 <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
<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 height=111 alt="" src="http://files.jb51.net/upload/201103/20110303231405311.gif" width=355 border=0>
<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
<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 height=114 alt="" src="http://files.jb51.net/upload/201103/20110303231405966.gif" width=134 border=0>
<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
<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 height=108 alt="" src="http://files.jb51.net/upload/201103/20110303231406914.gif" width=356 border=0>
<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
<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 height=133 alt="" src="http://files.jb51.net/upload/201103/20110303231406397.jpg" width=356 border=0>
<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
<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 height=129 alt="" src="http://files.jb51.net/upload/201103/20110303231406793.gif" width=302 border=0><BR><STRONG>5. 方案二，使用jQuery的html函数动态添加JavaScript <BR>jQuery的html函数用来更新一个DOM片段，我们可以很方便的通过这个函数来动态加载JavaScript，请看示例test2.htm： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="82205" class="copybut" id="copybut82205" onclick="doCopy('code82205')"><U>复制代码 代码如下:</script>
<script> <br>$(function(){ <br>$('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>'); <br>}); <br></script>
此时，各个浏览器中的行为一致：
test2.htm
通过jQuery的html函数解决动态添加JavaScript的顺序问题
|
Firefox 3.6
|
|
|
IE 8
|
|
|
Chrome 10
|
|
|
Safari 4
|
|
|
Opera 11
|
|
6. 포스트스크립트
jQuery의 html 함수는 왜 동적으로 로드되는 JavaScript의 실행 순서를 보장할 수 있나요?
단순히 .innerHTML로 DOM 노드를 업데이트하면 그 안에 있는 JavaScript가 실행되지 않는다는 것을 알고 있습니다. 이 예제의 소스 코드를 다음과 같이 간단히 변경할 수 있습니다.
$('#container')[0] .innerHTML = ' '<script>경고( typeof(jQuery.ui));</script>'
이 경우 jQueryUI가 전혀 로드되지 않습니다.
그럼 jQuery는 어떻게 작동하나요? 다음 기사에서는 소스를 추적하고 jQuery 소스 코드를 자세히 분석할 예정입니다. 계속해서 살펴보세요.
JavaScript의 실행 순서를 확인하는 방법 – jQuery.html 심층 분석
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
