JS的并行加载与执行顺序
JavaScript文件（下面简称脚本文件）须要被html文件引用才能在浏览器中运行。在html文件中能够经过不一样的方式来引用脚本文件，咱们须要关注的是，这些方式的具体实现和这些方式可能会带来的性能问题。javascript
当浏览器遇到（内嵌）<script>标签时，当浏览器无从获知JavaScript是否会修改页面内容。所以，这是浏览器会中止处理页面，限制性JavaScript代码，而后再继续解析和渲染页面。一样的状况也会发生在使用src属性加载JavaScript的过程当中（即外链JavaScript），浏览器必须先花时间下载外链文件中的代码，而后解析并执行它。在这个过程当中，页面渲染和用户交互彻底被阻塞了。css
也就是说，每当浏览器解析到<script>标签（不管是内嵌仍是外链）时，浏览器会（一根筋的）优先下载、解析并执行该标签中的JavaScript代码，而阻塞了其余全部页面内容的下载和渲染。html
五种引用脚本的方式：java
1.惯例的作法浏览器
最传统的方式是在head标签内插入<script>标签，然而这种常规的作法却隐藏着严重的性能问题，根据上述对<script>标签特性的描述，咱们知道，在该例中，当浏览器解析到<script>标签时，浏览器会中止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的test.css样式文件和<body>标签都没法被加载，因为<body>标签无被加载，那么页面天然就没法渲染了。所以在该JavaScript代码彻底执行以前，页面都是一片空白。app
<script type="text/javascript"src="example.js"></script>函数
2.经典的作法性能
既然<script>标签会阻塞其后内容的加载，那么将<script>标签放到全部页面内容以后不就能够避免这种糟糕的情况了吗？将全部的<script>标签尽量地放到<body>标签底部，以尽可能避免对页面其他部分下载的影响。然在IE8+浏览器上已经实现了脚本并行下载，可是在某些浏览器中（便是将脚本文件放在<body>标签底部），页面脚本还是一个接一个加载的，因此咱们须要下一个方法，即：动态加载脚本ui
3.动态脚本url
经过文档对象模型（DRM），咱们几乎能够在页面任何地方建立。
var script=document.createElement('script');
script.type='text/javascript';
script.src='file1.js';
document.getElementByTagName('head')[0].appendChild(script);
上述代码动态地建立了一个外链file1的<script>标签，并将其添加到<head>标签内。这种技术的重点在于：
不管在什么时候启动下载，文件的下载和执行过程不会阻塞页面其余流程（包括脚本加载）。
然而这种方法也是有缺陷的，这种方法加载的脚本会在下载完成后当即执行，那么意味着多个脚本之间的运行顺序是没法保证的（除了Firefox和Opera）。当某个脚本对另外一个脚本有依赖关系时，就极可能发生错误了，好比，写一个jQuary代码，须要引入jQuary库，然而你写的jQuary极可能会先完成下载并当即执行，这是浏览器会报错——jQuery库还未下载完成，因而就作出如下改进：
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会在file2加载完成后才开始加载。保证了在file2执行前file1已经准备稳当。而file1和file3是并行下载的，互不影响。虽然loadScript函数已经足够好，但仍是有些不只以德地方——经过分析这段代码，咱们知道，loadScript函数中的加载顺序是以脚本的阻塞加载来实现的，而咱们真正想实现的是——脚本同步下载病案相应顺序执行，即并行加载并顺序执行。
4.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>
5.requireJS
<script src="require.js"></script>
require([
"script1.js",
"script2-a.js",
"script2-b.js",
"script3.js"
],
function(){
initScript1();
initScript2();
initScript3();
}
)
</script>
- 1. js顺序加载与并行加载
- 2. js加载与执行顺序
- 3. 顺序执行与并发执行
- 4. 类加载执行顺序
- 5. JS执行顺序
- 6. js执行顺序
- 7. JS顺序执行
- 8. js 执行顺序
- 9. Java中类加载的执行顺序
- 10. java 类的加载执行顺序
- 更多相关文章...
- • Eclipse 运行程序 - Eclipse 教程
- • MyBatis SqlSession和Mapper接口执行Sql - MyBatis教程
- • 算法总结-归并排序
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js顺序加载与并行加载
- 2. js加载与执行顺序
- 3. 顺序执行与并发执行
- 4. 类加载执行顺序
- 5. JS执行顺序
- 6. js执行顺序
- 7. JS顺序执行
- 8. js 执行顺序
- 9. Java中类加载的执行顺序
- 10. java 类的加载执行顺序