[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="https://lib.sinaapp.com/js/jquery/../jquery-...min.js"></script> <script src="https://www.jb51.net/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="https://www.jb51.net/article/.js" type="text/javascript"></script> </head> <body> <button>点击一下</button> <script> loadXhrScript("ajax.js",true); </script> <script src="https://www.jb51.net/article/.js" type="text/javascript"></script> </body> <script> loadXhrScript("ajax.js",true); </script> <script src="https://www.jb51.net/article/.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。
您可能感兴趣的文章: