理解浏览器DOM绘制的DOMContentLoaed 和 load 事件
理解浏览器DOM绘制的DOMContentLoaed 和 load 事件
bosscheng 发表于2年前
理解浏览器DOM绘制的DOMContentLoaed 和 load 事件
  • 发表于 2年前
  • 阅读 692
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

onload 事件与 DOMContentLoaded区别:

通过浏览器我们可以知道:在浏览器上面有一个load 时间 和 DOMContentLoaded时间:


DOMContentLoaded和onload 的弊端 

存在这样一种现象,如果页面同时依赖a.js,b.js 这个时候 如果a.js 文件加载被卡顿住的话,一直pedding状态,会阻碍b.js

文件的加载和运行,必须等到 a.js文件超时之后,后面的才能被继续执行。就会导致页面暂时的卡顿,交互点击没有反映的现象存在。

    同样的,如果a.js文件加载顺利的话,b.js文件在加载的时候,遇到了pedding情况,但是a.js文件里面的写法是监听window的onload事件,这个时候同样会被卡顿住的不去执行的。这样就会存在问题。


建议的做法

    但是现在好像不太在意DOMContentLoaded 事件了,因为现在的写法是将script标签写在了 body的最后,也就是说

javascript函数被触发的时候,DOM肯定已经渲染好了,所以可以直接在js文件里面写东西了,而不需要在 js文件中

监听onload 或者 DOMContentLoaded事件了。









共有 人打赏支持
粉丝 80
博文 211
码字总数 91232
×
bosscheng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: