js的并行加载与顺序执行

来源：互联网发布：基本遗传算法编辑：程序博客网时间：2024/06/02 04:11

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文件很多，加载时间很长，这个执行的时间也会很长，没有预加载快。

阅读全文

0 0