1.3 应用场景 DOMContentLoaded 事件在页面的 HTML 和 DOM 树加载完成后触发，但在所有外部资源（如图像、样式表、脚本等）加载完成之前。...4.3 应用场景 unload 事件在页面即将被卸载（关闭、刷新、导航到其他页面等）时触发。它可以用于执行一些清理操作 ，如释放资源、取消未完成的请求等。...DOMContentLoaded 事件在 HTML 和 DOM 树加载完成后触发，适用于执行与 DOM 相关的初始化操作。...load 事件在整个页面及其外部资源加载完成后触发，适用于执行与页面渲染和交互相关的操作。 beforeunload 事件在页面即将被卸载之前触发，适用于询问用户是否确定离开页面或执行一些清理操作。...unload 事件在页面被卸载后触发，适用于执行最后的清理操作。 了解页面生命周期事件及其应用场景对于优化页面加载和交互体验非常重要。
speed=1&cache=0"> 在示例中，DOMContentLoaded 处理程序在文档加载完成后触发，所以它可以查看所有元素，包括它下面的 元素。 但是，它不会等待图片加载。...你可能在某些网站上看到过（如果你使用浏览器自动填充）—— 登录名/密码字段不会立即自动填充，而是在页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前的延迟。...window.onbeforeunload 如果访问者触发了离开页面的导航（navigation）或试图关闭窗口，beforeunload 处理程序将要求进行更多确认。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。...当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。...async async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会在加载完毕后执行。...调试推荐使用chrome无痕模式（这样才不会在Performance页签上看到不相关的插件数据）。
它们的区别在于： DOMContentLoaded事件在初始的HTML被完全加载和解析完成后触发，但不等待样式表、图片等资源加载。 load事件在页面所有资源（包括样式表、图片等）加载完成后触发。...我们可以使用这两个事件来确定页面的加载状态，并结合document.readyState属性来判断DOM是否已准备好。...当这些事件触发时，会执行相应的回调函数。在回调函数中，我们检查document.readyState属性的值： 如果值是'complete'，表示DOM已经完全加载，所有资源也已经加载完成。...例如，如果你想在DOM完全加载后执行一些初始化操作，就需要确保这些操作不会在DOM未准备好的情况下执行。通过监听这些事件，你可以确保在合适的时机执行相应的代码，提高代码的稳定性和性能。...结束 在不使用任何JavaScript框架或库的情况下，我们可以通过监听DOMContentLoaded和load事件，以及检查document.readyState属性的值，来确定DOM是否已准备好。
今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在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
使用异步加载的标签是不会阻塞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属性的以及图片与等加载，直至页面完全加载完成。
前言 现代浏览器提供了performance（性能）这个API来帮助我们分析页面的加载性能，从MDN上可以看到从IE9时代（约2011年）就开始支持了，所以目前来说兼容性还算可以，所以可以研究一下这个API...可以直接理解为页面加载开始的地方。 unloadEventStart 为 unload (en-US) 事件被触发之时的 Unix毫秒时间戳。...不同域，则为0，即加载新页面，就是0，可以被忽略 fetchStart 为浏览器已经准备好去使用HTTP请求抓取文档之时的 Unix毫秒时间戳。这一时刻在检查应用的缓存之前。...domContentLoadedEventStart 代表DOMContentLoaded事件触发的时间节点 domContentLoadedEventEnd 代表DOMContentLoaded事件结束的时间节点...'资源的名字', entryType: '资源的类型，如resource 表示是静态资源，paint 表示是渲染事件', startTime: '资源请求的开始时间(注意不是时间戳，而是相对于页面加载起始的偏移时间
Playwright 中，wait_until 参数用于指定 page.goto 方法在导航到新页面时应该等待的事件类型。...这个参数的值可以是以下几种状态之一，每种状态代表页面加载的不同阶段： 'commit': 考虑操作成功完成时，页面已经接收到网络响应并开始加载文档。...'domcontentloaded': 考虑操作成功完成时，DOMContentLoaded 事件被触发，即页面的 DOM 内容已经完全加载和解析，但是图片、样式表和框架可能还在加载中。...'load': 考虑操作成功完成时，load 事件被触发，即页面包括所有依赖资源（如图片、样式表等）已经加载完成。...'networkidle': 不推荐使用，考虑操作成功完成时，页面在至少 500 毫秒内没有任何网络连接活动。
这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...如果页面中静态的写有script标签，DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。...) 如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...但是，async-script 加载完成后，就会立即执行！如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。
技术来更改页面内容，这意味着： 你不能依赖DOMContentLoaded和jQuery.ready()这两个函数来触发相关事件（这两个事件在刷新整个页面的时候才会触发，但是你可以使用[InstantClick...’s events]()来替代) 依赖上面两个函数的第三方脚本（比如js代码）需要调整（参阅[事件和脚本的重新加载]()） 在加载页面的时候，浏览器不会在显示原本加载进度条了，instantclick...预加载页面 InstantClick 关于预加载方式有多种选择。你可以根据你的服务器配置来选择合适的方式。 但是不管怎样，当每个页面改变时，不会重新加载脚本和样式表，这样会使你的页面加载速度提升一倍！...如果您的网站针对移动设备（在安卓和iOS界面上使用了[FashClick]()技术）进行了优化，则当访问者从链接中释放手指时，会发生“点击”，导致预加载大约100 ms的延迟。...InstantClick技术上使你的网站成为单页应用程序，因此当页面切换的时候，不会触发DOMContentLoaded函数。
秒后（此时正在加载 bootstrap.css），页面出现 我是 h1 标签 字样，此时页面已经渲染完成。...秒过后样式加载完成的时会造成二次渲染，页面重新渲染出该字样，这就说明 CSS 阻塞 DOM 的渲染只阻塞定义在 CSS 后面的 DOM。...上面这是解析时遇到一个正常的外链的情况，正常外链的下载和执行都会阻塞页面解析；而如果外链是通过 defer 或者 async 加载的时候又会是如何呢？ ?...脚本的执行 和 DOMContentLoaded 的触发顺序无法明确谁先谁后，因为脚本可能在 DOM 构建完成时还没下载完，也可能早就下载好了； 多个 async，按照谁先下载完成谁先执行的原则进行，所以当它们之间有顺序依赖的时候特别容易出错...DOMContentLoaded 遇到样式 前面我们已经介绍到 CSS 是不会阻塞 DOM 的解析的，所以理论上 DOMContentLoaded 应该不会等到外部样式的加载完成后才触发，这么分析是对的
DOM解析渲染多个defer属性的script标签，则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕； 等所有的defer脚本下载完后， 才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。...页面初始加载时，CSS资源一直在加载，body中的script一直没有加载出来，可以看到控制台并没有打印任何东西。...，这可能会导致页面因重新渲染而闪烁。...@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱。
标签时，则脚本的下载则在后台运行，下载不会阻止DOM解析渲染 多个defer属性的script标签，则在后台并行下载 脚本的执行需要等到页面解析完成才能进行 当页面解析渲染完毕后, 会等到所有的defer...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕； 等所有的defer脚本下载完后， 才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。... 页面初始加载时，CSS资源一直在加载，body中的script一直没有加载出来，可以看到控制台并没有打印任何东西。...，这可能会导致页面因重新渲染而闪烁。...@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱。
事件将在页面DOM解析完成后触发。...倘若在决定渲染页面时，还有尚未加载完成的CSS样式，只能等待其加载完成再去渲染页面。 Body 内的 CSS 来看一个较为特殊的情况。...因此按照分析，初始时页面空白，浏览器loading加载3s后，控制台打印出p标签，同时页面渲染出浅蓝色hello world。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。 ?...，而是将标签当做是DOM的一部分，换句话说浏览器将其认为是特殊的DOM元素，这个DOM元素的特殊性就在于需要进行加载，因此浏览器不会继续向下解析，所以也就没有DOMContentLoaded
Largest contentful paint (LCP)：测量页面开始加载到最大文本块内容或图片显示在页面中的时间。 DomContentLoaded Event：DOM 解析完成时间。...根据 Google 开发文档 对浏览器架构的解释： 当导航提交完成后，渲染进程开始着手加载资源以及渲染页面。...按需加载后，重新编译，查看打包带来的收益，页面的 Icons 组件 stat size 由 74KB 降到了 20KB，体积减少了 70%。...如下图所示，页面在已经 onload 的情况下触发 iframe 的加载，进度条仍然在不停的转动，直到 iframe 的内容加载完成。...视窗最大内容渲染时间LCP（Largest Contentful Paint）：代表页面可视区域接近完整渲染。 加载进度条时间：浏览器 onload 事件触发时间，触发后导航栏进度条显示完成。
这里的 “页面加载完成” 指的是在文档装载完成后会触发 load 事件，此时，在文档中的所有对象都在 DOM 中，所有图片，脚本，链接以及子框都完成了装载。...async 和 defer 属性的相同点是采用并行下载（页面执行到带 async 或 defer 属性的标签时不会阻塞页面渲染，而是边下载脚本边渲染页面）。...带有 defer 属性的脚本将在文档完成解析后，触发 DOMContentLoaded 事件之前执行。...带有 async 属性的脚本会在脚本加载完成后异步执行该脚本（无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后，亦或是 load 事件之后）。...重绘（repaint）：字面意思就是“重新绘制”，相较于重排，重绘对于页面的影响就小得多了，重绘并不会影响元素在文档中的位置，例如改变字体颜色。
事件将在页面DOM解析完成后触发。...倘若在决定渲染页面时，还有尚未加载完成的CSS样式，只能等待其加载完成再去渲染页面。 Body 内的 CSS 来看一个较为特殊的情况。...因此按照分析，初始时页面空白，浏览器loading加载3s后，控制台打印出p标签，同时页面渲染出浅蓝色hello world。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。...，而是将标签当做是DOM的一部分，换句话说浏览器将其认为是特殊的DOM元素，这个DOM元素的特殊性就在于需要进行加载，因此浏览器不会继续向下解析，所以也就没有DOMContentLoaded
说在前面 在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。...（在DOMContentLoaded事件触发之前）。...而defer则要等到文档解析DOM构建完成，DOMContentLoaded事件触发之前执行。 async执行时机不确定性，要注意使用场景。...另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。...页面加载完毕，触发window.onload 为什么要强调css放头部，js放尾部 因为css样式表是浏览器渲染页面的重要一环，应该尽早发起请求加载，毕竟也不会阻塞HTML解析。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
