第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
有了更加深入的理解,那这篇教程的目的也就达到了。感谢你的耐心阅读。