当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现
Posted
技术标签:
【中文标题】当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现【英文标题】：Firefox won't block rendering of HTML when CSS links in head 【发布时间】：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 仅适用于脚本标签。 【参考方案1】：我看到了同样的事情。
根据提示here，我在标题中的<link> 之后放置了一个非空脚本标记（只有一个空格<script> </script>），这似乎会按预期阻止渲染。
【讨论】：
以上是关于当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现的主要内容，如果未能解决你的问题，请参考以下文章