window.onload()函数和jQuery中的document.ready()有什么区别（面试题）

末蓝、 2024-03-17 15:44 12阅读 0赞

### 1.window.onload()函数和jQuery中的document.ready()有什么区别 ###

$(document).ready() 和 window.onload 方法都是在页面加载完成后执行脚本的方法，但是它们的执行时机不同。

#### 1.执行时间不同： ####

> 1.window.onload()函数表示当页面中所有的对象都加载完毕后才执行，包括所有的图片、音频、视频等，即等到页面的所有资源都准备好了之后才会触发，因此它比较慢。而且如果页面中有很多图片或其他资源需要加载，那么用户可能需要等待很长时间才能看到页面的内容，这就会影响用户体验。
> 
> 2.jQuery中的document.ready()表示DOM加载完成后就执行，不必等到其他资源都加载完成。当HTML页面的DOM结构完全生成之后就会触发。这个事件在页面加载过程中可能会比window.onload()执行得早，因此它更快，并且可以提高用户访问网页的体验。另外，jQuery中的document.ready()函数可以多次调用，而window.onload()只能调用一次。
> 
> 总的来说，$(document).ready() 方法适用于DOM相关的操作，而 window.onload 方法适用于需要等待图片等其他资源加载完成后再执行的操作。

#### 2.编写个数不同： ####

> 1.JavaScript中window.onload不能同时编写多个，因为在window.onload()函数中，多个函数绑定时会发生覆盖问题，即最后一个绑定的函数会替换之前绑定的函数，因此只能绑定一个函数。
> 
> 2.而在jQuery中的document.ready()函数中，多个函数绑定时并不会出现覆盖问题，而是将所有函数都存储在一个数组中，待页面加载完成后依次执行数组中的函数，因此可以同时编写多个函数。

#### 3.简化写法： ####

> 1.window.onload事件需要等到页面上所有的元素（包括图片、音频等）都加载完成后才会触发，所以这个事件应该放在页面底部，避免页面渲染过程中因为事件触发而导致页面卡顿。而且这个事件无法简写，因为要等页面加载完所有元素才能执行相关操作。
> 
> 2.document.ready()是jQuery提供的事件，可以在DOM树构建完成后立即执行，不必等到所有元素都加载完成。另外，document.ready()也可以简写为$(function() \{\})，这是因为$()函数是jQuery中的标识符，也可以被称为别名，等同于使用jQuery()。所以，$(function() \{\})实际上就是$(document).ready(function() \{\})的简写形式。

#### 说明： ####

> 例如某大型图库网站要为所有的图片添加行为事件(例如，点击隐藏或显示)。如果使用,window.onload方法来实现，则必须等该网页每一幅图片全部加载完毕后才可以进行操作，若是采用.jquery的$ (document).ready来实现，则只需要等待DOM解析就绪就可以对其进行操作，不需要等待所有图片都下载完毕。(显然解析网页为DOM树的速度比等待网页加载所有关联文件下载完毕的速度要快的多)

>   
> **问题一:**
> 
> 在$(document).ready()方法内注册事件时，只要DOM解析完毕就会执行:如果出现与图片有关的HTML下载完毕，并且解析为DOM树了，但是图片还未加载完毕，此时图片的宽度和高度属性不一定有效，这时可以使用juqey的load()方法来解决。关于load()方法执行是在元素的onload事件中添加一个处理函数，如果处理函数绑定给window，则会在所欲的内容\[窗口、框架、对象和图像\]加载完毕后触发，若只作用在某个元素上，则会在该元素加载完毕后触发。\[$(window).load(function() \{\})等价于window.onload = function()\{\}\]
> 
>   
> **问题二:**
> 
> window.onload 事件一次只能保存对一个函数的引用，若重复实现该事件，后面的函数引用将覆盖前面的函数:而JQuey提供的$(document).ready()函数在每次调用该方法时都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

例如:

function one() {falert("one")} :
    function two () {alert("two")} :
    window.onload = one.
    window.onload = two;
    输出结果: two[因为后面的two函数覆盖了前面one函数，而是用$(document).ready()则不会出现该情况.]