个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
请看代码:
<!-- ... -->
<head>
<style type="text/css"> body { background: gray; } </style>
</head>
<body>
<p>
Firefox does not even shows blank page.
Tab is stuck in "suggested sites" for 5 seconds.
</p>
<p>
Chrome show just blank white. No text, no background. For 5 seconds.
</p>
<p>
DOMContentLoaded event handler blocks page
loading and rendering. Browser does not start
rendering page until DOMContentLoaded
handler function return.
</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp);
// or synchronous 5 seconds XHR as an equivalent of loop
});
</script>
</body>
<!-- ... -->
静态 html+css 足以呈现内容(尽管没有 IMG，但良好的布局 block 不依赖于 img 大小)。一般页面布局应立即显示，就像它一直打算的那样。并且只有在渲染(或至少开始绘制它)之后 Javsacript 才应该运行，无论它只是控制点击绑定(bind)还是无限循环，如此处示例所示。
如何在静态页面布局实际呈现或至少开始出现后运行 JS？
(并且“就绪”事件在这里不适合，因为它不能保证在任何合理的时间触发)
为什么浏览器阻止(阻止)用户看到静态定义的内容？至少现代浏览器可以阻止这种废话吗？
更新。 澄清
如果您将 DOMContentLoaded 用于常规看似无害的任务(订阅按钮事件、初始化其他代码的异步加载等)，您实际上确实会延迟用户查看内容，而这正是 DOMContentLoaded 的真正问题。这里的循环阻塞在示例中是有意的，只是为了证明它确实阻塞了，对于那些错误地认为 DOMContentLoaded 是“异步”/“非阻塞”安全的东西(事实并非如此)的人。
最佳答案
有趣且出乎意料。我用 requestAnimationFrame(callback) 解决了它，像这样:
function foo() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
var timestamp = Date.now() + 5000; while (Date.now() < timestamp){};
alert('now');
});
});
}
document.addEventListener('DOMContentLoaded', foo);
关于javascript - DOMContentLoaded 阻止页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32656594/
24
4
0
我读了很多关于 jQuery.ready() 的内容。会减慢你的页面速度。我的网站有一堆代码在 jQuery.ready() 内运行正如许多网站所做的那样。 jQuery(document
有什么方法可以手动触发 DOMContentLoaded 事件吗？ 我正在尝试为一些客户端 JavaScript 编写单元测试，该测试在 DOMContentLoaded 事件上执行一些操作。 以下方
我在 html 文档中有几个脚本，它们都有一个 DOMContentLoaded 事件监听器。 javaScript 会保持监听器执行的相对顺序还是同步执行它们？ 最佳答案 是的，如果您正在使用 ad
我偶然发现了执行此操作的脚本: "complete" === document.readyState ? setTimeout(I, 1) : document.addEventListener ?
我在页面上有一个脚本，该脚本大部分时间都在工作，但并非总是如此，我想知道为什么。 此脚本通过以下方式导入: ` tag in ` 脚本的内容是: console.log("loading"); //
我想尝试 IE 的 javascript DOMContentLoaded 事件。但该事件不会触发。 IE 不支持这个吗？请帮忙解决这个问题。谷歌搜索后我没有找到太多帮助。我想在 javascript
考虑以下场景: Document document.addEventListener("DOMContentLoaded", func
DOMContentLoaded 事件处理程序调用的脚本与在主体末尾调用的脚本有什么区别？ 最佳答案 显然，它们在略有不同的上下文中执行 - 内联脚本是“顶级”代码，DOMContentLoaded
例如，这种类型的链式事件将不起作用，因为该事件只会被触发一次。 window.addEventListener('DOMContentLoaded', function () { alert(
我的 html 页面是这样写的: 我的 javascript 文件是这样的: function init(){ audio1 = document.getElementByI
请看代码: body { background: gray; } Firefox does not even shows blank page.
我正在尝试使用 DOMContentLoaded 检测 DOM 何时准备就绪。 我正在将以下 JavaScript 代码注入(inject)页面: var script = document.crea
我用过 Click Not Loading... document.addEventListener('DOMContentLoaded', functio
考虑以下 HTML 文档: Title body { background: crimson; }
我将此代码用于 firefox 扩展 1: var Test { 2: f: function() { 3: alert("DOM content loaded"); 4: window
几个月前我编写了一个 Firefox 附加组件，但最近失败了。该插件主要是查找特定的 URL，然后修改页面的 DOM。我将故障追溯到(意外)安装“AVG Safe Search”附加组件。我发现，在禁
jsfiddle https://jsfiddle.net/ee7oe5pb/2/ Javascript var events = (function () { var fn = {};
我有一个 php 页面需要另一个 php 页面，该页面似乎需要很长时间才能加载，所以我决定有一个加载图像，问题是图像几乎在整个页面加载时出现，而不是在页面 stsrts 时出现正在加载，请问如何解决这
我正在设置一个非常简单的页面来从 DOMContentLoaded 事件上的数组填充下拉列表，但是在我的环境(VS 代码 + 实时服务器扩展)中，我收到错误，因为整个主体对象不存在在 DOMConte
document.addEventListener('DOMContentLoaded', () => { }); 我读到这个事件监听器确保，对于常规脚本，JS 不会引用尚未加载的节点。内容在 DOM
我是一名优秀的程序员,十分优秀！