关于Jquery，js脚本加载执行先后顺序的一些事
好久没用Jquery了，最近有个东西需要写一下，就想了想那些让脚本延缓执行的一些方法有什么区别呢。
（1）当然，第一种方式就是将脚本内嵌在html中相应需要执行的地方，需要等到页面加载完成的话就放在最后。当然这已经是大家很不屑的做法，一般也就是一些测试啊什么的时候会用用或者代码就一几句话，其他很少会这么做了。作为外部文件引入的优点也就不赘述了，一般都明白。
（2）将<Script>标签从head放到〈/body〉之前，其他html内容之后。这也很好理解，主要的html加载完之后，脚本才开始运行，当然要注意，这里的加载完仅仅指的是DOM加载完，图片之类的还不一定加载完成。
（3）使用defer（推迟）属性。这个属性是表明脚本在执行时不会影响页面构造，也就是说脚本会在整个页面解析完成之后再运行，这其实和第二点是一样的，除了〈Script〉标签可以放在head里了。但是这个属性的兼容性有待考证，旧版本的浏览器只有IE是支持的，相对较新的浏览器倒是都支持了。
（4）使用async（异步）属性。这个属性是html新添加的属性,从英文解释就可以看出，该属性是为了页面之间加载不出现阻塞的情况，是并行加载相关项，所以和defer执行效果相似，但是有一个不同，可能会造成脚本的严重问题，就是运行的时机。defer是有顺序的，按照原先语句的先后顺序执行，这样对有依赖关系的脚本没有影响；但是async是下载完成就执行，要是不同脚本之间有依赖关系，就有可能会造成未知的严重错误（当然也是有可能正常使用的）。
之前说的都是关于脚本加载的先后顺序，至于执行的先后顺序，方法就更多种多样了。
（5）在onload事件之后调用,注意这是在页面所有元素加载完毕后执行的，也就是图片，flash都要先加载完，脚本才执行；还有，onload才能执行一个，不能执行多个。
a）写在body的onload事件里：
<html>
<body onload="func()">
</body>
</html>
<html>
<body onload="func1();func2();func3();">
</body>
</html>
b）写在脚本代码里
<script type="text/javascript">
function func(){……}
window.onload=func;
</script>
<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
window.onload=function(){
func1();
func2();
func3();
}
</script>
c）Jquery的写法
$(window).load(function() {
...
});
d）JS自定义函数式多次调用（我倒是从来没用过额```）
<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!="function"){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);
</script>
（6）Jquery使用$(document).ready()，这是在DOM加载完毕就执行，不是所有元素加载完成；相对于onload只能执行一个，ready可以有多个且都能执行：
ps：要想使用Js直接实现，还是有点小麻烦的~~
$(document).ready(function(){
...
});
//简写成如下
$(function(){
...
});
我所理解的就这样了，写个随笔记录一下，免得又忘了~
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
