【学习打卡】load、ready与onload的故事

    菜鸡学习过程中对load与ready有点疑惑，于是在网上搜经验，发现很多都是一样的内容，或者内容太旧，或者自相矛盾。于是菜鸡自己动手实践，潜入源码稍微研究了一下。在此鸣谢我不愿透漏姓名的挚友，感谢挚友的友情帮助。

    【太长不看版/自我总结版】

　　1、DOMContentLoaded是document的一个事件，不必等待样式表，图片或者子框架即可完成加载。

　　2、而当整个页面及所有依赖资源如样式表和图片都已完成加载时，将才会触发load事件。

　　3、DOMContentLoaded和load任一事件都会触发回调函数completed，从而调用jQuery.ready。所以当DOM结构很简单，网速很快的情况下，DOM很容易加载，load和ready的顺序可能会不确定；当DOM结构复杂，或者图片css加载很慢的情况下，且浏览器兼容DOMContentLoaded，会先调用ready，毕竟DOMContentLoaded要先于load完成；浏览器不兼容的情况下，load之后才能触发completed从而调用ready。

    【详情版】

    一、简单翻阅了网上资料：

    1、ready（jQuery）：

 

 

 

 

 

 

 来源：https://www.runoob.com/jquery/event-ready.html

    2、load（jQuery的load有两种，一种已经废弃，一种是Ajax方法，此处暂不讨论。文中我们讨论的是DOM标准下的方法load）：

 

来源：https://developer.mozilla.org/zh-CN/docs/Web/Events/load；

 

 

 

 

来源：https://www.runoob.com/jquery/event-load.html；

 

 

另：load还有一个Ajax方法，此处暂不讨论。

    3、小结：网上资料都说ready是在DOM结构绘制完就执行，而不必等图片和脚本、css等的加载；而load相反，是要等到图片、脚本、css完全加载完成才执行。这个和以上的内容相矛盾。那么谁是谁非呢？菜鸡很疑惑。当然，也可能时间久远API有变，那么不如菜鸡来看看现在版本的API到底是怎样的吧！

    二、开始实验。

    1、实验目的：load和ready到底有什么区别，或者有什么联系。此处的ready是jQuery方法，onload/load是DOM标准。

    2、实验开始（Chrome）：

　　第一步：建立一个单独的html页面，定义好ready和onload。

　　　　当html里面只有一些简单的内容时，比如几个文字，这种情况下先弹出load后弹出ready；当html里面有些内容比较大的内容，比如我外链了很多个图片，这种情况下先弹出ready，后弹出load。

　　　　load和onload的资料在此：https://developer.mozilla.org/zh-CN/docs/Web/Events/load。

 

 

 　　第二步：调试代码找原因。

        实验其实并不严谨，因为太过深入的代码我确实还看不懂，但是目前看来这一部分的代码非常核心。DOMContentLoaded是document的一个事件，不必等待样式表，图片或者子框架即可完成加载。而当整个页面及所有依赖资源如样式表和图片都已完成加载时，将才会触发load事件，load是window之下。所以根据以下代码，我的分析是，DOMContentLoaded和load任一事件都会触发回调函数completed，从而调用jQuery.ready。所以当DOM结构很简单，网速很快的情况下，dom很容易加载，load和ready的顺序可能会不确定；当dom结构复杂，或者图片css加载很慢的情况下，且浏览器兼容，会先调用ready，毕竟DOMContentLoaded要先于load完成；浏览器不兼容的情况下，load之后才能触发completed从而调用ready。