文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

window的onload事件和domcontentloaded执行顺序

上述三个图分别为chrome edge和Firefox，我们发现他们的结果都是一样的，先执行documentloded事件，然后再执行window.onload事件。...当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。...相反，DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。 浏览器还在对象load上提供事件window。当此事件触发时，表示页面上的所有资源都已加载，包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行，但是窗口的加载事件已经发生，并且这些侦听器永远不会运行。

4.4K10

JS异步加载的三种方式

事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。...，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。...脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。...三：延迟加载 有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。...JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？

4.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端知识普及之页面加载

    里面需要进行一点解释 即DOMContentLoaded事件 是在domContentLoaded那段触发的。...相关事件 domComplete: 1441112693214, // load 事件发送给文档，也即 load 回调函数开始执行的时间 // 注意如果没有绑定...//计算load触发时间 var loadTime = t.domComplete - t.domLoading; 更直观的，我们可以在Chrome的developer工具的network选项里面得到我们想要的答案...这两个线，分别代表的是DOMContentLoaded和onload触发的时间。 这也更能直观的看出，DOMContentLoaded事件比onload事件先触发吧。现在回到我们开头的那个问题。...这个时候模拟触发DOMContentLoaded事件，其实和onload事件触发时间并没有太久的时间距离。 这种方式兼容低版本IE还是不太可靠的。

    2K90

    使用原生 JavaScript 在页面加载完成后处理多个函数

    网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。...因为下面的 HTML 元素还没有加载出来，head 中的处理这部分 HTML 元素的脚本已经被执行了。...使用监听器让脚本与 HTML 元素分离 监听器实际上的功能就是行为与内容分离的。...以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数，而现在直接在 JavaScript 中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，

    4.7K20

    【前端】：async、defer、onload、DOMContentLoaded

    DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。...注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。 兼容性： ?...行为模拟： 在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll...总结： CSS 会阻碍 DOMContentLoaded； CSS 会阻塞 JS 执行； 2.2. onload The load event is fired when the whole page...2.3. jQuery.ready(fn) 源码摘录 API： // jQuery offers several ways to attach a function // that will run

    2.2K20

    探究网页资源究竟是如何阻塞浏览器加载的

    阅读完这篇文章你将解开如下谜团： 如何用 Chrome 定制网络加载速度？ 图片/视频/字体会阻塞页面加载嘛？ CSS 是如何阻塞页面加载的？ JS 又是如何阻塞页面加载的？...DOM 的加载，更加不会阻塞页面渲染；当图片加载完成的时候，会打印 onload，说明图片延迟了 onload 事件的触发。...上面这是解析时遇到一个正常的外链的情况，正常外链的下载和执行都会阻塞页面解析；而如果外链是通过 defer 或者 async 加载的时候又会是如何呢？ ?.../2.1.4/jquery.min.js') 我是 h1 标签 动态插入的脚本在加载完成后会立即执行，这和 async 一致，所以如果需要保证多个插入的动态脚本的执行顺序...DOMContentLoaded 和 onload 在浏览器中加载资源涉及到 2 个事件，分别是 DOMContentLoaded 和 onload，那么它们之间有什么区别呢？

    2.5K30

    $(document).on和$(#idname).on和$(function(){ })区别

    引言 　　在写前端的时候经常用到js或jquery语法，有时候傻傻分不清，现在将学习过程中遇到的总结一下。 　　...(function(){})在window.onload执行前执行的，(function(){})类似于原生 js 中的DOMContentLoaded事件，在 DOM 加载完毕后，页面全部内容（如图片等...DOM 文档加载步骤： 解析 HTML 结构 加载外部的脚本和样式文件 解析并执行脚本代码 执行 $(function(){}) 内对应代码 加载图片等二进制资源 页面加载完毕，执行 window.onload...和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。...2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。 　　3.

    2.5K20

    10 种跨域解决方案（附终极方案）

    1.同源策略 跨域问题其实就是浏览器的同源策略所导致的。 ❝「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题 想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...，在 chrome 中是能看到返回值的，但是只要不满足以上其一，浏览器会报错，获取不到返回值。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

    3.5K30

    10 种跨域解决方案（附终极方案）

    1.同源策略 跨域问题其实就是浏览器的同源策略所导致的。 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题 想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...，在 chrome 中是能看到返回值的，但是只要不满足以上其一，浏览器会报错，获取不到返回值。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

    3.5K12

    Web 性能优化-首屏和白屏时间

    我们只需要监听首屏内所有的图片的 onload 事件，获取图片 onload 时间最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!...(1) Performance.timing 在 chrome 中查看 performance.timing 对象： 与浏览器对应的状态如下图： 左边红线代表的是网络传输层面的过程，右边红线代表了服务器传输回字节后浏览器的各种事件状态...loadEventStart: load 事件发送给文档，也即 load 回调函数开始执行的时间。 loadEventEnd: load 事件的回调函数执行完毕的时间。...jQuery 中经常使用的 $(document).ready() 其实监听的就是 DOMContentLoaded 事件。 (2) load 是指页面上所有的资源（图片，音频，视频等）加载完成。...jQuery 中 $(document).load() 监听的是 load 事件。

    3.5K22

    异步加载脚本保持执行顺序

    2.Window onload： 通过监听window的onload事件来触发行内代码的执行。只要确保外部脚本在window。Onload之前下载执行就可以保持执行顺序。 运行结果： ?...：1.必须确保异步脚本是通过阻塞onload事件的方式加载的。          ...4.Script onload： 前面提到的整合技术会增加页面的脆弱性、延迟和开销，通过监听脚本的onload事件可以解决这些问题。 运行结果： ? ?...缺点：需要修改外部脚本，对第三方库不适用。 多个脚本按序执行： 正常引入脚本： 运行结果： ? ? 采用XHR eval： 运行结果： ? ? 由于脚本没有按顺序执行，出现未定义的错误。...代码： /* 数组queuedScripts存储执行队列中的脚本，每个脚本是拥有三个属性的对象： response: XHR响应 onload: 脚本加载后触发的函数 bOrder: 如果该脚本需要依赖其他脚本按顺序执行

    2.3K20

    再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...，不确定图片的样式到底如何，牵扯到重绘资源问题）,js不会阻塞img的解码、paint（估计chrome做了优化，具体本人还不知，希望客官补充）。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。...而当页面有大量的二进制文件（页面加载的时长大于阻塞的时长的时候），document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

    2.9K20

    再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...，不确定图片的样式到底如何，牵扯到重绘资源问题）,js不会阻塞img的解码、paint（估计chrome做了优化，具体本人还不知，希望客官补充）。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。...而当页面有大量的二进制文件（页面加载的时长大于阻塞的时长的时候），document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

    5.8K150

    10 种CORS跨域解决方案

    1.同源策略 跨域问题其实就是浏览器的同源策略所导致的。 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。...情况四: 请求中的任意XMLHttpRequestUpload对象均没有注册任何事件监听器；XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问。...情况五: 请求中没有使用ReadableStream对象。 b.非简单请求 除以上情况外的。 c.Node 中的解决方案 原生方式 我们来看下后端部分的解决方案。...cookie 问题 想要传递cookie需要满足 3 个条件 1.web请求设置withCredentials 这里默认情况下在跨域请求，浏览器是不带 cookie 的。...> let first = true; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if (first

    8.8K20

    【博客同步】onload与ready对比

    类函数 : JS的 window.onload 方法， jQuery 的 (document).ready 方法和 (window).load 方法 ready 事件的触发，表示文档结构已经加载完成（...不包含图片等非文字媒体文件） onload / load 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成 2 区别 2.1 执行时间 window.onload 在页面的DOM加载完成，...).ready 方法发生在DOM树构造完成（在onload之前发生），不必等图片等资源加载完 $(document).ready(function(){ alert("jquery ready...}csxiaoyao.com) 结果： jquery ready event1 jquery ready event2 window onload event2 2.3 简化写法 window.onload...没有简化写法 (document).ready(function(){}) 可以简写成 (function(){}); 3 原生JS实现 jQuery 的 ready 方法 function ready

    38600

    《微信小程序七日谈》- 第三天：玩转Page组件的生命周期

    今天这篇文章简单记录一下在使用小程序Page组件时对于其生命周期的一些使用心得。...浏览器的用户行为事件机制，以及我们所熟悉的jQuery中，使用on作为捕获/监听事件的API命名，这种情形下可以把on理解为当某件事情发生时做某些行为，这也是大部分前端工程师对on语义的理解。...onload的触发时机是在文档加载完成之后，在执行我们定义的onload逻辑之前，文档已经完成了load行为。也就是说，onload并没有拦截load行为，而是在load事件之后发生。...具体到Page的生命周期钩子函数，大家请凭第一感觉理解下面几个函数的执行时机： onLoad onShow onReady 我相信大部分人对于这三者的理解是：钩子函数在load/show/ready完成之后执行...小程序中并没有父子组件的关系谱，组件的数据不会区分props和state，全部是统一的data，并且全部是动态的。任何data的修改都会触发Rerender。

    1.5K100

    onload 和 domready

    事件就会迟迟无法触发 所以出现了 DOM Ready 事件 熟悉 jQuery的人，都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery... 事件比 onload 事件快许多，它是在 DOM 准备完毕后触发（不需等待资源下载完毕） DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM...所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件 下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件，但都是实现了...，比如一张图片只要 img 标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； 2、Dom Load 是在整个 document 文档（包括了加载图片等其他信息）加载完成后就可以直接对...一样，会在页面或图像加载完成后触发（即所有元素的资源都下载完毕），但是： FireFox 的 script 元素不支持 onreadystatechange 事件，只支持 onload 事件 IE 的

    2.9K20

    用框架的你，可能早已忽略了这些事件API

    乍一看，DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它的触发条件。它并没有什么特别之处。...window.onload 当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。...[4] img onload [4] readyState:complete [4] window onload 方括号中的数字表示发生这种情况的大致时间。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。...当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。

    2.4K10

    jquery $(document).ready()与window.onload的区别

    在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。...要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...jQuery 代码如下： $(window).load(function (){ // 编写代码 }); //等价于 JavaScript 中的以下代码 Window.onload...的ready()方法 请注意，如果事件已经被触发，回调将不会被执行。

    2.9K31

    JavaScript 开发者需要了解的15个 DevTools 技巧

    查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...DOM 中被删除 发生此类事件时，将在 Sources 面板中自动触发断点。...断点有的时候并不好用，例如，如果在运行 1000 次的循环的最后一次循环报错了。这时你可以添加一个条件断点，让它仅在满足特定条件时才触发断点，例如 i > 999 。...这可以让你: 在不需要构建工具的情况下在实时编辑脚本或样式 离线开发一个网站，该网站通常会要求第三方域提供基本文件 临时替换不必要的脚本，例如 analytics。...强制触摸而不是鼠标或其他本机设备事件。 设置空闲状态以检查你的应用如何响应锁定屏幕。

    7K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券