$.ready()实现原理,window.onload的区别

有一次面试被问到$.ready()的作用,答:当DOM加载完毕时触发。
接着问$.ready()与window.onload的区别是什么?答:不知道...
再问$.ready()的实现原理是什么?答:不知道...
所以写篇博客压压惊

$.ready()与window.onload的区别

  1. 加载时间不同
    • window.onload要等到所有东西都加载完毕才开始执行
    • $.ready()是等到DOM构建完成就开始执行
    • 浏览器构造网页的过程请看这篇文章的第一部分
  2. 可以出现的次数不同
    • window.onload在一个网页中只能出现一次,多次不会都执行
    • $.ready()可以在一个网页中多次出现,并顺序执行
    • 另外,jquery采用的是发布订阅模式,这篇文章用了入门的例子说明了前端常用的设计模式
  3. 不是什么大区别,$.ready()的简化写法可以写成$(),而window.onload没有简化写法。

$.ready()的实现原理

具体的可以看这篇文章,代码写的很详细
jquery ready方法实现原理 内部原理
$.ajax基于原生的DOMContentLoaded,mdn中是这样描述的

当初始HTML文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。另一个不同的事件 load
应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load
是一个非常流行的错误,所以要谨慎。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容