js中DOMContentLoaded和load的区别
如题;DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。
浏览器渲染页面DOM文档加载的步骤:
1.解析HTML结构。
2.加载外部脚本和css文件。
3.解析并执行脚本代码。
4.DOM树构建完成。(此时会触发DOMContentLoaded事件)
5.加载外部图片等文件。
6.页面加载完毕。(此时会触发load事件)
从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。
我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。
js中DOMContentLoaded和load的区别的更多相关文章
- 【转载】DOMContentLoaded与load的区别
DOMContentLoaded与load的区别 (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别
JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- js中的substr和substring区别
js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1) 一个参数: 示例: var str=“Olive”: str.substring( ...
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- js DomContentLoaded 和 load 的区别
如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...
- [转]html js中name和id的区别和使用分析
js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...
- 浅谈js中null和undefined的区别
在JS中,null和undefined是经常让人摸不着头脑的东西,尤其是在数据初始化以及处理的过程中,经常稍微不注意,就会让页面在渲染时出现报错,下面来细说下,这两者之间的区别: null 表示一个对 ...
随机推荐
- 324 Wiggle Sort II 摆动排序 II
给定一个无序的数组nums,将它重新排列成nums[0] < nums[1] > nums[2] < nums[3]...的顺序.例子:(1) 给定nums = [1, 5, 1, ...
- NHibernate系列学习(三)-条件查询Criteria
1.本笔记主要介绍Criteria的使用 2.效果界面 3.代码详情 namespace KimismeDemo { public partial class Form3 : Form { priva ...
- Android的HttpUrlConnection类的GET和POST请求
/** * get方法使用 */ private void httpGet() { new Thread() { @Override public void run() { //此处的LOGIN是请求 ...
- UltraEdit(UE)window破解方法
安装UltraEdit(一路下一步,无难点)成功后,打开软件弹出如下使用模式提示信息. 关掉UltraEdit软件,同时 断本机网络.重新打开UltraEdit软件: 点击[输入许可证密 ...
- What is gradle sync in Android Studio?
What is it? And what does it do? Gradle sync is a gradle task that looks through all of your depende ...
- 不用float也可以让div横向显示
display: inline-block; vertical-align: top; 就这两个属性,给div设置上,div就不会换行显示啦,而且还不影响横向的其他元素的显示.
- Web前端性能优化——提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- zTree 模糊搜索
/** * 搜索树,高亮显示并展示[模糊匹配搜索条件的节点s] * @param treeId * @param searchConditionId 搜索条件Id */ function search ...
- How To:python pip install
官方网站 https://pypi.python.org/pypi/pip/ 下载需要的版本 wget https://pypi.python.org/packages/source/p/pi ...
- UNIX C 总结
--day01--王建立QQ:2529866769今天的内容:一.计算机的框架什么是操作系统?(汽车)加油系统 油门 用户跟加油子系统交互的窗口.(接口)方向系统 方向盘 用户跟方向系统的交互接口.导 ...