首页 > 代码库 > 关于Jquery，js脚本加载执行先后顺序的一些事
关于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 onl oad="func()"> </body></html>
<html> <body onl oad="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(){ ...}); 我所理解的就这样了，写个随笔记录一下，免得又忘了~
关于Jquery，js脚本加载执行先后顺序的一些事