Javascript $（document）.ready（）也准备好CSS了吗？

我在$（document）.ready（）上执行了一个脚本，它应该垂直对齐布局中的块元素。90%的情况下，它可以正常工作。然而，对于额外的10%，发生了两件事之一：

• 对中所需的时间明显滞后，块元素跳转到位。这可能仅仅与性能有关——因为页面大小通常很大，而且有相当数量的javascript同时执行

• 定心将完全混乱，块元素将被向下推得太远或不够远。它似乎试图计算高度，但测量结果不正确

在DOM ready上执行脚本不会将所有正确的CSS值都注入DOM中，有什么原因吗？（所有CSS都通过

在

中）

此外，以下是导致问题的脚本（是的，它直接取自）：

---

谢谢。

当所有DOM节点都可用时，DOM就绪将启动。它与CSS无关。尝试在加载之前定位样式，或者尝试以不同方式加载样式。

据我所知，加载DOM时会触发ready事件，这意味着所有阻塞请求（即JS）都已加载，并且DOM树已完全绘制。IE中的就绪状态依赖于比大多数其他浏览器更慢的事件触发器（document.readyState change vs DOMContentLoaded），因此时间也取决于浏览器

非阻塞请求（如CSS和图像）的存在是完全异步的，与就绪状态无关。如果您需要此类资源，则需要依赖于良好的旧onload事件。

来自：

ready（）方法不再试图保证等待加载所有样式表。相反，所有CSS文件都应该包含在页面上的脚本之前

从：

注意：请确保在脚本之前包含所有样式表（特别是那些调用ready函数的样式表）。这样做将确保在jQuery代码开始执行之前正确定义所有元素属性。如果不这样做，将导致零星的问题，尤其是在基于WebKit的浏览器（如Safari）上

请注意，上面的内容甚至与实际呈现CSS无关，因此当

ready（）

启动时，您仍然可以看到屏幕的变化。但它应该能让你免于麻烦

事实上，我觉得有点奇怪，仅仅把CSS放在JS之上就能解决所有问题。CSS是异步加载的，因此JS加载可以在CSS仍在下载时开始和完成。因此，如果以上是一个解决方案，那么执行任何JS代码都会停止，直到所有以前的请求都完成为止

我做了一些测试，事实上，有时候JS会被延迟，直到CSS加载。我不知道为什么，因为瀑布显示JS在下载CSS之前很久就已经完成了加载

请参阅JS Bin了解和（这有10秒的延迟），并参阅webgetest.org了解。这使用了Steve Souders的一些脚本来模拟缓慢的响应。在瀑布中，对

resource.cgi

的引用是CSS。因此，在InternetExplorer中，第一个外部JS在请求CSS后立即开始加载（但是CSS需要10秒才能完成）。但是第二个

标记在CSS完成加载之前不会执行：

<link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" />

<script type="text/javascript" src=".../jquery.min.js"></script> 

<script type="text/javascript"> 
  alert("start after the CSS has fully loaded"); 
  $(document).ready(function() { 
    $("p").addClass("sleepcgi"); 
    alert("ready"); 
  });         
</script> 

警报（“CSS完全加载后启动”）；
$（文档）.ready（函数（）{
$（“p”）.addClass（“sleepcgi”）；
警惕（“准备就绪”）；
});         

在获得jQuery后使用第二个外部JS，在CSS加载之前，不会开始下载第二个JS。这里，对

resource.cgi

的第一个引用是CSS，第二个引用是JS:

将样式表移动到所有JS下面确实表明JS（包括

ready

函数）运行得更早，但即使如此，在我在Safari和Firefox中的快速测试中也正确地使用了jQuery应用类（JS运行时还不知道）。但是像

$（this）.height（）

这样的东西在那个时候会产生错误的值，这是有道理的

然而，这表明，在加载先前定义的CSS之前停止JS并不是通用规则。使用外部JS和CSS似乎有一些结合。我不知道这是怎么回事

最后注意：当从裸URL运行时，JS-Bin在每个脚本中都包含Google分析（比如，测试结果实际上是由JS Bin更改的。…似乎编辑URL上的“输出”选项卡（例如）不包括其他Google分析内容，并且肯定会产生不同的结果，但该URL很难使用WebGetTest.org进行测试。提供的参考是更好理解的良好开端，但我还有很多问题要问……还请注意史蒂夫·索德斯（Steve Souders）的《让事情变得更复杂》（上面的瀑布是使用IE7创建的）

---

也许有人应该相信发行说明和文档…

CSS/JavaScript/JQuery排序对我不起作用，但以下内容确实起作用：

$(window).load(function() { $('#abc')...} );

根据HTML5，DOMContentLoaded是一个简单的DOM就绪事件，不考虑样式表。然而，HTML5解析算法要求浏览器推迟脚本的执行，直到加载所有以前的样式表。（）

在,

• IE和Firefox在加载样式表之前阻止了所有后续脚本的执行
• Webkit仅阻止外部脚本的后续执行（
  ）
• Opera没有阻止任何脚本的后续执行

---

（2017）所以他们现在可能已经将这种行为标准化了。

今天在做一些测试时，我学到了

$(window).load(function() { $('#abc')...} );