第012期.页面的onload事件
如今，我们写前端代码用惯了各种脚手架工具，各种前端框架。对于那些前端基础却越来越少琢磨，这些框架不说不好，确实帮我们简化了开发工作。但也同时把我们隔离在了框架为我们构建的环境之中。
这样长期下来，我们越来越依赖这些框架，脱离了框架后，反而不太会写代码了。
这一期的内容，我们重点谈页面的onload事件究竟合适发生。我们分几个步骤进行试验，进而搞清楚onload真正的装载时机。
实验一
我们知道script脚本可以放在head和body中，我们先在head中添加script。
实验结论
通过实验，发现onload会在整个script完成后才会被调用。
实验二
但是我们并不清楚，如果head部分存在多个script标签，是否还是会这样，所以这一次，我们放置了三个script标签。
为了更好地观察数据，我把onload的注册放在了中间一个script标签中注册
实验结论
通过上面的实验，我们得出两个结论
head中如果有多个script，会依次执行onload的调用会等待所有head中的标签都运行完毕后，才被浏览器调用。
实验三
接下来，我们在body部分也增加一些脚本，看看运行结果会有什么样的变化
实验结论
通过实验，我们发现onload是会等待所有的脚本都运行结束后才被调用的。
框架代码
紧接着，我们自然就联想到了我们平时所用的Vue和React这些前端框架，这些框架的代码也有自己的生命周期，它们自身的生命周期和onload又有什么关系吗？
带着这样的疑惑，我们紧接着做了下面的两组实验：
Vue和onload的关系
平时，不管是我们手写vue代码，还是通过脚手架编译生成，都会是把vue生成的代码放在<div id="root"></div>挂载节点的后面，所以下面的实验模拟我们日常的使用场景。
实验结论
通过上面的实验，我们看到的日志，依然符合之前实验的结论。Vue的代码执行完毕后，onload才会被调用。
可是问题来了，Vue内部的组件又生命周期，Vue内部的生命周期和
onload又有什么关系吗？
实验结论
通过实验，我们发现vue实例的生命周期，从创建->挂载这个过程是发生在onload之前的。
也就是说，在vue完成了元素的挂载动作后，onload事件才会发生。
那么，对于
react是否也是这样呢？
React和onload的关系
下面，我们写了一个react的例子，来观察react中组件生命周期和onload的关系。
先看下老版的Class类组件的情况
实验结论
对于React中的Class Component类组件来说，constructor构造函数阶段，render和componentDidMount都发生在onload之前。
接着，我们再看看在Function Component函数组件中的情况:
实验结论
对于React中的Function Component函数组件来说，组件的初始化和首次渲染都是发生在onload之前。但useEffect是发生在onload之后的。
其实也好理解，useEffect是需要确保react渲染后产生的DOM元素都已经挂载到root节点上，然后再进行后续操作，所以这个事件发生在onload之后也就不奇怪了。
结论
通过上面的这些实验，我们对onload事件发生的时机，以及常见框架的不同阶段和onload的关系也都有了更加深入的理解。
通过本次的内容，如果让你对onload有了更加深入的理解，那这篇教程的目的也就达到了。感谢你的耐心阅读。