我有一个加载器,想研究异步和延迟计时。它是一个动态插入的外部脚本标记——没有内联延迟。
起初,我为理解为什么异步表现为延迟而斗争——它在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
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 是否存在任何已知问题:例如它是否不可靠,或者如