当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现答案

【问题标题】：Firefox won't block rendering of HTML when CSS links in head当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现
【发布时间】：2018-04-27 14:30:40
【问题描述】：

我遇到了一个持续了一段时间的问题。我读到的关于 Firefox 的所有内容都指定，如果您在 <head> 中包含 <link> 标签，它将阻止页面的呈现，直到这些资源被加载。为了测试，我在服务器端资源渲染请求中设置了一个断点，以确保 CSS 永远不会加载。

在 Chrome、Safari 和 IE 中，页面保持空白或不刷新，直到我恢复进程并加载 CSS。这会导致一个空白屏幕，然后是一个样式正确的页面。

在 Firefox 中，原始 HTML（带有巨大的内联 SVG）会显示在页面上，直到我允许 CSS 请求完成。这会导致一闪而过的无样式内容 (FOUC)。

这是一个基本的标记示例

<!DOCTYPE html>
<html lang="en-us">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
    <link rel="stylesheet" href="https://cdn.example.com/res/css/core.css?v=1a2b3c4d5e6f7890">
    <link rel="stylesheet" href="https://cdn.example.com/res/css/site.css?v=1a2b3c4d5e6f7890">
    <!-- meta tags, ads, etc -->
    <title>My Page Title</title>
</head>
<body>
    <header>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 24" class="site-logo">...</svg>
    </header>
    <!-- page content -->
    <script type="text/javascript" src="https://cdn.example.com/res/js/site.js?v=1a2b3c4d5e6f7890">...</script>
</body>
</html>

我有一个解决这个问题的方法，内联<body style="display:none">，然后内联core.css，包括body { display: block !important }，以模拟我期望的阻塞渲染效果。

我是否遗漏了一些重要的东西？是否有其他设置干扰此行为？我没有在其他网站上看到这种情况，这与我预期的行为背道而驰。

【问题讨论】：

嗯，这是个问题。无论我是否使用 CDN，都会发生这种情况。 async 和 defer 仅适用于脚本标签。

标签： html css firefox drawing

【解决方案1】：

我看到了同样的事情。根据提示here，我在标题中的<link> 之后放置了一个非空脚本标记（只有一个空格<script> </script>），这似乎会按预期阻止渲染。

【讨论】：