开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用javascript_pack_tag时，DOMContentLoaded不会在导航后触发，而是在页面重新加载时触发

使用javascript_pack_tag时，DOMContentLoaded事件不会在导航后触发，而是在页面重新加载时触发。

DOMContentLoaded事件是在HTML文档解析完成并且所有DOM节点都已经构建完成后触发的事件。它表示页面的初始HTML文档已经完全加载和解析，并且DOM树已经构建完成，但是外部资源（如图片、样式表、脚本等）可能还没有加载完成。

在使用javascript_pack_tag时，它会将JavaScript打包成一个单独的文件，并在页面加载时引入该文件。当页面重新加载时，浏览器会重新解析HTML文档并加载JavaScript文件，此时才会触发DOMContentLoaded事件。

由于DOMContentLoaded事件是在页面重新加载时触发，所以它不会在导航后触发。导航后的页面刷新或重新加载会导致整个页面重新加载，包括HTML文档和所有资源文件的重新加载，因此DOMContentLoaded事件会在页面重新加载时触发。

在实际开发中，可以利用DOMContentLoaded事件来执行一些需要在DOM构建完成后进行的操作，例如初始化页面元素、绑定事件处理程序等。

腾讯云相关产品和产品介绍链接地址：

云服务器（ECS）：提供可扩展的计算容量，支持多种操作系统，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务，支持自动备份、容灾等功能。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠、高扩展性的对象存储服务，适用于存储和处理各种类型的文件和数据。详情请参考：https://cloud.tencent.com/product/cos
人工智能平台（AI Lab）：提供丰富的人工智能算法和模型，支持图像识别、语音识别、自然语言处理等应用。详情请参考：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等功能。详情请参考：https://cloud.tencent.com/product/iothub

相关搜索:Firebase authStateChanges()不会在颤动热重新加载时触发，但会在浏览器刷新时触发 Javascript不会在页面加载时触发 jQuery点击函数在页面加载时触发 R在页面加载时触发downloadHandler zoom_changed在页面加载时重复触发为shopify触发onclick，而不会在页面加载时发生使用form onsubmit不触发javascript，而是重新加载页面在导航时不重新加载页面(“/”) (svelte-routing)在输入条目时触发的函数，需要在页面加载时触发在页面加载时触发/绑定textbox的jquery事件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

《现代Javascript高级教程》页面生命周期

1.3 应用场景 DOMContentLoaded 事件在页面的 HTML 和 DOM 树加载完成后触发，但在所有外部资源（如图像、样式表、脚本等）加载完成之前。...4.3 应用场景 unload 事件在页面即将被卸载（关闭、刷新、导航到其他页面等）时触发。它可以用于执行一些清理操作，如释放资源、取消未完成的请求等。...DOMContentLoaded 事件在 HTML 和 DOM 树加载完成后触发，适用于执行与 DOM 相关的初始化操作。...load 事件在整个页面及其外部资源加载完成后触发，适用于执行与页面渲染和交互相关的操作。 beforeunload 事件在页面即将被卸载之前触发，适用于询问用户是否确定离开页面或执行一些清理操作。...unload 事件在页面被卸载后触发，适用于执行最后的清理操作。了解页面生命周期事件及其应用场景对于优化页面加载和交互体验非常重要。

1844 0

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

speed=1&cache=0"> 在示例中，DOMContentLoaded 处理程序在文档加载完成后触发，所以它可以查看所有元素，包括它下面的元素。但是，它不会等待图片加载。...你可能在某些网站上看到过（如果你使用浏览器自动填充）—— 登录名/密码字段不会立即自动填充，而是在页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前的延迟。...window.onbeforeunload 如果访问者触发了离开页面的导航（navigation）或试图关闭窗口，beforeunload 处理程序将要求进行更多确认。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。...当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。

1.7K1 0

浅谈script标签中的async和defer

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。...async async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会在加载完毕后执行。...调试推荐使用chrome无痕模式（这样才不会在Performance页签上看到不相关的插件数据）。

1.9K6 0

浅谈script标签中的async和defer

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。...async async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会在加载完毕后执行。...调试推荐使用chrome无痕模式（这样才不会在Performance页签上看到不相关的插件数据）。

1K2 0

JS的页面生命周期事件

今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾生命周期事件 DOMContentLoaded...DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源的页面被全部加载时...，window 对象上的 load 事件就会被触发 3. window.onunload 当访问者离开页面时，window 对象上的 unload 事件就会被触发。...我们可以在那里做一些不涉及延迟的事件，比如关闭相关的弹出窗口可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据参考https://w3c.github.io/beacon/,...当 sendBeacon 请求完成的时候，浏览器可能已经离开了文档，所以就没办法获取服务器的响应数据 4. window.onbeforeunload 如果访问中触发了离开页面的导航或试图关闭窗口，beforeunload

3.3K3 0

domReady的理解

使用异步加载的标签是不会阻塞DOM解析的，当然其就不会阻塞DOMContentLoaded事件的触发，但是依旧会阻塞load事件的触发。...，当然解析CSS与DOM是需要等待前边的Js解析完毕的；当Js在CSS之后时，则DomContentLoaded事件需等到CSS与Js加载完毕才能够触发，上文也提到了CSS的加载会阻塞Js的加载，而Js...当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。不使用动态加载的同样会阻塞load事件，此外即使是异步加载的标签同样会阻塞load事件。...在各种条件下重新整理一下页面加载的过程，主要是在于DOMContentLoaded事件与load事件触发的时间线：自上而下，首先解析HTML标签，生成DOM Tree，此时document.readyState...触发DOMContentLoaded事件。等待设置为async属性的以及图片与等加载，直至页面完全加载完成。

9803 1

浏览器的performance API与页面首屏加载分析

前言现代浏览器提供了performance（性能）这个API来帮助我们分析页面的加载性能，从MDN上可以看到从IE9时代（约2011年）就开始支持了，所以目前来说兼容性还算可以，所以可以研究一下这个API...可以直接理解为页面加载开始的地方。 unloadEventStart 为 unload (en-US) 事件被触发之时的 Unix毫秒时间戳。...不同域，则为0，即加载新页面，就是0，可以被忽略 fetchStart 为浏览器已经准备好去使用HTTP请求抓取文档之时的 Unix毫秒时间戳。这一时刻在检查应用的缓存之前。...domContentLoadedEventStart 代表DOMContentLoaded事件触发的时间节点 domContentLoadedEventEnd 代表DOMContentLoaded事件结束的时间节点...'资源的名字', entryType: '资源的类型，如resource 表示是静态资源，paint 表示是渲染事件', startTime: '资源请求的开始时间(注意不是时间戳，而是相对于页面加载起始的偏移时间

2.3K2 0

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

这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...如果页面中静态的写有script标签，DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。...) 如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...但是，async-script 加载完成后，就会立即执行！如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。

4.7K15 0

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

这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...如果页面中静态的写有script标签，DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。...) 如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...但是，async-script 加载完成后，就会立即执行！如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。

1.6K2 0

InstantClick,让你的网站快到起飞，PJAX技术

技术来更改页面内容，这意味着：你不能依赖DOMContentLoaded和jQuery.ready()这两个函数来触发相关事件（这两个事件在刷新整个页面的时候才会触发，但是你可以使用[InstantClick...’s events]()来替代) 依赖上面两个函数的第三方脚本（比如js代码）需要调整（参阅[事件和脚本的重新加载]()）在加载页面的时候，浏览器不会在显示原本加载进度条了，instantclick...预加载页面 InstantClick 关于预加载方式有多种选择。你可以根据你的服务器配置来选择合适的方式。但是不管怎样，当每个页面改变时，不会重新加载脚本和样式表，这样会使你的页面加载速度提升一倍！...如果您的网站针对移动设备（在安卓和iOS界面上使用了[FashClick]()技术）进行了优化，则当访问者从链接中释放手指时，会发生“点击”，导致预加载大约100 ms的延迟。...InstantClick技术上使你的网站成为单页应用程序，因此当页面切换的时候，不会触发DOMContentLoaded函数。

3.6K2 0

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

秒后（此时正在加载 bootstrap.css），页面出现我是 h1 标签字样，此时页面已经渲染完成。...秒过后样式加载完成的时会造成二次渲染，页面重新渲染出该字样，这就说明 CSS 阻塞 DOM 的渲染只阻塞定义在 CSS 后面的 DOM。...上面这是解析时遇到一个正常的外链的情况，正常外链的下载和执行都会阻塞页面解析；而如果外链是通过 defer 或者 async 加载的时候又会是如何呢？ ?...脚本的执行和 DOMContentLoaded 的触发顺序无法明确谁先谁后，因为脚本可能在 DOM 构建完成时还没下载完，也可能早就下载好了；多个 async，按照谁先下载完成谁先执行的原则进行，所以当它们之间有顺序依赖的时候特别容易出错...DOMContentLoaded 遇到样式前面我们已经介绍到 CSS 是不会阻塞 DOM 的解析的，所以理论上 DOMContentLoaded 应该不会等到外部样式的加载完成后才触发，这么分析是对的

2K3 0

＜script＞脚本以及＜link＞标签对 DOM 解析渲染的影响

DOM解析渲染多个defer属性的script标签，则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕；等所有的defer脚本下载完后，才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。...页面初始加载时，CSS资源一直在加载，body中的script一直没有加载出来，可以看到控制台并没有打印任何东西。...，这可能会导致页面因重新渲染而闪烁。...@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱。

4051 1

【前端面试专栏】script脚本以及link标签对DOM的影响

标签时，则脚本的下载则在后台运行，下载不会阻止DOM解析渲染多个defer属性的script标签，则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕；等所有的defer脚本下载完后，才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。... 页面初始加载时，CSS资源一直在加载，body中的script一直没有加载出来，可以看到控制台并没有打印任何东西。...，这可能会导致页面因重新渲染而闪烁。...@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱。

1241 0

JS 与 CSS 阻塞 DOM 渲染解析的情况详解

事件将在页面DOM解析完成后触发。...倘若在决定渲染页面时，还有尚未加载完成的CSS样式，只能等待其加载完成再去渲染页面。 Body 内的 CSS 来看一个较为特殊的情况。...因此按照分析，初始时页面空白，浏览器loading加载3s后，控制台打印出p标签，同时页面渲染出浅蓝色hello world。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。 ?...，而是将标签当做是DOM的一部分，换句话说浏览器将其认为是特殊的DOM元素，这个DOM元素的特殊性就在于需要进行加载，因此浏览器不会继续向下解析，所以也就没有DOMContentLoaded

2.1K3 1

腾讯企鹅辅导 H5 性能极致优化

Largest contentful paint (LCP)：测量页面开始加载到最大文本块内容或图片显示在页面中的时间。 DomContentLoaded Event：DOM 解析完成时间。...根据 Google 开发文档对浏览器架构的解释：当导航提交完成后，渲染进程开始着手加载资源以及渲染页面。...按需加载后，重新编译，查看打包带来的收益，页面的 Icons 组件 stat size 由 74KB 降到了 20KB，体积减少了 70%。...如下图所示，页面在已经 onload 的情况下触发 iframe 的加载，进度条仍然在不停的转动，直到 iframe 的内容加载完成。...视窗最大内容渲染时间LCP（Largest Contentful Paint）：代表页面可视区域接近完整渲染。加载进度条时间：浏览器 onload 事件触发时间，触发后导航栏进度条显示完成。

1.1K2 0

浏览器特性

这里的 “页面加载完成” 指的是在文档装载完成后会触发 load 事件，此时，在文档中的所有对象都在 DOM 中，所有图片，脚本，链接以及子框都完成了装载。...async 和 defer 属性的相同点是采用并行下载（页面执行到带 async 或 defer 属性的标签时不会阻塞页面渲染，而是边下载脚本边渲染页面）。...带有 defer 属性的脚本将在文档完成解析后，触发 DOMContentLoaded 事件之前执行。...带有 async 属性的脚本会在脚本加载完成后异步执行该脚本（无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后，亦或是 load 事件之后）。...重绘（repaint）：字面意思就是“重新绘制”，相较于重排，重绘对于页面的影响就小得多了，重绘并不会影响元素在文档中的位置，例如改变字体颜色。

1.3K1 0

【总结】关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

事件将在页面DOM解析完成后触发。...倘若在决定渲染页面时，还有尚未加载完成的CSS样式，只能等待其加载完成再去渲染页面。 Body 内的 CSS 来看一个较为特殊的情况。...因此按照分析，初始时页面空白，浏览器loading加载3s后，控制台打印出p标签，同时页面渲染出浅蓝色hello world。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。...，而是将标签当做是DOM的一部分，换句话说浏览器将其认为是特殊的DOM元素，这个DOM元素的特殊性就在于需要进行加载，因此浏览器不会继续向下解析，所以也就没有DOMContentLoaded

1.4K1 0

腾讯企鹅辅导 H5 性能极致优化

Largest contentful paint (LCP)：测量页面开始加载到最大文本块内容或图片显示在页面中的时间。 DomContentLoaded Event：DOM 解析完成时间。...根据 Google 开发文档对浏览器架构的解释：当导航提交完成后，渲染进程开始着手加载资源以及渲染页面。...按需加载后，重新编译，查看打包带来的收益，页面的 Icons 组件 stat size 由 74KB 降到了 20KB，体积减少了 70%。...如下图所示，页面在已经 onload 的情况下触发 iframe 的加载，进度条仍然在不停的转动，直到 iframe 的内容加载完成。...视窗最大内容渲染时间LCP（Largest Contentful Paint）：代表页面可视区域接近完整渲染。加载进度条时间：浏览器 onload 事件触发时间，触发后导航栏进度条显示完成。

1.2K2 0

HTML解析之DOMContentLoaded和onload

说在前面在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。...（在DOMContentLoaded事件触发之前）。...而defer则要等到文档解析DOM构建完成，DOMContentLoaded事件触发之前执行。 async执行时机不确定性，要注意使用场景。...另一个不同的事件 load 应该仅用于检测一个完全加载的页面。在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。...页面加载完毕，触发window.onload 为什么要强调css放头部，js放尾部因为css样式表是浏览器渲染页面的重要一环，应该尽早发起请求加载，毕竟也不会阻塞HTML解析。

1.6K2 0

前端知识普及之页面加载

从微观上分的话，页面加载有两部分一个是以DOMContentLoaded触发为标志的DOM树的渲染完成一个是以辅助资源img,font加载完成为触发标志的onload事件他们两个的具体区别就是"资源的加载...在获得数据响应后,页面开始解析,发生的过程为: (1) 解析HTML结构。 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。...里面需要进行一点解释即DOMContentLoaded事件是在domContentLoaded那段触发的。...domInteractive: 1441112693093, // DOM 解析完成后，网页内资源加载开始的时间 // 在 DOMContentLoaded...另外为complete时，这时候图片等相关资源已经加载完成。这个时候模拟触发DOMContentLoaded事件，其实和onload事件触发时间并没有太久的时间距离。

1.5K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭