文档章节

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

bosscheng
 bosscheng
发布于 2015/12/04 15:09
字数 317
阅读 737
收藏 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
粉丝 81
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
jQuery内ready与load事件的区别[转]

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

小囧
2011/08/11
0
0
再谈 load 与 DOMContentLoaded

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

lucefer
06/21
0
0
前端性能优化之Performance神器

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

趁你还年轻
2017/06/19
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
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux虚拟机安装VmwareTool

1.点击虚拟机: 2.点击安装Vmware-Tools,出现如下界面,将圈起来的拖动到桌面 3.接着打开终端,执行解压缩命令 tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz 这个后面的VMwareTools-10.2....

陈刚生
36分钟前
1
0
Java学习笔记(1) --JSE 、JEE、 JME三者的区别

java SE : java standard edition , JSE。它允许允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的java应用程序。 java SE包含了java Web 服务开发的类,并为java platform ,e...

hellation_
39分钟前
3
0
kafka 环境配置

https://www.cnblogs.com/fly-piglet/p/7762556.html

steel7c4
42分钟前
1
0
关于人工智能的思考

像人类一样可以思考,可以创造的人工智能会出现吗? 个人认为:会出现。但是出现的时间,取决了于硬件架构,和运算架构实现的时候。原因在于,人类智能可以出现,机器智能为什么不可以呢,不...

janl
44分钟前
1
0
破界!Omi生态omi-mp发布,用小程序开发生成Web

omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC、手机浏览器或者微信、手Q webview 的 Web 页面。自今年5月开源以来,...

腾讯开源
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部