文档章节

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

bosscheng
 bosscheng
发布于 2015/12/04 15:09
字数 317
阅读 738
收藏 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
粉丝 80
博文 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
2018/06/21
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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
14
3
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
4
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
5
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
5
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部