首页 前端知识 window.onload()函数和jQuery中的document.ready()有什么区别(面试题)

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

2024-09-18 01:09:41 前端知识 前端哥 702 210 我要收藏

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()则不会出现该情况.]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18358.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!