浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入_javascript技巧_懂视

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

2020-11-27 21:49:01 责编:小采

在《浏览器环境下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外部动态脚本 ";

dynamic2.js

test += "我是body外部动态脚本 ";

dynamic3.js

test += "我是底部外部动态脚本 ";

1.1.1 DEMO1：动态脚本的执行时机初探

HTML的代码为：

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

显示全文

全部频道