位置: 编程技术 - 正文

浏览器环境下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)

  • 研发支出属于什么现金流量项目
  • 企业所得税的计算公式
  • 社群运营收入怎么样
  • 预提费用报税时填哪里
  • 房地产企业施工电费会计分录
  • 零申报小微企业注销有影响吗
  • 非独立核算分公司个税怎么申报
  • 门店活动经费计入什么
  • 建筑图纸设计费包括晒图费吗
  • 现金流量表中收入怎么算
  • 专票可以当费用票吗
  • 购买固定资产增值税可以抵扣
  • 季度销售额不超过30万,城建税减免
  • 购买股票相关税费会计分录
  • 企业为员工租房后的事故处理
  • 汇总纳税申报期
  • 离职补偿金要交个税的例子
  • 现金流量表中所指的现金是指( )
  • 付尾款会没货吗
  • 发票 发票联
  • 企业未代扣代缴个税
  • 企业无形资产包括
  • 公司注销要交分红税吗
  • windowsserver2003设置用户密码
  • 开具的电子发票需要打印出来做账吗
  • 公司必须开基本户才能开发票吗
  • 筹建期固定资产是否要折旧
  • 华为手机悬浮导航是干什么用
  • 投资企业流程
  • 桌面图标归纳
  • Win11安装失败怎么办
  • php bcmul
  • 集团关联企业间关联交易对账单
  • 加拿大巨石
  • 货币资金属于
  • 企业怎么知道增值税的核定方法
  • zen+框架
  • php 电商
  • 利息支出属于成本项目吗
  • php获取指定数量的数据
  • 我初次尝试制作的英文怎么写
  • php判断字符串是否为ip地址
  • 增值税专用发票几个点
  • 消耗性生物资产属于什么科目
  • 小企业会计准则财务报表至少包括
  • 玉米 收购
  • 运输行业油费怎么入账
  • 什么是企业所得税收入
  • 税收制度政策
  • 贷款调查的主要内容
  • 工会经费计提比例是应发工资还是实发工资
  • 3%减按2%征收增值税是什么意思
  • 销售返现如何做账务处理
  • 半成品是指正在各生产阶段加工的产品
  • 坏账准备确认坏账
  • 预付款充值发票
  • 加班餐补需要发票嘛
  • 餐饮服务的监管由哪个部门负责
  • mysql批量执行sql文件
  • win2003启动无法显示桌面
  • win2003怎么安装
  • linux.iso在哪里
  • centos怎么样
  • WIN+VMWARE6.5上面网络配置centOs(5.4版) ADSL接入的小结
  • ip地址有冲突怎么查看
  • linux解压操作
  • win8无法使用内置管理员账户打开ie
  • pptd40nt.exe是什么进程 有什么用 pptd40nt进程查询
  • javascriptdom编程
  • Animation.setFillAfter and Animation.setFillBefore的作用
  • 搭建android开发环境时为什么要先安装jdk
  • 用git打更新包的代码
  • eval()方法
  • bat注销命令
  • JavaScript为事件句柄绑定监听函数实例详解
  • 医院要交税吗
  • 慧算账财务公司简介
  • 网上申报增值税纳税申报表怎么填写
  • uk在哪里看开票截止日期
  • 核算成本需要哪些数据来源
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设