山地人

第012期.页面的onload事件

山地人
山地人
2021-05-13

如今,我们写前端代码用惯了各种脚手架工具,各种前端框架。对于那些前端基础却越来越少琢磨,这些框架不说不好,确实帮我们简化了开发工作。但也同时把我们隔离在了框架为我们构建的环境之中。

这样长期下来,我们越来越依赖这些框架,脱离了框架后,反而不太会写代码了。

这一期的内容,我们重点谈页面的onload事件究竟合适发生。我们分几个步骤进行试验,进而搞清楚onload真正的装载时机。

实验一

我们知道script脚本可以放在headbody中,我们先在head中添加script

实验结论

通过实验,发现onload会在整个script完成后才会被调用。

实验二

但是我们并不清楚,如果head部分存在多个script标签,是否还是会这样,所以这一次,我们放置了三个script标签。

为了更好地观察数据,我把onload的注册放在了中间一个script标签中注册

实验结论

通过上面的实验,我们得出两个结论

  1. head中如果有多个script,会依次执行
  2. onload的调用会等待所有head中的标签都运行完毕后,才被浏览器调用。

实验三

接下来,我们在body部分也增加一些脚本,看看运行结果会有什么样的变化

实验结论

通过实验,我们发现onload是会等待所有的脚本都运行结束后才被调用的。

框架代码

紧接着,我们自然就联想到了我们平时所用的VueReact这些前端框架,这些框架的代码也有自己的生命周期,它们自身的生命周期和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构造函数阶段,rendercomponentDidMount都发生在onload之前。

接着,我们再看看在Function Component函数组件中的情况:

实验结论

对于React中的Function Component函数组件来说,组件的初始化和首次渲染都是发生在onload之前。但useEffect是发生在onload之后的。

其实也好理解,useEffect是需要确保react渲染后产生的DOM元素都已经挂载到root节点上,然后再进行后续操作,所以这个事件发生在onload之后也就不奇怪了。

结论

通过上面的这些实验,我们对onload事件发生的时机,以及常见框架的不同阶段和onload的关系也都有了更加深入的理解。

通过本次的内容,如果让你对onload有了更加深入的理解,那这篇教程的目的也就达到了。感谢你的耐心阅读。