Question

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

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

Answer 1

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

Answer 2

是的，当您指向外部样式表时，呈现页面将会延迟。多数人也经常希望不向用户展示没有风格的页面版本。

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

但是，尽管HTTP / 2可以通过并行请求增加下载时间，但loadCSS等提供CSS异步加载的工具可能有助于减少页面阻塞。

Answer 3

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

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

请考虑以下情形：仅在将鼠标悬停在其他HTML元素（在我的示例中为button元素）之后才必须显示特定的HTML元素（例如，在我的示例中为span元素）。因此，当HTML加载到浏览器中时，我们的button元素应该具有display:none;，并且一开始就不应呈现。仅当用户 span 元素上的悬停时，才会显示button元素。

在代码段中，我已经实现了该方案。并按要求工作。

现在，如果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>

希望这个答案对新开发者和其他人有用：）

CSS <link />标记会阻止各种浏览器中的HTML解析

3 个答案: