瀏覽器環境下JavaScript腳本載入與執行探析之動態腳本與Ajax腳本注入

首頁

web前端

js教程

瀏覽器環境下JavaScript腳本載入與執行探析之動態腳本與Ajax腳本注入_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

In "Analysis of JavaScript Script Loading and Execution in Browser Environment: Defer and Async Features", we studied the execution timing and browser support of delayed scripts (defer) and asynchronous scripts (async) conditions, browser bugs, and other details. In addition to defer and async features, dynamic scripts and Ajax script injection are also two commonly used methods to create non-blocking scripts. Generally speaking, these two methods can achieve the effect of script loading without affecting page parsing and rendering. However, in different browsers, there are still certain differences in the execution timing of the scripts created by these two technologies. Today we will come back Discuss these features of scripts injected through dynamic scripting technology and Ajax.

Code preparation:

We use the loadScript function in Section 2.3 of "Analysis of JavaScript Script Loading and Execution in Browser Environment: Code Execution Sequence" to add dynamic scripts, and also use the loadXhrScript function in Section 2.4 of this article to add dynamic scripts. Implement Ajax script injection. We put both functions in util.js.

In addition, the version of CHROME used in this article is 47.0.2526.80, the version of firefox is 43.0.4, and the version of opera is 30.0.1835.125.

1 Dynamic Script

1.1 The execution timing issue of dynamic scripts

Based on the DEMO in Section 2.3 of "Analysis of JavaScript Script Loading and Execution in Browser Environment: Defer and Async Features", we added three external js files:

dynamic1.js

test += "I am head external dynamic script ";

dynamic2.js

test += "I am a dynamic script external to the body ";

dynamic3.js

test += "I am the bottom external dynamic script ";

1.1.1 DEMO1: A preliminary study on the execution timing of dynamic scripts

HTML code is:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-"/>
<title>Dynamic Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/../jquery-...min.js"></script>
<script src="util.js"></script>
<script type="text/javascript">var test = "";</script>
<script>
loadScript("dynamic.js");
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src=".js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadScript("dynamic.js");
</script>
<script src=".js" type="text/javascript"></script>
</body>
<script>
loadScript("dynamic.js");
</script>
<script src=".js" type="text/javascript"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本
";
})
window.onload = function(){
test += "我是window.onload里面的脚本
";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>

In the code, we have added 3 dynamic script files to the

tag of HTML, and compared them with the execution of normal external scripts and internal scripts. Let’s take a look at the execution in different browsers. Result:

Note: The execution results may change in Firefox and Opera

From the above example, we can see that the execution timing of dynamic scripts in different browsers is still quite different, but the following two points are clear:

[1] Dynamic scripts can indeed play a role in not blocking subsequent scripts, that is, a delay effect, but this delay effect may not last until all normal scripts have been executed, and there is no guarantee that it can be delayed until DOMContentLoaded.

[2] The order of execution of dynamic scripts cannot be guaranteed. This is explained in http://www.jb51.net/article/77920.htmThis article and several subsequent articles Detailed explanation in

It can also be seen from this DEMO that the execution timing of dynamic scripts is highly uncertain. Although in DEMO1, dynamic scripts are executed after the DOMContentLoaded event, it does not mean that dynamic scripts are not executed. Will block DOMContentLoaded, let's take a look through DEOM2:

1.1.2 DEMO2: Dynamic script blocking DOMContentLoaded

We modified the 27th line of internal code in DEMO1 to:

<script src="/delayfile.php&#63;url=http://localhost/js/load/3.js&delay=5" type="text/javascript"></script>

我们利用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》中的delayfile.php，将3.js的返回延迟5秒钟，我们知道，如果是defer延迟脚本，无论正常外部脚本延迟了多长时间，defer脚本还是会在正常外部脚本之后执行的，但是动态脚本却不是这样了，我们看一下修改后的代码在浏览器中的执行顺序：

注：firefox和opera中执行结果可能会变化

可以看到，在某个正常脚本加载时间较长的时候，动态脚本的执行明显提前，无论在IE还是CHROME、firefox和opera中，均在DOMContentLoaded之前执行，因此我们可以初步判断，动态脚本的执行时机是不确定的，在不同浏览器的执行时机也都存在差异，但总的来看应该是在代码加载结束之后，并且线程中没有JavaScript代码执行的某个时间，但不同浏览器对这个时间有着不同的把握。

因此，动态脚本是否会阻塞DOMContentLoaded也是不确定的，因为动态脚本可能在DOMContentLoaded触发之前，也可能在触发之后执行。而且由于IE

1.1.3 DEMO3：动态脚本与defer

我们知道，defer脚本是有着相对明确的执行时机的，即页面解析完成之后，DOMContentLoaded触发之前加载并且执行，事实上，二者之间在执行时机上并不存在什么关联，但是在实际实验中发现，动态脚本可能会在defer脚本之前或者之后执行，但却不会打断defer脚本的执行，我们再引入《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中2.3节的DEMO中的defer脚本，修改HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-"/>
<title>Dynamic Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/../jquery-...min.js"></script>
<script src="util.js"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本
";
})
window.onload = function(){
test += "我是window.onload里面的脚本
";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>
<script type="text/javascript">var test = "";</script>
<script>
loadScript("dynamic.js");
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src="defer.js" type="text/javascript" defer="defer"></script>
<script src=".js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadScript("dynamic.js");
</script>
<script src="defer.js" type="text/javascript" defer="defer"></script>
<script src=".js" type="text/javascript"></script>
</body>
<script>
loadScript("dynamic.js");
</script>
<script src="defer.js" type="text/javascript" defer="defer"></script>
<script src=".js" type="text/javascript"></script>
</html>

注：firefox和opera中执行结果可能会变化

我们增加了几个defer的脚本，再来看一下各个浏览器中的执行结果：

从实验结果可以看出，动态脚本的执行时机与defer脚本并没有直接的关系，表面上看起来在CHROME和firefox中，延迟脚本总是在动态脚本之前执行，在《前端优化-Javascript篇(2.异步加载脚本)》一文中提到过“ScriptDOM和defer同时都可以执行，在不同浏览器中它们的优先级的不一样的。在Firfox和Chrome中，ScriptDOM的优先级比defer低，而在IE中情况则相反。”，其实这种优先级应该是不存在的，我们只需要将defer脚本加一个加载延迟，那么动态脚本的执行就会先于defer脚本了。

1.2 动态脚本执行问题总结

我们再来总结一下动态脚本的执行问题：

[1]首先，动态脚本确实能够在一定程度上起到延迟脚本执行的作用，但由于动态脚本的执行时机的不确定性，这种延迟作用的效果也是未知的。

[2]其次，动态脚本的执行顺序不一定会按照添加的顺序，这是动态脚本技术比较大的问题之一，最简单的解决方式就是使用回调函数，监听脚本的加载状态，在一个脚本加载结束后再动态添加下一个脚本。

[3]动态脚本没有确切的执行时机，当通过DOM的appendChild、insertBefore等方法将script元素添加到DOM中时，就会去加载JS脚本，脚本的执行应该是在加载结束后的某个时机，不同浏览器对这个时机的处理差异比较大，比如在IE中，应该是采取尽快执行的策略，也就是在加载结束后尽快寻找时机执行代码

[4]动态脚本可能会在DOMContentLoaded触发之前或者之后执行，因此无法确定其是否会阻塞DOMContentLoaded。而在一般情况下，动态脚本都会阻塞window.onload，但是也会存在动态脚本在window.onload触发之后执行，从而不会阻塞window.onload

2 Ajax注入脚本

2.1Ajax注入脚本的执行时机问题

Ajax脚本注入技术有两种模式：同步加载和异步加载，同步加载的情况比较简单，脚本的加载和执行会阻塞后面代码的执行，直到注入的代码被加载和执行完毕。我们主要讨论异步模式下的情况：

2.1.1 DEMO4：Ajax注入脚本的执行问题初探

我们再添加3个外部文件：

ajax1.js

test += "我是head外部AJAX脚本\n";

ajax2.js

test += "我是body外部AJAX脚本\n";

ajax3.js

test += "我是底部外部AJAX脚本\n";

HTML的代码为：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-"/>
<title>Ajax Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/../jquery-...min.js"></script>
<script src="util.js"></script>
<script type="text/javascript">var test = "";</script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本
";
})
window.onload = function(){
test += "我是window.onload里面的脚本
";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>
<script>
loadXhrScript("ajax.js",true);
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src=".js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadXhrScript("ajax.js",true);
</script>
<script src=".js" type="text/javascript"></script>
</body>
<script>
loadXhrScript("ajax.js",true);
</script>
<script src=".js" type="text/javascript"></script>
</html>

在这段代码中，我们分别在

标签内部、标签内部、标签外部共添加了3个注入脚本，通过正常引入的脚本作为参照，我们看一下在浏览器中的执行结果：

注：firefox、opera、IE中的执行结果可能会变化

从这个执行结果中，我们就可以看到，Ajax注入脚本的执行时机具有更大的不确定性，事实上，与动态脚本类似，Ajax注入脚本的加载过程也是异步的，因此，完成加载的时间首先是不确定的，其次，浏览器在脚本加载完成后何时执行加载的代码同样也是不确定的，对于异步模式下的Ajax注入脚本的执行时机，我们总结如下：

[1]Ajax注入的脚本也具有一定的延迟作用，但是与动态脚本类似，延迟的时间是不确定的。

[2]Ajax注入脚本的执行顺序是无序的，虽然DEMO4中的例子看起来注入的脚本都是按照添加的顺序执行的，但是只要稍微理解异步以及动态脚本执行顺序问题，就应该能够明白这一点。

[3]Ajax注入脚本的执行时机也是不确定的，与脚本的加载时间以及浏览器的处理机制有关。

[4]由于上述的几点，Ajax注入的脚本可能会阻塞DOMContentLoaded，也可能会阻塞window.onload。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。