浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中，我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况、浏览器bug以及其他的细节问题。而除了defer和async特性，动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法。总的来看，这两种方法都能达到脚本加载不影响页面解析和渲染的作用，但是在不同的浏览器中，这两种技术所创建的脚本的执行时机还是有一定差异，今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方面的特性。
代码准备：
我们使用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》2.3节中的loadScript函数来添加动态脚本，同时使用这篇文章2.4节中的loadXhrScript函数来实现Ajax脚本注入。我们把这两个函数都放在util.js中。
另外，本文使用的CHROME的版本为47.0.2526.80，firefox的版本为43.0.4，opera版本为30.0.1835.125。
1 动态脚本
1.1动态脚本的执行时机问题
我们在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中2.3节DEMO的基础上，增加三个外部js文件：
dynamic1.js
test += "我是head外部动态脚本\n";
dynamic2.js
test += "我是body外部动态脚本\n";
dynamic3.js
test += "我是底部外部动态脚本\n";
1.1.1 DEMO1：动态脚本的执行时机初探
HTML的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dynamic Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="util.js"></script>
<script type="text/javascript">var test = "";</script>
<script>
loadScript("dynamic1.js");
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src="1.js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadScript("dynamic2.js");
</script>
<script src="2.js" type="text/javascript"></script>
</body>
<script>
loadScript("dynamic3.js");
</script>
<script src="3.js" type="text/javascript"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>
在代码中，我们先后将3个动态脚本文件加入到HTML的<head>标签中，同时通过与正常外部脚本和内部脚本的执行来进行比较，我们看一下不同浏览器中的执行结果：
| IE7 | IE9 | IE10 | CHROME | firefox | opera |
|
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
注：firefox和opera中执行结果可能会变化
从上面的例子中，我们可以看出，在不同浏览器中，动态脚本的执行时机差异还是比较大的，但以下两点是可以明确的：
[1]动态脚本确实可以起到不阻塞后续脚本的作用，即延迟作用，但是这个延迟作用却不一定能够持续到所有的正常脚本都执行完毕之后，也无法保证能够延迟到DOMContentLoaded之后
[2]动态脚本执行的先后顺序是无法保证的，这一点在http://www.cnblogs.com/sanshi/archive/2011/02/28/1967367.html这篇文章以及后续的几篇文章中进行了详细的解释
从这个DEMO中还可以看出，动态脚本的执行时机具有较大的不确定性，虽然在DEMO1中，动态脚本都在DOMContentLoaded事件之后执行，但却也并不意味着动态脚本就不会阻塞DOMContentLoaded，我们通过DEOM2来看一下：
1.1.2 DEMO2：动态脚本对DOMContentLoaded的阻塞
我们把DEMO1中的第27行内码修改为：
<script src="/delayfile.php?url=http://localhost/js/load/3.js&delay=5" type="text/javascript"></script>
我们利用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》中的delayfile.php，将3.js的返回延迟5秒钟，我们知道，如果是defer延迟脚本，无论正常外部脚本延迟了多长时间，defer脚本还是会在正常外部脚本之后执行的，但是动态脚本却不是这样了，我们看一下修改后的代码在浏览器中的执行顺序：
| IE7 | IE9 | IE10 | CHROME | firefox | opera |
|
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
注：firefox和opera中执行结果可能会变化
可以看到，在某个正常脚本加载时间较长的时候，动态脚本的执行明显提前，无论在IE还是CHROME、firefox和opera中，均在DOMContentLoaded之前执行，因此我们可以初步判断，动态脚本的执行时机是不确定的，在不同浏览器的执行时机也都存在差异，但总的来看应该是在代码加载结束之后，并且线程中没有JavaScript代码执行的某个时间，但不同浏览器对这个时间有着不同的把握。
因此，动态脚本是否会阻塞DOMContentLoaded也是不确定的，因为动态脚本可能在DOMContentLoaded触发之前，也可能在触发之后执行。而且由于IE<=8不支持真正的DOMContentLoaded事件，jQuery在IE<=8中也是模拟判断该事件的发生(下一篇会专门讲解DOMContentLoaded事件)，一定程度上也会对我们上述代码的执行结果造成影响。
1.1.3 DEMO3：动态脚本与defer
我们知道，defer脚本是有着相对明确的执行时机的，即页面解析完成之后，DOMContentLoaded触发之前加载并且执行，事实上，二者之间在执行时机上并不存在什么关联，但是在实际实验中发现，动态脚本可能会在defer脚本之前或者之后执行，但却不会打断defer脚本的执行，我们再引入《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中2.3节的DEMO中的defer脚本，修改HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dynamic Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="util.js"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>
<script type="text/javascript">var test = "";</script>
<script>
loadScript("dynamic1.js");
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src="defer1.js" type="text/javascript" defer="defer"></script>
<script src="1.js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadScript("dynamic2.js");
</script>
<script src="defer2.js" type="text/javascript" defer="defer"></script>
<script src="2.js" type="text/javascript"></script>
</body>
<script>
loadScript("dynamic3.js");
</script>
<script src="defer3.js" type="text/javascript" defer="defer"></script>
<script src="3.js" type="text/javascript"></script>
</html>
注：firefox和opera中执行结果可能会变化
我们增加了几个defer的脚本，再来看一下各个浏览器中的执行结果：
| IE7 | IE9 | IE10 | CHROME | firefox | opera |
|
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
从实验结果可以看出，动态脚本的执行时机与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-8"/>
<title>Ajax Script Test</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="util.js"></script>
<script type="text/javascript">var test = "";</script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>
<script>
loadXhrScript("ajax1.js",true);
</script>
<script>
test += "我是head内部脚本\n";
</script>
<script src="1.js" type="text/javascript"></script>
</head>
<body>
<button id="test">点击一下</button>
<script>
loadXhrScript("ajax2.js",true);
</script>
<script src="2.js" type="text/javascript"></script>
</body>
<script>
loadXhrScript("ajax3.js",true);
</script>
<script src="3.js" type="text/javascript"></script>
</html>
在这段代码中，我们分别在<head>标签内部、<body>标签内部、<body>标签外部共添加了3个注入脚本，通过正常引入的脚本作为参照，我们看一下在浏览器中的执行结果：
| IE7 | IE9 | IE10 | CHROME | firefox | opera |
|
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
我是head内部脚本 |
注：firefox、opera、IE中的执行结果可能会变化
从这个执行结果中，我们就可以看到，Ajax注入脚本的执行时机具有更大的不确定性，事实上，与动态脚本类似，Ajax注入脚本的加载过程也是异步的，因此，完成加载的时间首先是不确定的，其次，浏览器在脚本加载完成后何时执行加载的代码同样也是不确定的，对于异步模式下的Ajax注入脚本的执行时机，我们总结如下：
[1]Ajax注入的脚本也具有一定的延迟作用，但是与动态脚本类似，延迟的时间是不确定的。
[2]Ajax注入脚本的执行顺序是无序的，虽然DEMO4中的例子看起来注入的脚本都是按照添加的顺序执行的，但是只要稍微理解异步以及动态脚本执行顺序问题，就应该能够明白这一点。
[3]Ajax注入脚本的执行时机也是不确定的，与脚本的加载时间以及浏览器的处理机制有关。
[4]由于上述的几点，Ajax注入的脚本可能会阻塞DOMContentLoaded，也可能不会阻塞window.onload。
由于个人经验尚浅，同时文章中所做的实验的浏览器覆盖率不够大，欢迎大家指正问题与讨论~~
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入的更多相关文章
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 无网络环境下使用docker加载镜像
无网络环境下使用docker加载镜像 你需要做的主要有3步骤: 先从一个有网络的电脑下载docker镜像 [root@localhost ~]# docker pull hub.c.163.com ...
- JS脚本加载与执行对性能的影响
高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...
- 前端性能优化：细说JavaScript的加载与执行
本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 高性能JavaScript（加载和执行）
当浏览器遇到 <script> 标签时,它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素,甚至关闭某一个标签.因此这个时候浏览器就会停止处理页面,先执行Java ...
随机推荐
- myeclipse 上安装 Maven3
myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...
- 验证签名机制——java示例
简单的验证公钥私钥签名认证: 公钥是对外公开的部分,私钥是不公开的部分,一般在项目开发中公钥是给用户,私钥是存于服务器上,二者中有一个加密,则需要另外一个来解密. 下面是java实现的一个比较简单的示 ...
- git版本控制工具的使用（1）。
为了使用. 感谢:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 讲解的很清晰, ...
- Tkinter添加图片
Tkinter添加图片的方式,与Java相似都是利用label标签来完成的: 一.默认的是gif的格式,注意将png后缀名修改为gif还是无法使用,文件格式依然错误. photo = PhotoIma ...
- 783. Minimum Distance Between BST Node
方法一,非递归方法,中序遍历 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *l ...
- CHAPITRE II
J'ai ainsi vécu seul, sans personne avec qui parler véritablement, jusqu'à une panne[pan][机]故障 dans ...
- linux命令tee用法
功能说明:读取标准输入的数据,并将其内容输出成文件. 语 法:tee [-ai][--help][--version][文件…] 补充说明:tee指令会从标准输入设备读取数据,将其内容输出到标准输出设 ...
- c# 动态数组-----“动态”数组
其实在大多数工作中我们能通过前处理来确定我们的数组有多大,这样我们就可以声明相应大小的数组了.我感觉这种“动态”数组就够我用了.比如我要处理excel中数据,数据有m行*n列,这样我就可以通过读取ex ...
- oracle 11g中文乱码解决的办法一
oracle中文乱码解决的办法 正常安装完oracle客户端后,插入数据时,发现中文都是问号. PLL/SQL中输入select userenv('LANGUAGE') From Dual,结果为AM ...
- ACtiveMQ中间件-发布订阅模式
前言:ActiveMQ学习心得 1.MQ是什么 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信, ...