从1.3 发行说明:
ready() 方法不再尝试对等待所有样式表加载做出任何保证。相反,所有 CSS 文件都应包含在页面上的脚本之前。更多信息
从ready(fn) 文档中:
注意:请确保在您的脚本之前包含所有样式表(尤其是那些调用 ready 函数的样式表)。这样做将确保在 jQuery 代码开始执行之前正确定义所有元素属性。不这样做会导致偶发性问题,尤其是在基于 WebKit 的浏览器(如 Safari)上。
请注意,以上内容甚至与实际渲染CSS无关,因此您可能仍然会在ready()
启动时看到屏幕发生变化。但它应该可以避免出现问题。
其实我觉得有点奇怪,把CSS放在JS上面就可以解决所有问题。CSS 是异步加载的,因此 JS 加载可以在 CSS 仍在下载的同时开始和完成。因此,如果以上是一个解决方案,那么执行任何 JS 代码都会暂停,直到所有较早的请求都完成?
我做了一些测试,确实,有时JS 会延迟到 CSS 加载完成。我不知道为什么,因为瀑布显示JS在CSS下载完成之前很久就已经完成加载。
见JS斌的一些HTML和它的结果(这个有10秒的延迟),并看到webpagetest.org为它的瀑布效果。这使用了 Steve Souders 的cuzillion.com 中的一些脚本来模拟缓慢的响应。在瀑布中,引用的resource.cgi
是 CSS。因此,在 Internet Explorer 中,第一个外部 JS 会在 CSS 被请求后立即开始加载(但该 CSS 还需要 10 秒才能完成)。但是第二个<script>
标签在 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>

获取 jQuery 后使用第二个外部 JS 进行的另一个测试表明,在 CSS 加载之前,不会开始下载第二个 JS。在这里,第一个引用resource.cgi
是 CSS,第二个是 JS:

将样式表移到所有 JS下方确实表明 JS(包括ready
函数)运行得更早,但即使如此,在 Safari 和火狐。但是这样的事情$(this).height()
在那个时候会产生错误的值是有道理的。
然而,额外的测试表明,在加载之前定义的 CSS 之前停止 JS 并不是通用规则。使用外部 JS 和 CSS 似乎有一些组合。我不知道这是如何工作的。
最后说明:由于 JS Bin 在从裸 URL 运行时在每个脚本中包含 Google Analytics(如jsbin.com/aqeno,测试结果实际上是由 JS Bin 更改的......似乎编辑 URL 上的输出选项卡如jsbin.com/aqeno/edit不包括额外的 Google Analytics 内容,并且肯定会产生不同的结果,但是该 URL 很难使用网页测试.org 进行测试。对Firefox 中的样式表阻止下载和 IE 中的 JavaScript 执行的参考由strager是一个更好的理解的良好开端,但我还有很多问题……还要注意 Steve Souders 的IE8 Parallel Script Loading使事情变得更加复杂。(上面的瀑布是使用 IE7 创建的。)
也许人们应该简单地相信发行说明和文档......