通常情况下我们会将JS代码书写在window.onload（）事件中；因为当onload事件发生后，初始化界面已经渲染完成，此时操作dom不会出现获取不到界面元素的情况。但这种方式有一个问题，假如界面中有一个图片瀑布流，那么只能等到图片加载完成才会触发onload事件。这段期间，用户显然无法操作界面，这是不可取的。实际上，操作dom并不需要加载完成所有的东西，例如img标签，不是等到图片加载完成后才可以操作dom，当dom数渲染完成后，用户应该就可以去触发事件了，图片之类的可以让它继续加载。
原生的js没有提供domready事件，但是jQuery提供了一个解决方案，就是入口函数$(document).ready()。jQuery的入口函数是对domready的一种实现，我们先看一下它和onload函数的执行顺序。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://h.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938e41eb7d7d9628535e5dd6fa0.jpg" alt="稍等">
</body>
<script src="./jquery-1.11.1.js"></script>
<script>
onload = function () {
console.log('我是onload事件的输出')
}
$(document).ready(function($) {
console.log('我是ready事件的输出')
})
</script>
</html>
执行的结果也是显而易见的：
ready事件的输出先于onload事件，但是接管事件差别有多大呢，我们把输出时间加上。浏览器的network设置为了 GPRS可以看到更加明显的效果。
模拟的网络不佳条件下，二者的执行时间相差了将近30秒，此时仅仅加载了一张图片。所以在开发中最好还是采用ready方法，可以减少用户等待的时间。
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
