document.ready & window.onload 与 CSS 媒体查询

Question

在研究用户看到内容之前运行的 CSS 和 JS 代码时，有件事一直困扰着我。CSS 媒体查询到底是什么时候运行的？哪个 js 和 jquery 函数首先运行（document.onload、document.ready 等）？当我对其进行研究时，我发现This和 This问题解释了 domcontentloaded、document.ready 和 window.onload 函数之间的区别。然而，与这些函数相比，我无法弄清楚 CSS 中的媒体查询到底何时运行。所以我通过 JSFiddle 在这里检查了它。

在HTML部分我只写了一个带有ID的div；

<div id="testDiv">
  Test Media Queries And JS Functions
</div>

在 CSS 中，仅运行了 1 个媒体查询；

@media screen and (min-width:1px){
  #testDiv{
    color: black;
  }
}

在JS部分，有不同的加载函数

$('document').ready(function() {
  document.getElementById("testDiv").style.color = "blue";
});

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("testDiv").style.color = "red";
});

window.onload = function() {
  document.getElementById("testDiv").style.color = "yellow";
};

CSS 代码及其效果短暂可见。当我运行代码时，div 变成了蓝色。然而，我遇到了一个奇怪的问题。仅在 Google Chrome 新选项卡（非隐身模式）中，代码运行为黄色，这意味着 window.onload 最后运行，而在所有其他浏览器和选项卡中，div 显示为蓝色。

谷歌浏览器没有隐身标签

Google Chrome 隐身标签和 Safari 新标签

首先，这是我遇到的某种错误还是它打算像这样运行？

其次，我找不到任何关于与这些函数相比媒体查询何时运行的文档。

如果有人有关于 CSS 查询及其确切执行时间的文档链接，我将非常感激。

Answer 1

第二个答案第一

从这里您已经熟悉了，如果您使用 Javascript（不是异步或延迟），那么创建DOM将等待 JS 加载。由于JS也修改了CSS，因此JS将等待CSSOM加载，这样您就得到了媒体查询更早运行的答案。

现在第一个

基本上

创建DOMContentLoaded时会触发该事件。DOM

$(document).ready()准备就绪后，将触发jQuery事件DOM。

load当DOM、和所有其他资源加载时会触发该事件CSSOM（jQuery 库就是其中之一）。

在这种情况下

第一次DOM创建将等待JS加载，然后DOM创建，并且DOMContentLoaded事件首先触发，因此媒体查询应用color:red覆盖。color:black

现在事件在第二位load触发，因为已经加载并且也已加载，因此会覆盖，JSDOMCSSOMcolor:yellowcolor:red

当 DOM 准备好时，事件会在第三个地方document.ready触发，因此会覆盖。你会看到蓝色。color:bluecolor:yellow

重要的

如果您添加像此处一样的图像，那么您会看到

第一次DOM创建将等待JS加载，然后DOM创建，并且DOMContentLoaded事件首先触发，因此媒体查询应用color:red覆盖。color:black

现在，当 DOM 准备好时，事件会在第二个地方document.ready触发，因此会覆盖。color:bluecolor:red

并且事件在第三个地方load触发，因为在准备好时未加载，因此在加载图像后覆盖，imageDOMcolor:yellowcolor:blue