js的并行加载与顺序执行

最新推荐文章于 2024-10-06 01:03:19 发布

qq_21729177

最新推荐文章于 2024-10-06 01:03:19 发布

阅读量1.2k

点赞数

分类专栏：浏览器

浏览器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javaScript文件（下面简称脚本文件）需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件，我们需要关注的是，这些方式的具体实现和这些方式可能会带来的性能问题。

当浏览器遇到（内嵌）

<script type="text/javaScript" src="example.js"></script>

==经典的做法

既然<script>标签会阻塞其后内容的加载，那么将<script>标签放到所有页面内容之后不就可以避免这种糟糕的状况了吗？将所有的<script>标签尽可能地放到标签底部，以尽量避免对页面其余部分下载的影响。

然在IE8+浏览器上已经实现了脚本并行下载，但在某些浏览器中（即使脚本文件放到了标签底部），页面中脚本仍是一个接着一个加载的。所以我们需要下一个方法，即：动态加载脚本

==动态脚本

通过文档对象模型（DOM），我们可以几乎可

script=document.createElement(‘script’); 
script.type=’text/javaScript’; 
script.src=’file1.js’; 
document.getElementsByTagName(‘head’).appendChild(script);

一个外链file1的

function loadScript(url,callback){
var script=document.createElement(‘script’);
script.type=”text/javaScript”;
if(script.readyState){//IE
 script.onreadystatechange=function(){ 
if(script.readyState==”loaded”||script.readyState==”complete”){ 
script.onreadystatechange=null; callback(); } };
}else{//其他浏览器
 script.onload=function(){ callback(); }; } script.src=url; 
document.getElementsByTagName(‘head’)[0].appendChild(script);
 }

就是增加了一个回调函数，该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了，写法如下（假设file2依赖file1，file1和file3相互独立）：

loadScript(‘file1.js’,function(){ loadScript(‘file2.js’,function(){}); }); loadScript(‘file3.js’,function(){});

file2会在file1加载完后才开始加载，保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的，互不影响。虽然loadScript函数已经足够好，但还是有些不尽人意的地方——通过分析这段代码，我们知道，loadScript函数中的顺序加载是以脚本的阻塞加载来实现的(正如上述红字部分指出的那样)。而我们真正想实现的是——脚本同步下载并按相应顺序执行，即并行加载并顺序执行。

==LABjs

LABjs库能帮我们真正地实现“并行加载与顺序执行”，推荐写法如下：

<script src="LAB.js"></script>
　　<script type="text/javaScript">
　　　　$LAB
　　　　　.script("script1.js").wait()
　　　　　.script("script2-a.js")
　　　　　.script("script2-b.js")
　　　　　.wait(function(){
　　　　　　　initScript1();
　　　　　　　initScript2();
　　　　　})
　　　　　.script("script3.js")
　　　　　.wait(function(){
　　　　　　　initScript3();
　　　　　});
　　</script>

==requireJS

<script src="require.js"></script>
　　<script type="text/javaScript">
　　　　require([
　　　　　　"script1.js",
　　　　　　"script2-a.js",
　　　　　　"script2-b.js",
　　　　　　"script3.js"
　　　　　],
　　　　　function(){
　　　　　　initScript1();
　　　　　　initScript2();
　　　　　　initScript3();
　　　　　}
　　　　);
　　</script>

　　*总结：*
　　1.在head标签中的js，大多数浏览器直接并行加载，会阻碍页面的html和css的渲染，当其中存在dom节点时会报错误。可以添加 defer和async和window.onload。有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用。推荐defer。
　　2.放在<body>标签底部，大部分浏览器这种情况下js也是是并行加载的，在加载完dom树和css的时候页面完成了渲染，不会存在获取不到节点的问题。缺点是，js文件很多，加载时间很长，这个执行的时间也会很长，没有预加载快。