我用过
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button type="button" id="button">Click</button>
<pre id="output">Not Loading...</pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
<script type="text/babel">
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('button');
const output = document.getElementById('output');
output.textContent = 'Loading...';
addEventListener('click', function () {
output.textContent = 'Done';
});
});
</script>
</body>
</html>
但似乎里面的代码document.addEventListener('DOMContentLoaded', function () {});没有加载.
如果我从我的代码中删除它,它突然工作.
我正在深入研究随谷歌Chrome一起提供的性能工具,因为我正试图了解性能改进技术.我正在玩Timeline选项卡,我发现在我的页面上,First Paint事件发生在DOMContentLoaded事件之前.我读了一些文章,据说当浏览器开始向用户显示内容的第一时刻必须在DOMContentLoaded之后.有人可以解释一下这是真的吗？
是否有可能检测到对DOMContentLoaded事件的支持？
方法就像Kangax的解决方案在这里不起作用,因为DOMContentLoaded它不作为任何元素的属性公开:在没有浏览器嗅探的情况下检测事件支持
javascript events javascript-events domcontentloaded browser-feature-detection
有一个类似的问题没有解决。
我遇到过侦听 DOMContentLoaded 的处理程序可以阻止首次绘制的情况。有时会阻塞，有时不会
我尝试了很多次 cmd + R 来查看它。这种行为有什么解释吗？
我还录制了一段视频来展示这一点：https : //www.youtube.com/watch?v=EDZQ1nLCK2w&feature=youtu.be
window.addEventListener('DOMContentLoaded', () => {
let i = 0;
while (i++ < 1000000000) {
continue;
}
document.getElementById('el').remove();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="el">Some text</p>
</body>
</html>
我在HEAD标记中有一些JavaScript,它在页面上的最后一个脚本(当前已解析)之前动态插入异步加载脚本标记.这个动态包含的脚本标记包含需要在DOM可用之后但在加载所有图像和脚本标记之前解析DOM的JavaScript.重要的是JavaScript在加载所有JS之前开始执行,因为如果有一个悬挂的脚本,这将导致糟糕的用户体验.这意味着我不能等待DOMContentLoaded事件发生.我没有任何灵活性,我放置动态包含脚本标记的JavaScript的第一位.
我的问题是,我是否可以立即开始解析DOM,而无需等待DOMContentLoaded事件？如果没有,有没有办法让我在没有等待DOMContentLoaded活动的情况下这样做？
只有在准备好DOM之后才开始操作DOM是一个古老的常识,我们可以确定所有元素都可用,并且在jQuery之后的日子里我们都使用了这个DOMContentLoaded事件.
现在,Web组件(特别是以自治自定义元素的形式)倾向于创建自己的HTML,通常在connectedCallback()生命周期方法中.
第一个问题:
如何DOMContentLoaded与(自治)自定义元素相关？只有在所有组件connectedCallbacks完成后才会发生事件吗？如果没有,我如何确保某些代码仅在Web组件初始化后执行？
第二个问题,完全相关:
Web组件如何与元素的defer属性相关联script？
我创建了一个显示问题的 Codepen：https ://codepen.io/samuelg0rd0n/pen/ExVGQEV
在 Chrome 中，它在窗口 onload 事件之前正确触发 DOMContentLoaded 事件和 jQuery 文档就绪事件。然而，在 Firefox 中，顺序是：
DOMContentLoaded
window.onload
$(window).on('load', function() { ... });
$(document).ready();
$(function() { ... });
window.onload 和 jQuery 窗口 onLoad 都会在 jQuery 文档就绪事件之前触发。我很确定这一定是 jQuery 或 Firefox 中的某种错误。谁可以给我解释一下这个？谢谢。
Chrome版本：81.0.4044.138
火狐版本：75.0
在 macOS 和 Linux 上都尝试过，结果相同。
firefox jquery document-ready domcontentloaded jquery-events
根据我的理解，当在位于样式表正下方的脚本标签中使用 defer 时，浏览器会在执行脚本并触发 DOMContentLoaded 之前等待样式表加载 (CSSOM)。（更多相关内容）
这在 Firefox 中有效，但在 Chrome 中无效，因此我做了一个测试用例，其中在延迟的脚本标记之前加载了一个巨大的 css 文件。
带有样式表和延迟脚本的 HTML 文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="result">Loading...</div>
</body>
</html>
CSS 文件包含引导程序和设置字体系列的测试类。
/* ...bootstrap v4 css... */
.test {
font-family: 'It works!';
}
JS 文件包含 jQuery 和一个简单的测试脚本。
// ...jQuery....
$(function () {
$('<meta class="test">').appendTo(document.head);
var extractedStyles = $('.test').css('font-family');
$('.result').text(extractedStyles);
});
在 Firefox 中，CSS 可以在执行时解析，我看到“它有效！” > 参见火狐浏览器
在 Chrome 中，CSS 无法在执行时解析，我看到“Times New Roman” > 请参阅 Chrome …
'turbolinks:load' 不会在直接加载的页面上触发，但是，在加载了 turbolinks 的页面上，'turbolinks:load' 事件工作正常。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rawgit.com/turbolinks/turbolinks/master/dist/turbolinks.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>
test
</title>
<script>
function loadScript(src) {
if(!document.querySelector("script[src='"+src+"']")){
var n = document.createElement("script");
n.src = src;
n.async = false;
document.getElementsByTagName("head")[0].appendChild(n);
};
};
</script>
</head>
<body>
<p style='color:red'>
Hi Priority Rendering With inline css to improve start render
</p>
<script type="text/javascript">
loadScript("dynamic_load_turbolinks_script.js");
</script>
</body>
</html>
dynamic_load_turbolinks_script.js 的代码
console.log('This file will contain all functionally required script');
document.addEventListener("turbolinks:load", function() {
console.log('Inside turbolinkss Load')
});
window.onload = function(){
console.log('Inside window onload') …javascript ruby-on-rails dynamic-script-loading domcontentloaded turbolinks
我应该只创建一个 DOMContentLoaded 事件侦听器并收集内部所有元素的所有内容，还是可以为每个元素编写多个 DOMContentLoaded 侦听器？
这：
window.document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {edge:'right'});
});
window.document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, {"accordion" : false});
});
或这个：
window.document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {edge:'right'});
var elems2 = document.querySelectorAll('.collapsible');
var instances2 = M.Collapsible.init(elems2, {"accordion" : false});
});
什么是更正确的呢？对 DOMContentLoaded 事件使用多个函数是否有任何警告？一个人会覆盖另一个人，还是他们都被保存并稍后被解雇？
现在我把它们分别放在不同的功能中，这对我来说更方便，但我不知道它是否正确。谢谢。
“DOM 就绪”的现代替代是事件DOMContentLoaded。
您可以在 2 个全局对象上监听它：
window=> https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_eventdocument=> https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event现在我知道这个事件的原始目标是document根据上面的 MDN 链接，还可以“在 Window 界面上侦听此事件以在捕获或冒泡阶段处理它”。
window当捕获或冒泡阶段捕获事件更合适甚至需要捕获事件时，是否存在特定优势或特殊情况？
我正在制作一个小型的javascript框架,原因有很多,包括学习.
因此,我想实现"文档就绪"功能,所以我去检查jQuery如何伪造DOMContentLoadedIE <9.
问题是,它似乎没有按照它应该的方式工作.在IE8和一个很好的浏览器中检查这个小提琴.
逻辑是:应用css使div开始为红色,然后在"ready"中使其变为蓝色,并在加载时使其变为绿色.此外,有三个带有虚假URL的img标签,因此在就绪和加载之间存在合成延迟.
应该发生什么:
如果有的话,div不应该显示为红色超过一秒钟.理想情况下,首先看到的应该是蓝色.然后,当浏览器超时无效图像时,绿色.
在IE8上会发生什么:
div保持红色,直到所有图像"加载"(在此合成示例中,超时),然后变为绿色.
再一次,我并不是要求修复,我问是否在IE8上表现这样的框架是正确的(我不再关心IE 6-7了),或者这是否正在发生由于我以某种方式滥用jQuery.
PS:我知道如何手动绑定事件,我要求更多关于这是否是预期/可接受/错误/我的错误.
domcontentloaded ×12
javascript ×10
jquery ×2
babeljs ×1
browser ×1
cssom ×1
deferred ×1
dom ×1
dom-events ×1
events ×1
firefox ×1
load ×1
onload ×1
turbolinks ×1