位置: 编程技术 - 正文

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入(浏览器环境下的事件循环)

编辑:rootadmin

推荐整理分享浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入(浏览器环境下的事件循环),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:浏览器使用java插件教程,浏览器运行java程序,浏览器环境下哪些技术实现图形渲染,浏览器环境下的事件循环,浏览器环境下防止事件冒泡,浏览器环境下哪些技术实现图形渲染,浏览器环境下哪些技术实现图形渲染,浏览器环境下如何防止事件冒泡,内容如对您有帮助,希望把文章链接给更多的朋友!

在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况、浏览器bug以及其他的细节问题。而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法。总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方面的特性。

代码准备:

我们使用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》2.3节中的loadScript函数来添加动态脚本,同时使用这篇文章2.4节中的loadXhrScript函数来实现Ajax脚本注入。我们把这两个函数都放在util.js中。

另外,本文使用的CHROME的版本为.0..,firefox的版本为.0.4,opera版本为.0..。

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的代码为:

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

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

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

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

[2]动态脚本执行的先后顺序是无法保证的,这一点在 DEMO2:动态脚本对DOMContentLoaded的阻塞

我们把DEMO1中的第行内码修改为:

我们利用《浏览器环境下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代码如下:

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入(浏览器环境下的事件循环)

注: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的代码为:

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

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

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

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

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

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

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

学习JavaScript设计模式之装饰者模式 有时我们不希望某个类天生就非常庞大,一次性包含许多职责。那么我们就可以使用装饰着模式。装饰着模式可以动态地给某个对象添加一些额外的职

学习JavaScript设计模式之单例模式 一、定义保证一个类仅有一个实例,并提供一个访问它的全局访问点。当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击

详解JavaScript对象序列化 一.什么是对象序列化?对象序列化是指将对象的状态转换为字符串(来自我这菜鸟的理解,好像有些书上也是这么说的,浅显易懂!);序列化(Serializa

标签: 浏览器环境下的事件循环

本文链接地址:https://www.jiuchutong.com/biancheng/383831.html 转载请保留说明!

上一篇:js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)(html5过渡的触发机制)

下一篇:深入分析原生JavaScript事件(原生js)

  • 所得税费用科目属于什么科目
  • 所得税费用是什么要素
  • 联营企业子公司抵消比例
  • 个人所得税申报是什么意思?
  • 单位买绿植可以报销吗
  • 劳务派遣差额计税公式
  • 债券作为交易性金融资产的账务处理
  • 劳务支付
  • 年末发票
  • 以前的货款用银行账户吗
  • 生产成本的明细账怎么登记
  • 增值税发票价格低于进项
  • 营改增后新开公司如何报地税?
  • 装修费属于劳务费吗
  • 案例分析正当防卫
  • 股利分配政策的研究背景
  • 上海地方教育费附加减半征收2018
  • 职工食堂租赁费
  • 住房公积金业务挂起
  • 房屋装修费是否分摊到地下车位成本
  • vue2-elm
  • 存出投资款是什么凭证
  • 服务外包企业
  • 物业公司营业成本包括哪些
  • PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
  • 路由器怎么重置网络
  • nerosvc.exe - nerosvc是什么进程 有什么用
  • 个人医疗保险怎么取出来
  • $(window).resize
  • PHP isset()与empty()的使用区别详解
  • 企业财产租赁税率
  • 小型微利企业减免所得税计算公式
  • 外贸企业进项发票能是外贸企业吗
  • 服务费可以暂估成本吗
  • 一行简单的代码
  • gps定位器怎么开启
  • 计算机视觉opencv 有什么项目
  • 零基础舞蹈培训
  • 进项税额转出怎么做账务处理
  • ps怎么参考线快捷键
  • 旅行社差额纳税的规定
  • 工会经费计算公式的例子
  • 对方不给开发票做账可以直接出费用吗?
  • 公司注册资金表格模板
  • 织梦logo怎么更换
  • 银行支付利率的含义是什么
  • 无偿调入的固定资产怎么记账
  • 怎样备份mysql数据库
  • 主营业务成本的摘要怎么写
  • 实收资本印花税属于什么税目
  • 收到增值税发票月饼
  • 合伙企业费用汇总表
  • 捐赠 赞助 区别
  • 非限定性净资产 限定性净资产
  • 费用报销单怎么写 样本图片
  • 结汇时和月底结转汇兑损益
  • 资产减值损失可以计入营业外支出吗
  • 营业执照经营范围怎么变更
  • SQLServer CONVERT 函数测试结果
  • ubuntu 管理软件
  • 解决五大问题
  • 用心一也的一是什么词类活用
  • 东芝笔记本图片及型号
  • 解决win10蓝屏
  • win8系统怎么到桌面
  • win7系统自动重启日志
  • 代码结构说明书
  • perl使用保留字引用什么模块
  • opengl快速入门
  • centos7如何分区
  • unity签名
  • python怎么理解
  • JavaScript中的数据类型
  • Rotate object with mouse click or touch in Unity3D
  • jquery div滚动条
  • 键盘事件有三个 分别是
  • 公司在异地办公
  • 金税盘软件怎么打开
  • 图像信息采集照片
  • 2018年税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设