理解浏览器DOM绘制的DOMContentLoaed 和 load 事件
2015-12-04 00:00
501 查看
onload 事件与 DOMContentLoaded区别:
通过浏览器我们可以知道:在浏览器上面有一个load 时间 和 DOMContentLoaded时间:
文件的加载和运行,必须等到 a.js文件超时之后,后面的才能被继续执行。就会导致页面暂时的卡顿,交互点击没有反映的现象存在。
同样的,如果a.js文件加载顺利的话,b.js文件在加载的时候,遇到了pedding情况,但是a.js文件里面的写法是监听window的onload事件,这个时候同样会被卡顿住的不去执行的。这样就会存在问题。
javascript函数被触发的时候,DOM肯定已经渲染好了,所以可以直接在js文件里面写东西了,而不需要在 js文件中
监听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事件了。
相关文章推荐
- angular之ngCloak
- tableViewCell cell 图片大小的设置
- 有限维度的向量空间
- SaltStack自动化运维工具
- saltstack 常用命令
- 如果需要发布webservice,则用到的实体bean必须安装标准写法写
- vs code和node的相关使用 一一 bower 管理文件
- 【已解决】PHP项目需求:在现有网站中每个页面增加一个get参数
- PyQt5教程(四)——事件与信号
- Android Studio如何使用SlidingMenu
- System.identityHashCode(Object o)
- Linux内核编码规范
- JAVA学习第一天1.1
- Tomcat设置热部署
- eclipse tomcat启动失败
- 使kivy支持中文
- 2015年12月3日工作总结
- git get all different files between two revisions
- leetcode -- Remove Duplicates from Sorted List -- 很简单
- 解决UIWebView 前进、后退刷新的坑