开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

并不是所有的DOM内容在waitUntil：'domcontentloaded‘之后都准备好了

在浏览器加载网页时，DOM（文档对象模型）是网页的结构化表示。DOMContentLoaded是一个事件，表示当初始的HTML文档被完全加载和解析完成之后，DOM树已经构建完成，但是一些外部资源（如图片、样式表、脚本等）可能还没有加载完成。

然而，并不是所有的DOM内容在DOMContentLoaded之后都准备好了。这是因为在网页加载过程中，可能存在一些异步操作，例如通过JavaScript动态加载内容或者通过AJAX请求获取数据。这些异步操作可能会导致DOM的一部分在DOMContentLoaded之后才被完全加载和准备好。

在这种情况下，可以使用waitUntil参数来延迟执行某些操作，直到特定条件满足。在这个问题中，waitUntil的值是'domcontentloaded'，表示等待直到DOMContentLoaded事件触发后再执行后续操作。

对于这种情况，可以采取以下措施来确保所有的DOM内容都准备好了：

使用DOMContentLoaded事件监听器：可以在DOMContentLoaded事件触发时执行需要在DOM准备好后进行的操作。例如，可以将JavaScript代码放置在DOMContentLoaded事件监听器中，以确保在DOM构建完成后再执行。
使用异步加载脚本：如果有一些脚本需要在DOM加载完成后执行，可以将这些脚本标记为异步加载，以确保它们在DOMContentLoaded事件之后执行。例如，在script标签中添加async属性。
使用延迟加载脚本：类似于异步加载脚本，延迟加载脚本也可以确保脚本在DOMContentLoaded事件之后执行。不同之处在于，延迟加载脚本会在脚本下载完成后立即执行，而不会等待其他资源的加载完成。可以在script标签中添加defer属性来实现延迟加载。

总之，虽然大部分DOM内容在DOMContentLoaded事件之后都准备好了，但是在处理一些异步操作时，需要注意确保所有的DOM内容都已经加载和准备好了。这样可以避免在操作DOM时出现错误或不完整的情况。

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

腾讯云前端开发相关产品：https://cloud.tencent.com/product/fe
腾讯云后端开发相关产品：https://cloud.tencent.com/product/ba
腾讯云软件测试相关产品：https://cloud.tencent.com/product/st
腾讯云数据库相关产品：https://cloud.tencent.com/product/db
腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
腾讯云云原生相关产品：https://cloud.tencent.com/product/tke
腾讯云网络通信相关产品：https://cloud.tencent.com/product/en
腾讯云网络安全相关产品：https://cloud.tencent.com/product/ss
腾讯云音视频相关产品：https://cloud.tencent.com/product/vod
腾讯云多媒体处理相关产品：https://cloud.tencent.com/product/mp
腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
腾讯云物联网相关产品：https://cloud.tencent.com/product/iot
腾讯云移动开发相关产品：https://cloud.tencent.com/product/mob
腾讯云存储相关产品：https://cloud.tencent.com/product/cos
腾讯云区块链相关产品：https://cloud.tencent.com/product/bc
腾讯云元宇宙相关产品：https://cloud.tencent.com/product/vr

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

有帮助

没帮助

相关·内容

构建离线web应用（二）

我们也可以在应用中缓存一些资源。这篇文章我们准备了解这些：service workers 以及缓存是如何一起配合给用户一个完美的离线体验。...在这篇文章中，我们将要：了解社区中常见的缓存策略尝试可用的缓存 api 做一个用来展示 Github trending project 的 demo 在 demo 中演示离线状态下利用缓存所带来的体验...Service Worker 对于这两种存储方案都提供支持。那么问题来了，什么场景下选择哪一种技术方案呢？ Addy Osmani 的博客已经总结好了。...只需要利用正则，比之前枚举所有的文件简单很多。...运行时缓存的内容在应用程序运行时，需要缓存从服务端获取的动态内容。不再是 app shell 了，而是用户真正浏览的内容。

9408 0

onload 和 domready

Ready 事件熟悉 jQuery的人，都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery 的 DOM 准备完毕，资源还没加载完..."); }) DomReady DomReady 事件就是在 DOM 文档结构准备完毕后触发，即在资源加载前触发 DOMContentLoaded DOMContentLoaded 事件比 onload...事件快许多，它是在 DOM 准备完毕后触发（不需等待资源下载完毕） DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM 文档准备好以后触发...所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件，但都是实现了...准备完毕，资源还没加载完"); }) // 在 document 文档加载完成后就可以对 DOM 进行操作（即所有元素的资源都下载完毕） window.onload = function(){

2.7K2 0

Script标签的async和defer

其实script还有两个属性，async和defer，也是可以使得JavaScript和DOM和css同步加载。说着两个属性之前先简单说一下DOMContentLoaded和load。...DOMContentLoaded：DOM内容加载完毕，页面会展示内容，但是图片、音视频等资源还未加载就触发DOMContentLoaded事件。...Load：在DOMContentLoaded触发之后触发，这时候图片、音视频等资源也已经加载完毕了。知道了这两个事件之后，我们来说说async和defer。...这两个都是用来控制外部脚本文件的，就是使用script引入，有src属性，在script标签没有src属性的内联脚本是无效的。这两个都不会阻塞HTML的解析。...，渲染引擎尽快渲染内容，现在已经不会等所有HTML解析之前开始构建和布局render树，部分内容将提前渲染，就是说并不是一定要DOM和css都解析加载完成构建render树之后才渲染页面。

6473 0

【总结】1873- 一个前端非侵入式骨架屏自动生成方案

侵入业务式手写代码这种方式是直接在写业务代码的时候将骨架屏代码写好，该代码作为业务代码的一部分，每次修改骨架屏代码都相当于在修改业务代码。因此对业务代码有一定侵入性，后续维护成本略高。...骨架屏生成骨架屏生成分为准备、处理和输出三个阶段。...这个参数就是 waitUntil 参数解析： waitUntil > When to consider navigation succeeded, defaults...domcontentloaded - consider navigation to be finished when the DOMContentLoaded event is fired....一共有四个参数，分别是 load/domcontentloaded/networkidle0/networkidle2 。

5301 2

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

这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...complete：代表加载成功，文档加载完成，并且所有resource都加载完毕通过下面代码验证，在chrome上貌似只有 interactive和complete。

5K15 0

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

测试前环境准备测试之前我们需要对浏览器下载资源的速度进行控制，将它重新设置为 50kb/s，操作方式：打开 Chrome 开发者工具；在 Network 面板下找到 Disable cache 右侧的下拉列表...可以说解析 DOM 和解析 CSS 其实是并列进行的，既然是并列进行的，那 CSS 和 DOM 就不会互相影响了，这和结论一相符；另外渲染页面一定是在得到 CSSOM 树之后进行的，这和结论二相符。...的渲染只阻塞定义在 CSS 后面的 DOM。...defer 和 async JS 一定会阻塞定义在其之后的 DOM 的加载嘛？来测试一下： <!...脚本的执行和 DOMContentLoaded 的触发顺序无法明确谁先谁后，因为脚本可能在 DOM 构建完成时还没下载完，也可能早就下载好了；多个 async，按照谁先下载完成谁先执行的原则进行，所以当它们之间有顺序依赖的时候特别容易出错

2.1K3 0

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

这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...这个事件触发之后（而不是window.load事件），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...complete：代表加载成功，文档加载完成，并且所有resource都加载完毕通过下面代码验证，在chrome上貌似只有 interactive和complete。

2.1K2 0

Chrome的First Paint触发的时机探究

哈哈，居然只渲染了12俩字，说明浏览器会渲染body中脚本之前的内容，那会是哪个脚本之前的内容呢？第八种情况：在div之间都插入脚本 ? ?...所以结合之前得出的结论，在CSSOM准备就绪之后，浏览器会提前渲染第一脚本前的内容，我们可以用第九种情况来验证：第九种情况：这种情况和上种没什么区别，只是增加了一个CSS，这个CSS中还会发出一个请求去加载其他...通过结果可以看出，123在CSS下载完成之后才渲染，而不是单独渲染一个1，所以FP必须得等到CSSOM准备就绪之后才会触发，否则即使有第一脚本在也没用。...换句话说就是第一脚本之前的DOM和CSSOM准备就绪之后，便会着手渲染第一脚本前的内容。但是...你以为到这里就结束了？其实没有。...CSSOM和DOM提前渲染第一脚本前的内容（触发FP）；如果第一脚本前的JS和CSS都还没下载完成，body中的脚本就已经下载完了，那么浏览器就会在所有JS脚本都执行完之后才触发FP。

2.8K9 0

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

但也并不是所有的script标签都会触发Paint。head中的script标签是不会触发的，毕竟此时body还没有解析，触发Paint也看不到任何内容。...DOM解析渲染多个defer属性的script标签，则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕；等所有的defer脚本下载完后，才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。...标签加载CSS资源时也阻塞的JS的执行之后，因为CSS资源加载失败，所以开始执行下面的script，并且打印出console内容-当前时间。...标签里面的内置样式；@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。

5571 1

Chrome的First Paint触发的时机探究

哈哈，居然只渲染了12俩字，说明浏览器会渲染body中脚本之前的内容，那会是哪个脚本之前的内容呢？第八种情况：在div之间都插入脚本 ? ?...所以结合之前得出的结论，在CSSOM准备就绪之后，浏览器会提前渲染第一脚本前的内容，我们可以用第九种情况来验证：第九种情况：这种情况和上种没什么区别，只是增加了一个CSS，这个CSS中还会发出一个请求去加载其他...通过结果可以看出，123在CSS下载完成之后才渲染，而不是单独渲染一个1，所以FP必须得等到CSSOM准备就绪之后才会触发，否则即使有第一脚本在也没用。...换句话说就是第一脚本之前的DOM和CSSOM准备就绪之后，便会着手渲染第一脚本前的内容。但是...你以为到这里就结束了？其实没有。...CSSOM和DOM提前渲染第一脚本前的内容（触发FP）；如果第一脚本前的JS和CSS都还没下载完成，body中的脚本就已经下载完了，那么浏览器就会在所有JS脚本都执行完之后才触发FP。

1.8K4 0

window的onload事件和domcontentloaded执行顺序

当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。...当通过对此方法的连续调用添加多个函数时，它们在DOM按照添加顺序准备就绪时运行。从jQuery 3.0开始，jQuery确保在一个处理程序中发生的异常不会阻止随后添加的处理程序执行。...但是，jQuery的.ready()方法以一种重要且有用的方式不同：如果DOM准备就绪并且DOMContentLoaded在代码调用之前浏览器触发.ready( handler )，则该函数handler...例如，可以在使用诸如$.getScript()的方法加载页面很久之后动态加载脚本。...所以jq的ready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同的，所以在使用过程中应当进行一些注意。

3.7K1 0

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

资源，因此可以理解为当图片或者 iframe 都加载出来了，首屏肯定已经完成了。...由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。...domContentLoadedEventStart: DOM 解析完成后，网页内资源加载开始的时间，在 DOMContentLoaded 事件抛出前发生。...domComplete: DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件。...jQuery 中经常使用的 $(document).ready() 其实监听的就是 DOMContentLoaded 事件。 (2) load 是指页面上所有的资源（图片，音频，视频等）加载完成。

2.8K2 1

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

但也并不是所有的script标签都会触发Paint。 head中的script标签是不会触发的，毕竟此时body还没有解析，触发Paint也看不到任何内容。..., 会等到所有的defer脚本下载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。...如果defer脚本下载较慢，在下载完前, 页面解析渲染已完毕；等所有的defer脚本下载完后，才按照顺序执行defer脚本。执行完毕后会触发DOMContentLoaded事件。...，link标签加载CSS资源时也阻塞的JS的执行之后，因为CSS资源加载失败，所以开始执行下面的script，并且打印出console内容-当前时间。...标签里面的内置样式；@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。

1781 0

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

准备工作首先需要做的准备工作是，搭建一个服务器，目的是为了返回css样式和js脚本，并且让服务器根据传递的参数，固定延时返回数据。...比较合理的解释就是，首先浏览器无法知晓JS的具体内容，倘若先解析DOM，万一JS内部全部删除掉DOM，那么浏览器就白忙活了，所以就干脆暂停解析DOM，等到JS执行完成再继续解析。...其实这样做也是有道理的，设想JS脚本中的内容是获取DOM元素的CSS样式属性，如果JS想要获取到DOM最新的正确的样式，势必需要所有的CSS加载完成，否则获取的样式可能是错误或者不是最新的。...而这个结论才是解释为何CSS会阻塞JS的执行的真正原因，浏览器无法预先知道脚本的具体内容，因此在碰到标签时，只好先渲染一次页面，确保脚本内能获取到DOM的最新的样式。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。 ?

2.1K3 1

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

准备工作首先需要做的准备工作是，搭建一个服务器，目的是为了返回css样式和js脚本，并且让服务器根据传递的参数，固定延时返回数据。...比较合理的解释就是，首先浏览器无法知晓JS的具体内容，倘若先解析DOM，万一JS内部全部删除掉DOM，那么浏览器就白忙活了，所以就干脆暂停解析DOM，等到JS执行完成再继续解析。...其实这样做也是有道理的，设想JS脚本中的内容是获取DOM元素的CSS样式属性，如果JS想要获取到DOM最新的正确的样式，势必需要所有的CSS加载完成，否则获取的样式可能是错误或者不是最新的。...而这个结论才是解释为何CSS会阻塞JS的执行的真正原因，浏览器无法预先知道脚本的具体内容，因此在碰到标签时，只好先渲染一次页面，确保脚本内能获取到DOM的最新的样式。...但是实际结果并不是这样，而是页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。

1.4K1 0

h5中performance.timing轻松获取网页各个数据如dom加载时间渲染时长加载完触发时间

在浏览器交互阶段（Processing和onLoad时间段）浏览器接收服务器返回的基础页数据后，浏览器需要对HTML这个单纯的文本内容进行解析，从文本中构建出一个内部数据结构，叫做DOM树（DOM tree...load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发，这有时会导致比较严重的延迟，开发人员随后创建了domready事件，它在DOM加载之后及资源加载之前被触发。...domready被众多JavaScript库所采用,它在本地浏览器中以DOMContentLoaded事件的形式被使用。...load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发，这有时会导致比较严重的延迟，开发人员随后创建了domready事件，它在DOM加载之后及资源加载之前被触发。...domready被众多JavaScript库所采用,它在本地浏览器中以DOMContentLoaded事件的形式被使用。

3.6K1 0

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM!...2、HTML是要通过浏览器解析之后才会转换成为DOM节点一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM...当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady. 3、浏览器是自上向下,从左往右,HTML字符串标签一个一个的读入,页面上会有很多的标签,响相应的会生成很多的对应的...5、因为浏览器渲染引擎是单线程的,如果头部脚本文件过多过大,会产生"白屏"现象,所以为了防止这种情况,我们应该将所有的脚本文件都放到标签之前,这一点在雅虎军规中也有提到。...(包括图片、脚本文件、样式文件),且HTML标签都转换成为DOM节点是,会被触发,但是这个方法在执行时间上有点晚,如果图片很多,那么你懂得额！！！！！

1.5K6 0

css是否会阻塞与DOMContentLoaded

原本只是想分享Network的一些内容，结果到DOMContentLoaded的时候给卡住了，网上很多强调css不会阻塞DOM解析，可以说对又可以说不对。...在MDN上面给出了DOMContentLoaded的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。...之前或者之后，并且script有内容，包括一个回车或者一个空格，DOMContentLoaded和Load的时间一样： ?...这种情况表示css阻塞了DOM的解析。第二种，我把link放到script之前，script里面没有任何内容，DOMContentLoaded比Load的时间差很多： ?...第三种，我把link放到script之后，script里面没有任何内容，DOMContentLoaded和Load的时间一样： ? 这边补充一下，script引入的也是一样的。

6941 0

实践指南-网页生成PDF

在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成，比如：生成页面的屏幕截图和 PDF；爬取 SPA 并生成预渲染的内容（即 SSR）；自动进行表单提交，UI 测试，键盘输入等；...小建议：本地调试时，建议设置 headless: false，可以启动完整版本的浏览器，直接在浏览器窗口查看内容。 3. 打开新页面— 生成浏览器后，在浏览器中打开新页面。...waitUntil 表示页面加载到什么程度可以开始生成 PDF 或其他操作了，当网页需加载的图片资源较多时，建议设置为 networkidle2，有以下值可选： load：当 load 事件触发时； domcontentloaded...小建议：不管 PDF 是不是需要保存到本地，建议在调试的时候都设置一个path，方便查看生成的 PDF 的样式，检查是否有问题。...注意：在 v1.18.1 之前，Puppeteer 至少需要 Node v6.4.0。从 v1.18.1 到 v2.1.0 的版本都依赖于 Node 8.9.0+。

2.5K4 1

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

每个事件都是有用的： DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。...乍一看，DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它的触发条件。它并没有什么特别之处。...因此，DOMContentLoaded 肯定在下面的这些脚本执行结束之后发生： document.addEventListener("DOMContentLoaded", () =...readyState 如果我们将 DOMContentLoaded 事件处理程序设置在文档加载完成之后，会发生什么？很自然地，它永远不会运行。在某些情况下，我们不确定文档是否已经准备就绪。...总结页面生命周期事件：当 DOM 准备就绪时，document 上的 DOMContentLoaded 事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭