当前位置: 首页 > 知识库问答 >
问题:

为什么它显示延迟为异步和异步为延迟?正确获取“dom解析事件”!但是没有?

拓拔嘉运
2023-03-14

我有一个加载器,想研究异步和延迟计时。它是一个动态插入的外部脚本标记——没有内联延迟。

起初,我为理解为什么异步表现为延迟而斗争——它在DOMContentLoade之后执行。

对于2000个DOM元素,async开始显示它可以在DOMContentLoaded之前执行。它是从本地驱动器加载的。对于从主机获取,在等待响应时异步执行脚本更有意义。这是可行的。

然后我改为测试延迟和超价。现在我与笑话作斗争,为什么延迟行为为异步 - 在DOM内容加载之前执行!

由于100000个DOM元素花费了30秒,脚本执行仍然发生在DOMContentLoaded之前。怎么了?

这是我测试的相关部分...

装载机.js

window.addEventListener('DOMContentLoaded', function() {
  console.log("DOMContentLoaded");
});


  var s = document.head.appendChild(document.createElement('script'))
//  s.async = true; s.defer = false;
  s.async = false; s.defer = true;
  s.src = "script.js"
  console.log("Fetch script");

脚本.js

console.log("Execute script");

index.html

<html>
  <head>
    <script src="loader.js"></script>
  </head>
  <body>

    <script>  window.ti = performance.now() </script>

    --- put here every html you can find ---

    <script>
      var n = document.getElementsByTagName('*').length
      var t = parseInt(performance.now() - ti) / 1000
      document.write("<br>Parsed " + n + " elements in " + t + " s ")
    </script>

  </body>
</html>

FF 和浏览器中的控制台

Fetch script
Execute script
DOMContentLoaded

延迟脚本永远不应该在DOM准备好使用之前执行。
现在我们有一个DOMContentLoade在DOM出现在屏幕上之前触发的情况。怎么做?

编辑#1

当心DOM内容加载 - 我想要“dom内容解析”!!!
(所以这是代码中的错误 - 或者在我看来)
更正(感谢Pointy) - 用我的话说......

延迟脚本在dom解析后执行,但dom仍在加载。当完成延迟脚本和最终事件时,将触发DOMContentLoaded。

所以我需要某种“DOMContentParses”。我发现最好的是readystatechange事件和document.readyState.…

让我们用这行扩展loader.js:

s.onload = function(){ console.log(document.readyState) }

有了足够的dom,它会在Chrome和Firefox控制台中显示:

Fetch script
Execute script
loading
DOMContentLoaded

这意味着在加载 DOM 时执行延迟脚本!是的,是的 - 它正在加载,直到DOM内容加载。可惜的是,准备好的状态没有告诉dom何时被解析!我也试过了。

document.addEventListener('readystatechange', function() {
  console.log(">>" + document.readyState); 
});

这不会在“加载”时触发,因为它已经触发了,但是它在延迟脚本加载后显示“交互”,并在DOMContentLoaded所在的位置显示“完成”(它们相同吗?)和它没有更多要说的。

我不再有在dom解析时/当dom解析时触发的方法或事件。它必须在继续加载其他dom内容之前,以便在其他计时之前获得正确的计时标记!

没什么可找的了!《生活标准》第一点之前没什么了——最后更新2019年4月15日第12.2.7节结尾(甚至标题跟我开玩笑):readystatechange应该在任何脚本之前做“交互”,但实际上没有。为什么?

对我来说,readyState似乎在本地索引上有一个错误.html大于2000个元素,因为我可以在它说“交互式”之前执行一个延迟的脚本。现在,当将readyState也放在脚本中时,它绝对很清楚(我忘记了),它说“正在加载”,这意味着在执行时,一个大的html仍在加载:

脚本.js

console.log("Execute script " + document.readyState);

结论:有时defer表现为异步,异步表现为defer

共有1个答案

邵璞
2023-03-14

MDN页面上脚本元素的< code>defer属性的定义:

此布尔属性设置为向浏览器指示脚本将在解析文档之后,但在触发DOMContentLoaded之前执行。

具有延迟属性的脚本将阻止 DOM内容加载事件触发,直到脚本加载并完成评估。

你看到的是预期的行为。

 类似资料:
  • 问题内容: 我有一对夫妇的有关属性的问题及对标签,该标签在HTML5的浏览器我的理解只有工作。 我的一个网站有两个外部JavaScript文件,它们当前位于标记上方;第一个是来自Google的jquery,第二个是本地外部脚本。 关于站点加载速度 在页面底部添加两个脚本是否有任何好处? 将选项添加到两个脚本并将它们放在页面顶部的页面中,会有任何好处吗? 这是否意味着它们会在页面加载时下载? 我认为

  • 本文向大家介绍异步加载和延迟加载有什么区别?相关面试题,主要包含被问及异步加载和延迟加载有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 异步加载: 浏览器会在解析HTML的同时进行加载javascript,一旦该javascript加载完毕,浏览器会暂停HTML的加载并执行javascript,之后继续HTML的加载。 延迟加载: 同样是解析HTML的同时进行加载javascript,但是

  • 我有cxfweb服务,我使用异步方法调用。我使用回调方法(使用javax.xml.ws.asynchHandler-http://cxf.apache.org/docs/developing-a-consumer.html)以获得如下响应: 这个方法很好,我得到了正确的响应。 我的问题是性能。我测量了刚好在上面行所需的时间,我的应用程序显示大约2000ms的上线(我用jmeter做了测试)。我的应

  • 本文向大家介绍JS同步、异步、延迟加载的方法,包括了JS同步、异步、延迟加载的方法的使用技巧和注意事项,需要的朋友参考一下 本文讲述了JS同步、异步、延迟加载的方法。分享给大家供大家参考,具体如下: 一:同步加载 我们平时使用的最多的一种方式。 <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

  • 我目前正在用Godot C#做一个基本的射手,为了提高枪的射速,我一直在用不同的延迟系统做实验。虽然我试图使脚本通用化,但是节点计时器仍然工作,计时器调用似乎只调用父脚本中的函数。 我现在正在看C#的任务。延迟方法似乎也有效,因为它是一个异步动作,看起来不会受到帧速率的影响,也不会降低游戏速度。 我的问题是,在游戏应用程序中使用 Task.Delay 是否存在任何已知问题:例如它是否不可靠,或者如