时间戳

首页 > 解决方案 > CSS标签会在各种浏览器中阻止HTML解析吗

javascript - CSS标签会在各种浏览器中阻止HTML解析吗

问题描述

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

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

标签： javascripthtmlcssweb

解决方案

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

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

button考虑这样一种场景，我们必须在悬停在其他 HTML 元素（例如我的示例中的元素）之后才显示特定的 HTML 元素（例如，我的示例中的span元素）。因此，当 HTML 加载到浏览器中时，我们的按钮元素应该具有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>

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

推荐阅读