Question

我注意到Twitter的源代码顶部附近：

data-fouc-class-names="swift-loading"

快速谷歌搜索也出现了一些使用它的其他网站，但我找不到任何描述它的内容。使它成为这样一个受欢迎的网站的标记（由于conditional HTML classes被使用而多次启动）必须使它对某些东西有用。

我熟悉＆＃34;闪存无格式内容＆＃34;又名＆＃34; FOUC＆＃34;但我很好奇这段代码与此有何关系。

Answer 1

如果你看看第38-40行，你会得到

<script id="swift_loading_indicator">
   document.documentElement.className=document.documentElement.className+" "+document.documentElement.getAttribute("data-fouc-class-names");
</script>

更改文档元素类以包含此属性中设置的值。

这允许css在页面和javascripts加载时隐藏“Flash Of Unstyled Content”。

稍后脚本会删除此类以允许加载完全加载的页面。

它似乎也用在ajax页面加载代码中，允许内容加载隐藏，只有在加载所有内容后才会显示。

以名称data-开头的属性是html 5规范的一部分，代表私有数据。它们允许网页在网页中存储信息，而不会通过HTML5验证器

中断验证

Answer 2

我注意到它仅在某些网站中添加了IE8。我相信它被添加到为IE定义fouc类名。

Fouc（无格式内容的闪现）只是一个显示怪癖，某种页面在Win IE中闪烁，当你导入css样式时会发生这种情况。

因此，他们可能会将该类添加到可能的fouc对象中，并使用该类名仅影响解决方案中的那些对象。

你可以在这里测试一下：http://www.bluerobot.com/web/css/fouc.asp/

您可以在How to prevent Flash of Unstyled Content on your websites

找到更多信息

什么是data-fouc-class-names =“swift-loading”？

2 个答案: