JS中的onload与jQuery中的ready差别
日期：2014-05-16 浏览次数：20433 次
JS中的onload与jQuery中的ready区别
一开始我是把console.timeEnd('name');放在onliad后面，onload是单独区分开，但是出现的问题是显示时间为0
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只支持一个，后者优先级高选择后者。
总结：
① 执行时机：
