CSS <link /> 标签会在各种浏览器中阻止 HTML 解析吗答案

【问题标题】：Will CSS <link /> tag block HTML parsing in various browsersCSS <link /> 标签会在各种浏览器中阻止 HTML 解析吗
【发布时间】：2018-06-03 10:44:42
【问题描述】：

对于各种浏览器，在正常的HTML解析流程中，会出现<link href="xxx.css" type="text/css" rel="stylesheet" /> 阻止其余的 HTML 解析？

众所周知，脚本标签（例如 <script src="xxx.js"></script> ）确实会阻止 HTML 呈现

【问题讨论】：

测试时发生了什么？
我最近正在优化一个大型网站，我看到在

标签： javascript html css web

【解决方案1】：

如果我很好地理解了您的问题，您想知道标题中的链接是否 : 并阻止您的页面加载？如果这些链接的内容是资金，它们将被加载并且页面将继续加载直到脚本结束。但是，如果由于某些原因无法获取链接中的内容，则浏览器将停止加载并等待内容可用。在超时之后浏览器放弃并尝试呈现没有链接内容的页面。它通常会导致由 JavaScript 运行的 Brocken UI 和/或页面功能。

【讨论】：

【解决方案2】：

是的，当您以这种方式指向外部样式表时，呈现页面将会延迟。这也经常希望不向用户显示没有样式的页面版本。

与由于多种原因（下载时间 + 执行时间 + 需要操作 DOM 元素）而经常设置在页面底部的 JavaScript 引用相比，加载后的 CSS 不应该花费太多时间来应用。

然而，尽管 HTTP/2 可能会通过并行请求为您增加下载时间，但像 loadCSS 这样提供异步加载 CSS 的工具可能有助于减少对您页面的阻塞。

【讨论】：

【解决方案3】：

由于各种原因，我们的 CSS 必须在 HTML 之前完全加载。

让我给你一个这样的可能原因（这个问题是在一次采访中问我的）

考虑这样一种场景：我们必须在悬停在其他一些 HTML 元素（比如我的示例中的 span 元素）之后才显示特定的 HTML 元素（例如，我的示例中的 button 元素）。因此，当 HTML 加载到浏览器中时，我们的按钮元素应该有 display:none;，并且它最初不应该被渲染。只有当用户悬停在 span 元素上时，button 元素才会显示。

在代码 sn-p 中，我已经实现了该场景。它正在按要求工作。

现在如果 CSS 是非阻塞而不是阻塞，那么我们可以想象 Button 元素的行为会很奇怪。有时它最初会出现，然后突然消失。

因此，对于所有此类情况，最好仅将 CSS 设置为阻塞 - 这样我们就允许先加载 CSS，然后再加载 HTML，这将确保所有 html 元素 都有各自的无论如何都会应用适当的 CSS 样式。

.box{
  display:block;
  height:300px;
  width:300px;
  padding:2rem;
}

button{
  display:none;
}

.box span{
 cursor:pointer;
}

.box span:hover ~ button{
  display:block;
}

.box span:hover{
  color:red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
      <span> Hover over me to see the secret Button</span>
      <button>I am  the Secret Button</button>
  </div>
  
  
</body>
</html>

希望这个答案对新开发人员和其他人有所帮助:)

【讨论】：