JS中的onload与jQuery中的ready差别

jQuery的运行机制（onload与ready的差别）

结论得出前自行測试: 为了測试是否真如所说的那样，所以在页面插入了20000张照片，照片数量少得不出什么结论，所以改用console.log（）来測试。这样一来我能够非常好的看出在页面最底端有没有都载入出来，还有是打印出的结果的事件顺序。

所用到的JS代码是：

console.time('name');
 window.onload = function() {
            console.log('onload2');
            console.timeEnd('name');
}

一開始我是把console.timeEnd('name');放在onliad后面，onload是单独区分开，可是出现的问题是显示时间为0

所以找出原因是，onload在页面都运行完后，也就是标签以及图片都载入出来后才运行对应的JS代码，

执行測试后; onload在20000张照片的强大作用下耗时：30ms

Ready的測试：

所用到的JS代码是：

console.time('name');
console.time('name');
    $(document).ready(function(){
console.log('ready1');console.timeEnd('name');
})

在执行ready的JQ代码时，Ready是在页面还未都载入完毕就显示结果了，且时间是20ms

在測试时候我增加了两个onload，这时候，还有增加两个ready做測试，

window.onload = function() {
              console.log('onload1');
        }
window.onload = function() {
              console.log('onload2');
}

console.time('name');
           $(document).ready(function(){
              console.log('ready1');
       })
       console.time('name');
              $(document).ready(function(){
              console.log('ready2');
       })

显示执行结果是：

能够看出，在基于前面的总结情况下，ready比onload先行输出结果，也就是运行的机制不同。再来看，onload2输出。onload1却没有输出，能够看出，在编写个数显示出来的时候。ready支持编写多个个数。并且是依照顺序输出的，而onload仅仅支持一个，后者优先级高选择后者。

总结：

① 运行时机：

onload：在整个document文档（包含了载入图片等其它信息）载入完毕后就能够直接对dom进行操作，比方一张图片要等这个图标载入完毕之后才干设置图片的宽高的属性或样式等。

ready ：是在dom载入完毕后就能够直接对dom进行操作，比方一张图片仅仅要<img>标签完毕，不用等这个图片载入完毕，就能够设置图片的宽高的属性或样式等；

② 编写个数：

<script>

     window.onload = function() {

          alert(1);

     }

     window.onload = function() {       // 仅仅弹出11

          alert(11);

     }

     $(document).ready(function() {    // 依照顺序弹出 2  22 

          alert(2);

     });     

     $(document).ready(function() {

          alert(22);

     });     

  </script>



执行结果：弹出顺序：  2--->22--->11

③ 简写

Window.onload 没有简写形式

$(document).ready() 能够简写成$()

$()  ===   $(document).ready

 $(document).ready(function(){ alert(2);

  

 });

等价于：

 $(function(){ alert(2);

   })