文档章节

理解浏览器DOM绘制的DOMContentLoaed 和 load 事件

bosscheng
 bosscheng
发布于 2015/12/04 15:09
字数 317
阅读 724
收藏 1

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事件了。









© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 79
博文 299
码字总数 91232
作品 0
南京
前端工程师
jQuery内ready与load事件的区别[转]

我之所以转载这篇文章,是因为我前两天在写http://hi.baidu.com/see7di/blog/item/c2ba78601de67c5deaf8f8e9.html这个的时候曾经碰到过ready与load的问题.所以转载过来看一下. 在前面小节中曾...

小囧
2011/08/11
0
0
前端性能优化之Performance神器

  对Chrome控制台有一定的了解的朋友都在知道,Network面板会包括很多网络请求方面的东西,包括Http相关的Request信息,Response信息,以及Cookies等等,都是前端开发需要密切关注的问题。...

趁你还年轻
2017/06/19
0
0
HTML 5 Canvas vs. SVG(摘抄)

摘抄自:http://www.w3school.com.cn/html5/html5canvasvssvg.asp如果之前知道的话,理解起来就不会那么困难了,就能很快看懂代码,然后从模仿到创新。虽然技术的确需要脑力,但是积累多了也...

小敏virgo
2014/09/01
0
0
jquery $(document).ready() 与window.onload的区别

jquery $(document).ready() 与window.onload的区别作者: 字体:[增加 减小] 类型:转载 Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onlo...

wangwenya
2014/05/08
0
0
再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer
06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

71.告警系统主脚本 配置文件 监控项目

20.20 告警系统主脚本(main.sh) 20.21 告警系统配置文件 20.22 告警系统监控项目 20.20 告警系统主脚本(main.sh): ~1.约定:把以后所有的shell脚本放在/usr/local/sbin下,也方便我们查...

王鑫linux
11分钟前
0
0
装饰者模式

装饰者模式 Q:何为装饰模式? ()地给一个对象添加一些额外的(),并且()时,并不影响原对象。扩展功能来说,装饰器模式相比生成子类更为灵活。 Q:使用场景? 1.想要在不影响其他对象的情况下...

阿元
31分钟前
0
0
GO 切片(slice)相关语法

package mainimport("fmt")func main() {var intArr [5]int = [...]int{1,2,3,4,5} //定义一个数组slice := intArr[2:4] //第二个(包含)下标到第四个下标(不包含)fmt.Println...

汤汤圆圆
33分钟前
0
0
活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
47分钟前
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部