检查 DOM 的准备情况是否太过分了？
我正在开发一个平台，用于使用网络技术开发桌面应用程序。在此过程中，我一直在尝试让一些文档/就绪功能与我将集成到平台中的浏览器一起使用。这就是为什么我之前在这里问过这个问题： javascript-framework-that-primarily-provides-just-document-onready-功能
但是，我无法让我选择的浏览器（嘘，这是一个秘密；）成功利用建议的功能对上述问题的唯一答案。因此，在试图弄清楚什么可能有效的过程中，我偶然发现了以下内容。
下面的代码在我使用的浏览器中具有相同的效果，只需在 1 毫秒超时后执行一个函数即可：我可以在加载大图像时写入 DOM。这对我来说可能不是最终的解决方案，我可能会编写一些特定于该浏览器的 Javascript 引擎如何实现 DOM 功能的内容。
尽管如此，我决定看看这是否适用于标准浏览器，令我惊讶的是，它确实有效！有鉴于此，我的问题是：各种 Javascript 框架提供的 dom/readiness 功能的各种实现是否太过了？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
setTimeout(function() {
var txtNode = document.createTextNode("ready_yet?");
var ready_yet_el = document.getElementById("ready_yet");
ready_yet_el.appendChild(txtNode);
},1);
</script>
</head>
<body>
<div id="ready_yet"></div>
<img src="http://www.ryanmorr.com/tests/ondomready/pic.jpg" />
</body>
</html>
编辑/进一步的想法 在我之前相关问题的答案链接到的页面上，它指出“对于 Firefox 和 Opera，只需检查事件类型即可确定是否为 DOMContentLoaded，Safari 和 IE 将检查文档的就绪状态……最后，如果其他所有方法都失败，则 onload 事件将出现在后面。”也许类似于我上面的 setTimeout 的 setInterval 可能是在依赖 onload 作为最后手段之前的倒数第二个行动方案？无论如何，对于我选择的嵌入式浏览器，DOMContentLoaded 事件和 document.readyState 似乎都不受支持。
I'm developing a platform for developing desktop apps with web technologies. In the course of doing so I've been trying to get some document/on-ready functionality working with the browser I will be integrating into the platform. That's why I'd previously asked this this question here on SO: javascript-framework-that-primarily-provides-just-document-onready-functionality
However I've not been able to get my browser of choice (shush, its a secret ;) to successfully utilize the functionality suggested by the one and only answer to the above. So, in the course of just trying to figure out what might possibly work I stumbled upon the following.
The code below has the same effect within this browser I'm using simply by executing a function after a timeout of 1 millisecond: I can write to the DOM while the big image is loading. This might not be the ultimate solution for me, I may write something specific to how DOM functionality is implemented by the Javascript engine for this browser.
Nevertheless, I decided to see if this works in standard browsers, and much to my surprise, it does! In light of which, my question: are various implementations of dom/readiness functionality provided by various Javascript frameworks, simply overkill?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
setTimeout(function() {
var txtNode = document.createTextNode("ready_yet?");
var ready_yet_el = document.getElementById("ready_yet");
ready_yet_el.appendChild(txtNode);
},1);
</script>
</head>
<body>
<div id="ready_yet"></div>
<img src="http://www.ryanmorr.com/tests/ondomready/pic.jpg" />
</body>
</html>
EDIT/FURTHER THOUGHTS
On the page linked to by the answer to my previous related question it states "For Firefox and Opera a simple check of event type will determine if it is DOMContentLoaded. Safari and IE will check against the document’s ready state....Finally in case all else fails, the onload event will bring up the rear." Perhaps a setInterval similar to my setTimeout above could be the penultimate course of action, before relying on onload as a last resort? In any event, with the embeddable browser I've chosen, neither the DOMContentLoaded event, nor document.readyState appear to be supported.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在我看来，你的预感是好的，而且是有根据的。但是已经有人先一步了。简短的回答是，
setTimeout并不是在所有情况下检测 DOM 就绪情况的有效实现。对于您感兴趣的浏览器来说可能没问题，但 IE 在某些情况下会失败。您可能有兴趣了解 Microsoft 自己的 ASP.NET AJAX 框架使用
setTimeout技巧来检测 DOM 准备情况。令人惊讶的是，令人惊讶的是： 它失败了在某些用例中也是如此。简而言之，问题似乎在于 IE 加载脚本缓慢，这可能是由于文件大小（例如 ~500K）或网络/服务器延迟所致。
Your hunch is good and well founded IMO. But someone has beat you to the punch already. Short answer is that
setTimeoutis not a working implementation of detecting DOM readiness in all cases. It may be ok for your browser of interest, but IE fails in some situations.It may interest you to know that Microsoft's own ASP.NET AJAX framework uses the
setTimeouttrick to detect DOM readiness. And surprise, surprise: it fails in certain use cases as well.In short, the problem seems to lie in IE with slow loading scripts, either due to large file size (eg ~500K) or network/server latency.
不会，因为当 DOM“未准备好”错误出现时，它们会以极其不寻常且难以预测和追踪的方式出现 - 每一种（当然）对于发生这种情况的浏览器来说都是独一无二的。
完全避免这些问题要容易得多，并且知道您总是要处理现成的 DOM。
举个例子，不久前，我在每个人最喜欢的浏览器中遇到了一个 DOM 未就绪的错误，它在 99% 的时间里都完美地工作，但如果页面内容有一个带有 src 属性的 img 元素，并且如果content 也有一个 ul 元素，其中包含任意数量的 li ...如果这些事情中的任何一个不正确，它都不会出现错误。
现在对我来说很容易说“哦，这是一个 DOM 问题”，但当时……不，没那么容易。
No, because when DOM 'unreadiness' bugs manifest they do so in incredibly unusual and difficult to predict and track down ways - each one (of course) unique to the browser that it happens in.
It's much easier to just avoid those issues entirely and know that you're always going to be dealing with a ready DOM.
As an example, a while ago I had an DOM not ready bug in everyone's favourite browser than manifested itself by working perfectly 99% of the time, but died with errors if the page content had an img element with src attribute in it AND if the content also had a ul element with any number of li's within in...it didn't bug if any of those things weren't true.
It's easy for me to say now 'oh it was a DOM issue' but at the time...no, not so easy.
简单地说，不。连接速度较慢且需要加载多个文件的人不会喜欢他们的浏览器尝试在尚不存在的元素上运行脚本。
Simply, no. Someone with a slower connection and multiple files to load will not appreciate their browser trying to run scripts on elements that don't exist yet.