浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

2024-10-05 09:46:03

在《浏览器环境下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-"/>
<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里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
var button = document.getElementById("test");
button.onclick = function(){
console.log(test);
}
}
</script>

在代码中，我们先后将3个动态脚本文件加入到HTML的<head>标签中，同时通过与正常外部脚本和内部脚本的执行来进行比较，我们看一下不同浏览器中的执行结果：

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

从上面的例子中，我们可以看出，在不同浏览器中，动态脚本的执行时机差异还是比较大的，但以下两点是可以明确的：

[1]动态脚本确实可以起到不阻塞后续脚本的作用，即延迟作用，但是这个延迟作用却不一定能够持续到所有的正常脚本都执行完毕之后，也无法保证能够延迟到DOMContentLoaded之后

[2]动态脚本执行的先后顺序是无法保证的，这一点在http://www.jb51.net/article/77920.htm这篇文章以及后续的几篇文章中进行了详细的解释

从这个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脚本还是会在正常外部脚本之后执行的，但是动态脚本却不是这样了，我们看一下修改后的代码在浏览器中的执行顺序：

注：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-"/>
<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里面的脚本\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("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里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
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>

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

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

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

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

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

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

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

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

本文是我们小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div&g
js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码

实例一.比较简单粗暴缺少点类型判断 <script type="text/javascript"> var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; v
js阻止浏览器默认行为的简单实例

js阻止浏览器默认行为的简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a> <script> fun
基于JS判断iframe是否加载成功的方法(多种浏览器）

推荐阅读: JS iFrame加载慢怎么解决在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,
JS根据浏览器窗口大小实时动态改变网页文字大小的方法

本文实例讲述了JS根据浏览器窗口大小实时动态改变网页文字大小的方法.分享给大家供大家参考,具体如下: 目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码如下: <script> /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */ function placeholderPic(){
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件. //页面关闭时,先onbeforeunload事件,
js事件处理程序跨浏览器解决方案

本文实例为大家分享了js事件处理程序跨浏览器解决方案,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input type="button" id="button1" va
JavaScript编写检测用户所使用的浏览器的代码示例

能力检测在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数首付存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本. 怪癖检测怪癖实际上是浏览器实现中存在的bug,例如早期的webkit中就存在一个怪癖,即它会再for-in循环中返回被隐藏的属性.怪癖检测通常涉及到运行一段代码,然后确定浏览器是否存在某个怪癖.由于怪癖检测无法精确地检测特定的浏览器和版本. 用
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de
Js与Jq获取浏览器和对象值的方法

JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cl
详解javascript跨浏览器事件处理程序

本文为大家分享了javascript跨浏览器事件处理机制,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨浏览器的事件处理程序</title> </head> <body> <input type="button" value=
浏览器检测JS代码(兼容目前各大主流浏览器)

本文实例介绍了JS代码实现浏览器检测,分享给大家供大家参考,具体内容如下 var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknown Browser"; this.version = this.getBrowser().version || "An Unknown Version"; this.OS = this.getOS() ||

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

相关推荐

随机推荐