04-jQuery/10-尚硅谷-jQuery-原生js和jQuery页面加载完成之后的区别

接下来我们来看一下几颗事件的一些相关操作啊，那么我们现在看哪个事件呢？看我们使用频率最高的一个叫做页面加载完了之后，那么我们知道啊，在几块当中，页面加载完了之后呢，是这样一个写法。啊，那么在原生的GS里面页面加载完之后是下面这种window.unlo洞，那到底它们之间有什么区别，我们来看一下啊现在啊。我在这边找到这个事件这个地方啊，文档加载，我找这个空的，我把上面这些都删掉。好直接删掉，然后把这个呢解开。同时呢，Image我也解开，呃，这个呢，我把它打开。

呃，由于咱们这个网络环境啊，访问这个外网访问不了，特别拦截，所以我把这个地址就写成logo host了，HOST8080啊在能上网的情况下呢，咱们就百度可能也是好一点都不能上网，咱们用这个吧。好点一点GOK可以了，那么现在啊，大家注意看一下，我们在这个页面当中啊，写上两种页面加载完了之后啊，window.onlo等于方水我们乐了一下，咱们说原声GS的页面加载完成之后啊，然后再来看一下几块绿的。这是几query的页面，加载完成之后，咱们同样是给它alert一下。

好，现在呢，咱们运行这个页面，我们就来看看这两个页面加载完了之后执行有啥不同没有。我们点击这个别着急，诶大家发现没有，它先执行的几宽看见吧，然后再执行原生CS啊，诶到到底是巧合吗？还是固定的呢？多刷新几次啊，诶扩里是不是有很多新执行啊，原生GS要等一会看见了吗？原生原生列数都都等一会啊好，那么我们要先说明一下哈，第一他们执行的顺序是什么样子，第一个就是即query的页面加载完成之后，先执行再执行什么原生GS的页面加载完成之后，咱们已经看见了，因为多次都是这样子，那不是说偶然的，那就是固定的，那为什么呢？

为什么呢？咱们稍微说明一下哈，第一，为什么基query的页面加载完成之后是什么呢？是浏览器的内核，解析完页面的标签，创建好对象之后就会马上执行。有同学就会问老师，你咋知道啊？咱们看一下吧哈，不知道大家还记不记得了，咱们说几宽这一个页面加载完了之后，它的全写是什么？全写是核心函数document对象点ready，还记得吗？找个D对吧？嗯，然后这里是不是还有个方式呢？OK，这个是全写，那按照这个全写的话，字面上我们看是什么意思，是document的对象ready是不是准备好之后就会指定一个函数，那我们就想问问老师，那这个document准备好。

他要怎么样才准备好？回忆一下，我们说document对象是不是表示了整个页面中所有的标签，它用来维护管理这些标签对象的时候，好，那你想想，那他的准备工作就应该是啥，是不是就应该是浏览器读完这些标签，把这些标签对象都创建好，他的准备工作是不是就做好了，这个时候他才能管理啊，能理解吗？所以大家注意哈，我们说几块的页面加载完了之后啊，是浏览器的内核，你看啊，当你运行这个页面嘛，浏览器就会读这个页面的内容，然后呢，把这些标签对象都创建好，一旦标签对象都创建好之后，他就马上执行几宽的页面，在两分钟之后。

好，队长知道一下。那么把上面那个删了哈。诶点错了，诶那老师，那为什么原生的GS这个页面加载完了之后会执行比较慢呢。难道他不是等这个创建好了以后他也执行吗？不是，他等的工作做的事情还更多一些，大家注意看一下哈。注意看啊。原生JS的页面加载完成之后，除了要等浏览器内核解析完标签创建好断对象，还要等，还要等什么东西呢？大家注意看啊，标签显示。时需要的内容加载完成，来，别着急，老师这这个前面这个吧，创建好标签对象吗？我还好理解一点，就浏览器读嘛，读到个标签是不是创这个标题对象啊，但是你说这个什么叫做标签显示是需要内容，这是啥意思？注意看啊，对，咱们这里是不是有个I frame，我们说I frame是不是用来显示一个单独页面的，那这个页面它是不是得去加载才行，对吧？那这里是不是也有个图片呢？这个图片是不是也要给个地址，那他肯定也要到网络中去抓取这个图片，把内容读取完之后，它是不是才能显示啊，你看。

大家看这是I，这个是不是图片看见了吗？F12，我们看这个调试器看哪啊看连这个地方现在家注意看哈，我稍微刷新一下，走这是几块的，注意看啊，原生什么时候执行呢？下面这两个东西一爆红它就会执行，你注意看啊，再看一次走几块里的。

稍等，诶看见了吗？他一红原生GS是不是马上执行，那有同学不禁问了，说这个这个这个红跟跟你说的这个你看啊，还要等标签显示的内容加载完成有啥关系啊，你想一想。别着急，这个1.gbg把鼠标移上来，刚好就是这个图片路径的地址，看见了吗？它要到网络中去加载这个图片的，诶，那么爆红为什么就执行了呢？因为爆红它就加载失败，就加载完成，能理解吗？记住啊，加载完成无非就两个结果，对，一种就是我完整的把数据都得到了，是吧，就成功了嘛，一种就是哎呀，实在是加载不到，失败了，失败了以后，你想想这个时候它需要显示的数据它也有了，为什么它使用一个默认的显示，能理解吗？这个时候它需要准备这个数据，也准备好了，而上面这个，你看logo这个是什么，是不是I这个页面的呀，你看见了吧，来了解一下，那就足以说明，大家看他还要等这些标签显示的内容加载，互联网城，它才会执行。

这就是为什么几块这个先执行啊，原生页面的这个加载完了之后后执行，因为后面这个干的事情是不是更多呀，等的事情更多，好那么我们再来看，那么他们之间的次数呢，是我给你演示一下哈。我把原生GS这个多复制几次，123是吧，那几科的这个呢，我也给你复制上几次。然后我说一二。三啊，现在我们来看一下。如果你多注册几个看会怎么样，来，我在这边再次刷新一下H123。

原生GS只有三看见吗？再来一次看看，看看是不是偶巧偶巧合呀，还是偶然的呀，123，你看颗里是不是都是123，原来GS就永远都是九三，对来看啊，你这个操作是不个腐蚀操作，你腐蚀操作永远都是最后一次干到前面的腐蚀嘛，对吧？这没啥可说的，这就是原生阶层，它只会执行最后一次，好，那我们说一下。原生GS的页面加载完成之后，只会执行最后一次的赋值函数，因为你都把前面的该掉了啊，但是注意看啊几这个不是的几块的，这个是什么呢？你每注册一次函数的底层呢，就会把所有的函数都会顺序的记录下来，当触发的时候，按照注册的顺序全部依次执行，这能听懂吧，就你注册了几个他就执行几个，而且按照你注册的顺序。

啊，而且按照你出什么顺序来，比如说我把这个顺序调一下，这是不是三在前面对吧，呃来吧，三看见了吗？一二看来是按照顺序来的吗？啊就这样子哈，OK，那么我们说这个g query的页面加载完成之后啊是全部。把什么呢？注册的方函数依次。依次依次啊，顺序全部执行，就这样子啊。