文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

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

  1. 使用DOMContentLoaded事件监听器：可以在DOMContentLoaded事件触发时执行需要在DOM准备好后进行的操作。例如，可以将JavaScript代码放置在DOMContentLoaded事件监听器中，以确保在DOM构建完成后再执行。
  2. 使用异步加载脚本：如果有一些脚本需要在DOM加载完成后执行，可以将这些脚本标记为异步加载，以确保它们在DOMContentLoaded事件之后执行。例如，在script标签中添加async属性。
  3. 使用延迟加载脚本：类似于异步加载脚本，延迟加载脚本也可以确保脚本在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
相关搜索:怎么移到文件夹怎么关闭小键盘字体大小rem遮挡flash自适应宽度布局左上角卷角效果左中右分栏布局自定义按钮样式重置css样式自适应网页设计
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

构建离线web应用（二）

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

93480

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.7K20

    • 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树之后才渲染页面。

    64430

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

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

    4.9K150

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

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

    2.1K30

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

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

    1.8K20

    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.8K90

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

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

    51911

    window的onload事件和domcontentloaded执行顺序

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

    3.6K10

    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.8K40

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

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

    16810

    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.1K31

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

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

    3.5K10

    【总结】关于 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.4K10

    Js框架设计之DomReady

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

    1.5K60

    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引入的也是一样的。

    69210

    实践指南-网页生成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.4K41

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

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

    1.8K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券