- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个加载程序,想研究异步和延迟计时。它是动态插入的外部脚本标记 - 无内联延迟。
起初,我很难理解为什么异步会表现得像延迟 - 它在 DOMContentLoaded 之后执行。
对于 2000 个 DOM 元素,异步启动表明它可以在 DOMContentLoaded 之前执行。它从本地驱动器加载。通过从主机获取,在等待响应时异步执行脚本更有意义。这样就可以了。
然后我改为测试 defer 和 surprice。现在我与为什么 defer 表现为异步 - 在 DOMContentLoaded 之前执行 的笑话作斗争!
对于 100000 个 DOM 元素,耗时超过 30 秒,脚本执行仍然发生在 DOMContentLoaded 之前。怎么了?
这是我测试过的相关部分...
loader.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");
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 和 Chrome 中的控制台
Fetch script
Execute script
DOMContentLoaded
在 DOM 准备好使用之前,决不应该执行延迟脚本。
现在我们遇到这样的情况:DOMContentLoaded 在 DOM 在屏幕上显示之前触发。怎么办?
编辑 #1
当心 DOMContentLoaded - 我想要“解析 dom 内容”!!!
(所以这就是代码中的错误 - 或者在我看来)
更正(感谢 Pointy)——用我的话来说……
延迟脚本在 dom 解析后执行,但 dom 仍在加载。当延迟脚本和最终事件完成时,将触发 DOMContentLoaded。
所以这是我需要的某种“DOMContentParsed”。我发现最好的是 readystatechange 事件 和 document.readyState...
让我们用这一行扩展 loader.js:
s.onload = function(){ console.log(document.readyState) }
有了足够的 dom,它就会在 Chrome 和 Firefox 控制台中显示:
Fetch script
Execute script
loading
DOMContentLoaded
这意味着延迟脚本在 DOM is loading 时执行!是的,它正在加载,直到 DOMContentLoaded。遗憾的是,readyState 不告诉 dom 何时被解析!我也试过了..
document.addEventListener('readystatechange', function() {
console.log(">>" + document.readyState);
});
这不会在“加载”时触发,因为它已经触发了,但它在延迟脚本加载后说“交互式”,并在 DOMContentLoaded 所在的位置说“完成”(它们相同吗?)并且没有更多可说的。
我不知道在 dom 解析时触发的方法或事件。必须在继续加载其他 dom 内容之前,才能在其他计时之前获得正确的计时标记!
没有更多可找到的了! Living Standard — Last Updated 15 April 2019 中的第一点之前没有其他内容了第 12.2.7 节结束(甚至标题跟我开玩笑):readystatechange 应该在任何脚本之前进行“交互”,但实际上并没有。为什么?
对我来说,readyState 在大于 2000 个元素的本地 index.html 上似乎有一个错误,因为我可以在它说“交互式”之前执行一个延迟脚本。现在很清楚,当把readyState放入脚本中时(我忘了),它说“正在加载”,这意味着在执行时仍然加载一个大的html:
脚本.js
console.log("Execute script " + document.readyState);
结论:有时 defer 表现得像异步,异步表现得像 defer
最佳答案
the MDN page for script elements 上的 defer
属性的定义:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
您所看到的是预期的行为。
关于javascript - 为什么它显示延迟为异步和异步为延迟?正确理解 "dom parsed event"!但有没有?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55783364/
我发现在使用parse-node包时,不能再使用Parse.Cloud.httpRequest了。我也知道 Parse 的 Image 对象将不可用。 到目前为止,我已经能够用原生的替换一些 Pars
关闭。这个问题是opinion-based 。目前不接受答案。 已关闭 9 年前。 已锁定。这个问题及其答案是locked因为这个问题是题外话,但却具有历史意义。目前不接受新的答案或互动。 我有一个函
开源 Parse Server 是否包含用于配置新 Parse 实例的 Schema API?我试图消除手动创建应用程序的需要。 这是通过 Parse.com 提供的架构 API http://blo
我想从我的云代码发出一个 http 请求,该请求在我的客户端被调用。 最佳答案 一开始我发现这有点令人困惑,所以希望这会有所帮助。 在您的云代码中main.js Parse.Cloud.define(
这部分代码应该读入两个或更多数字(省略主 io 函数),然后是一个“+”来给出总和。使用有理数是因为稍后我将进行乘法和其他此类操作。 data Expression = Number Rationa
我似乎找不到任何关于此的官方信息:Does Parse.Config work on Parse Server?它曾经在 Parse.com 上工作,但是当我尝试迁移到 Parse.Server 时,
我正在尝试找到使用 Parse.com 添加密码要求的最佳程序。似乎最简单的方法是在保存用户数据之前使用云功能执行。我唯一的警告是,只有当密码与数据库中存储的密码不同或者用户不存在于数据库中时,我才想
我是 android 开发、应用程序开发和一般开发的初学者,我正在尝试为我的 android 应用程序设置后端数据库。我决定使用一个名为 back4app 的服务,以便获得更加用户友好的数据库体验,因
我目前正在尝试将 Facebook 登录功能添加到我的应用程序。 根据Android文档,当我添加 compile 'com.parse:parsefacebookutils-v4-android:1
我正在尝试使用 Rebol 2/3 从字符串中解析货币值,货币值的格式为: 10,50 欧元或 10,50 欧元 我在浏览了所有 PARSE 文档后想出了这段代码,我可以在 Red 中找到它,但在 R
代码: DateTimeFormat dateFormat = DateTimeFormat .getFormat("EEE MMM dd HH:mm:ss zzz y
我不再在 Parse 上看到用于导入 JSON 或 CSV 文件的导入按钮。他们是否将其移动到某个地方,或者不再可能导入这些文件类型? 最佳答案 官方原因是这样的: “[导入类按钮] 几天前被删除,因
我正在使用 PHP 从我的服务器检索一些数据。我想在 javascript 应用程序中使用这些数据,所以我正在做这样的事情: var polylines = ; $polylines 只是一个 PHP
我已经开始使用 .NET 4 System.Numerics.BigInteger Structure我遇到了一个问题。 我正在尝试解析一个包含无符号(正数)的十六进制数字的字符串。我得到一个负数。
我正在使用 PHP 从我的服务器检索一些数据。我想在 javascript 应用程序中使用这些数据,所以我正在做这样的事情: var polylines = ; $polylines 只是一个 PHP
在 Go 中,尝试将字符串转换为 time.Time 时,使用时间包的 Parse 方法不会返回预期结果。似乎问题出在时区。我想更改为 ISO 8601 结合 UTC 日期和时间。 package m
我正在尝试将此字符串模式 "4-JAN-12 9:30:14" 解析为 time.Time。 尝试了 time.Parse("2-JAN-06 15:04:05", inputString) 和许多其
从云代码和解析开始。使用this . 如何删除所有 Parse 项目以便开始创建新项目?我收到以下错误: “您想要创建一个新应用程序,还是将 Cloud Code 添加到现有应用程序中?输入“(n)e
我在解析云代码时有这个功能: Parse.Cloud.define("testfunction", function(request, response) { var username = r
最近,我在 parse.com 上做了一些测试。我现在面临在后台作业中使用 Parse.Object.saveAll 的问题。 从 parse.com 的文档来看,后台作业可以运行 15 分钟。我现在
我是一名优秀的程序员,十分优秀!