document.ready、window.onload与CSS Media Queries执行顺序及异常问题咨询

1. Chrome不同标签页表现差异的原因 #

你观察到的非隐身窗口最终显示黄色的效果不是浏览器bug，属于设计预期内的环境差异，核心诱因有两点：

• 你的jQuery就绪事件代码存在语法错误：正确的$(document).ready()写法不需要给document加引号，你写的$('document')会让jQuery尝试查找页面中不存在的<document>自定义标签，回调触发时机就会从原定的DOM就绪状态向后延迟，不同环境下的资源加载速度差异会导致这个延后的回调和window.onload的执行顺序发生变化。
• Chrome非隐身模式默认开启资源缓存，还可能运行你安装的第三方扩展程序，和无缓存、无扩展的隐身模式执行环境完全不同，会改变JS、样式表的加载完成时机，最终呈现出不同的最终颜色效果。

按照W3C规范的默认执行逻辑，原生事件的固定执行顺序为：Media Queries匹配应用 → DOMContentLoaded触发 → window.onload触发，你测试的异常顺序都是代码写法错误和执行环境差异导致的，不属于浏览器原生逻辑的问题。

2. Media Queries与JS加载事件的时序官方说明 #

W3C的HTML标准和CSSOM标准中有明确的执行时序定义：

• CSS Media Queries的匹配发生在CSS对象模型（CSSOM）构建阶段：浏览器下载到CSS资源后，会立刻根据当前视口参数执行媒体查询匹配，符合条件的样式会被加入到最终的样式规则树中，这个阶段发生在页面首次渲染之前，早于所有JS加载事件的触发。
• 原生DOMContentLoaded事件在DOM树解析完成、所有同步JS执行完毕后触发，此时图片、异步样式表等资源可能还未加载完成。jQuery的$(document).ready本质就是对DOMContentLoaded事件的封装，正常写法下和原生DOMContentLoaded回调的执行顺序和注册顺序保持一致。
• window.onload事件在页面所有资源（包括图片、样式表、iframe等）全部加载完成后触发，是页面加载阶段最后触发的事件。

内容的提问来源于stack exchange，提问作者Ahmet Umut Alkan