Javascript getComputedStyle:是否等待外部样式表？_Javascript_Css_Html

Javascript getComputedStyle:是否等待外部样式表？

javascript css html

Javascript getComputedStyle:是否等待外部样式表？,javascript,css,html,Javascript,Css,Html,假设您有一个外部样式表（），后跟一个。是否总是在执行之前应用外部样式表，以便getComputedStyle始终遵守外部样式表的规则或者在应用早期样式表之前，浏览器是否允许运行JavaScript 例如： <!doctype html> <html> <head> <link href="/my-stylesheet.css" rel="stylesheet" /> </head> <body>

假设您有一个外部样式表（

），后跟一个

。是否总是在执行

之前应用外部样式表，以便

getComputedStyle

始终遵守外部样式表的规则

或者在应用早期样式表之前，浏览器是否允许运行JavaScript

例如：

<!doctype html>
<html>
  <head>
    <link href="/my-stylesheet.css" rel="stylesheet" />
  </head>
  <body>
    <div id="foo"></div>
    <script>
      window.getComputedStyle(document.getElementById('foo')).width
      // => "200px" due to stylesheet - is this reliable?
    </script>
  </body>
</html>


window.getComputedStyle（document.getElementById（'foo'））.width
//=>“200px”由于样式表-这可靠吗？

如果要确保已加载外部样式表，则可以使用窗口

load

事件，该事件将在外部样式表和图像等页面资源加载完成且页面也将具有最终布局时触发：

window.addEventListener('load', function() {
    window.getComputedStyle(document.getElementById('foo')).width
});

您还可以设计一个测试来查看样式表是否已经加载，方法是在样式表中放置一个特定且唯一的样式规则，该规则应用于特定的DOM元素（甚至可以隐藏），然后您可以使用

getComputedStyle（）

获取该样式，并查看它是否与应该的样式匹配。如果是，那么样式表已经加载。如果没有，则样式表尚未加载。但是，如果您仍然需要等待加载，则窗口

load

事件就是您希望使用的事件。

简而言之：是的，这是可靠的

为了证明我基于nodejs创建了以下testserver：

/testserver.js
/server/index.js
/server/style.js

testserver.js

创建一个节点js服务器，并确保每个请求需要两秒钟加载：

var express = require('express');
var app = express();
app.listen(8888);
app.use(function(req,res,next){
    setTimeout(next, 2000);
});
app.use(express.static('./server'));

我的

index.html

：

<html>
<head>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div id="mydiv"></div>
<script>
console.log(window.getComputedStyle(document.getElementById('mydiv')).width);
</script>
</body>
</html>

现在我通过启动服务器并调用

http://localhost:8888/index.html

在Chrome开发者工具中，时间线如下所示：

如您所见，在

style.css

#mydiv {
    position: absolute;
    background: #ff0000;
    height: 10px;
    width: 100px;
}

Javascript控制台按预期输出

100px

：

由于js控制台中没有错误，唯一的输出是预期的

100px

，因此我证明了所讨论的采用是正确的

编辑：现在我测试了更多：这适用于2秒、5秒和60秒的Chrome=>工作！此外，我还使用2s在Firefox、Opera和Safari上进行了测试。=>工作

对不起，我没有可用的IE

编辑2:我只是做了更多的研究：

我发现的行为是由W3C定义的。加载样式文件在由

链接-tag或样式-tag定义时阻止脚本执行：
HTML解析器或XML文档上下文中的样式表
如果
元素是由该文档的解析器创建的，该元素是
作为外部资源的样式元素或链接元素
链接，当元素
由解析器创建，并且元素的样式表已启用
当解析器创建元素时，元素的样式
尚未设置工作表就绪标志，上次事件循环
到达步骤1时，元素在该文档中，用户代理
还没有放弃那个特定的样式表。用户代理可以
随时放弃样式表
注意：
在加载样式表之前放弃样式表，如果
工作表最终仍会加载，这意味着脚本可能会结束
使用不正确的信息进行操作。例如，如果样式表
将元素的颜色设置为绿色，但脚本检查
结果样式在加载图纸之前执行，脚本
将发现元素为黑色（或任何默认颜色）
因此可能会做出错误的选择（例如，决定使用黑色作为
页面上其他位置的颜色，而不是绿色）。实施者已经
平衡脚本使用错误信息的可能性
等待慢消息时不做任何事情对性能的影响
网络请求完成

正如文档中所定义的，在解析过程中，脚本将不会执行，直到加载了块样式。
您可以在不同浏览器上进行一个实际实验：将“my stylesheet.css”文件变大，添加几Mb的base64编码图像（因此，您确信加载该页面所需的时间将超过slim测试页面的时间），然后看看会发生什么。如果我在一个不稳定的连接上，有时样式表超时，或者速度很慢。你能测试脚本是否会在CSS上等待5秒吗？是的，但是如果你期望这样，第一个答案也不能解决问题。此外，问题是javascript代码是否在应用CSS之前运行。对，我想知道脚本将在一个缓慢但不是死气沉沉的样式表上等待5秒钟，或者如果chrome变得不耐烦并在加载样式表之前执行脚本…@DustinHoffner-您是否报告某个浏览器版本的测试结果，或者您是否知道某个特定规范要求这种行为，以至于任何兼容的浏览器都会阻止脚本在加载以前的
标记之前？现在我在一些浏览器中进行了测试（请参见编辑）。为任何浏览器和版本证明这一点是一项艰巨的工作。也许一些W3C文档声明了这一点。这会更容易。