如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. 3.解析并执行脚本代码. 4.DOM树构建完成.(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件. 6.页面加载完毕.(此时会触发load事件) 从以上DOM文档加载步骤上可以看出:当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件…

如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. 3.解析并执行脚本代码. 4.DOM树构建完成.(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件. 6.页面加载完毕.(此时会触发load事件) 从以上DOM文档加载步骤上可以看出:当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件…

DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? (2)我们一再强调将css放在头部,将js文件放在尾部,这样有利于优化页面的性能,为什么这种方式能够优化性能? (3)在用jquery的时候,我们一般都会将函数调用写在ready方法内,这是什么原理? 首先看一下 DOMContentLoaded顾名思义,就是dom内容加载完毕.那什么是dom内容加载…

1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash. 我们需要给一些元素的事件绑定处理函数.但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的. 这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数. DOM文档加载的步骤为 解析HTML…

/* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * */ window.addEventListener( 'load', function() { var spans = document.querySelectorAll('span'); console.log( spans, 'load' ); } ); document.addEventLi…

声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? (2)我们一再强调将css放在头部,将js文件放在尾部,这样有利于优化页面的性能,为什么这种方式能够优化性能? (3)在用jquery的时候,我们一般都会将函数调用写在ready方法内,这是什么原理? 首先看一下 DOMContentLoaded顾名思义,就是d…

javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先会去加载脚本,然后执行.在处理完脚本之后,浏览器便继续解析HTML文档. 当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件: 如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等位于脚本前面的css加载完才能执行. 在任何情况下,DOMContentLoaded 的触发…

一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load load 仅用于检测一个完全加载的页面,页面的html.css.js.图片等资源都已经加载完之后才会触发 load 事件. 二.浏览器的一些基本概念 下载/加载 浏览器将资源下载到本地的过程. 解析 解析的意思是将一个元素通过一定的方式转换成另一种形式. 比如 html 的解析.首先要明确,html 下载…

一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded The DOMContentLoaded event is fired when the initial HTML document has been completely…

load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的. DOM文档加载步骤: (1)解析html结构 (2)加载外部脚本和样式表文件 (3)解析并执行脚本代码 (4)构造HTML DOM模型   //DOMContentLoaded执行点 (5)加载图片等外部文件 (6)页面加载完毕  //load 从上面这个流程,我们就能很清晰的看到load和DOMContentLoaded的不同,load是在第六步完成之后执行,而DOMContent…

一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash. 二.为什么要区分? 开发中我们经常需要给一些元素的事件绑定处理函数.但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的.这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再…

一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash. 二.为什么要区分? 开发中我们经常需要给一些元素的事件绑定处理函数.但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的.这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再…

JQuery里有ready和load事件 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 他们的主要区别为ready先执行,load后执行. DOM文档加载的步骤: (1) 解析HTML结构. (2) 加载外部脚本和样式表文件. (3) 解析并执行脚本代码. (4)…

1.    什么是 DOMContentLoaded.打开 Chrome DevTools,切到 Network 面板,重新加载网页,得到如下截图: 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间,只不过表现形式不同而已.     什么是 DOMContentLoaded 我们先来思考一个问题,如何衡量一个网页的加载速度? 有人说可以用网页加载完全的时间来衡量.我觉得这没有问题,但不够…

前端小学生向大家推荐一个网站:Sit the test.如果你是一名前端工程师或者立志于此,不妨试试此网站上面的测验题. 发现 十几天前,我在奇舞周刊的一篇文章中,发现了一个国外的技能测试网站:Sit the test.测试分为HTML Core,CSS Core,CSS Core(practice)和JavaScript Core四部分,每种测试有25道题,限时30分钟.有了国内大牛的博客推荐,让我对测试题的含金量十分信服,当时我迫于证明自己,马上抽出时间挨着做了一遍: 做完就傻眼了,25题错…

document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中写入字符串,一旦文档流已经关闭,那document.write就会重新利用document.open打开新的文档流并写入,此时原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染新的页面. 写入文本 下面来看看如何在利用document.write来写入脚本.先考虑如下代码:…

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.本文将详细介绍事件对象 获取事件对象 [1]一般地,event对象是事件程序的第一个参数 [注意]IE8-浏览器不支持 //IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] <div i…

还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 所以$(fn)===$(document).ready(fn). 来看一下jQuery.fn.ready的源码 ready: function( fn ) { // Add t…

原文:http://www.cnblogs.com/wmhuang/p/5452259.html ---------------------------------------------------------------------------------------------- 场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.D…

Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属…

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo…

jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:…

由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地 向页面中添加大量的处理程序. 在创建 GUI 的语言(如 C#)中,为 GUI 中的每个按钮添加一个 onclick 事件处理程序是司空见惯的事,而且这样做也不会导致什么问题. 可是在 JavaScript 中,添加到页面上 的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方面的.首先,每个 函数都是对象,都会占用内存:内存中的对象越多,性能就越差.其次,必须事先指定所有事件处理程…

本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本文后的文字引用和图片引用均来自<JavaScript高级程序设计>,引用稍有改变原文,不改变意思. 本文仅作巩固基础之用,如果有不正确的地方,还望指出. 更好的排版可以点这里 事件 个人认为:不论是浏览器自带的事件,还是自定义事件,都是观察者模式的实现.更确切地说:事件流是会流动的,流到哪个节点,…

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ----------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序.     IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档):     NetScape:事件捕获流,即…

Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板.这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调…

document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中写入字符串,一旦文档流已经关闭,那document.write就会重新利用document.open打开新的文档流并写入,此时原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染新的页面. 写入文本 下面来看看如何在利用document.write来写入脚本.先考虑如下代码:…

  关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面.这一次我们着重讲解一下放在标签内部.在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的.所以各种getElementById.getElementsByTagName实质上是获取不到的,也谈不上如何进行Style样式的修改或者更多的操作.所以当我们把Js脚本放在了标签里,我们需要延时执行Js脚本文件. 1.标签属性defer和async   这个是HTML5的属性,在标签内部标注了de…

面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network…

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&…