CSS如何停止渲染？

问题描述 投票：0回答：1

我仍然无法理解“ CSS is render-blocking”]的概念。我非常了解JS如何解析器阻止。但是，前者对我来说仍然有点不清楚。

让我们举个例子：

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Some Document</title>
  <link href='cdn1.com/styles1.css' rel="stylesheet"/>
  <link href='cdn2.com/styles2.css' rel="stylesheet"/>
</head>
<body>
   ...
   ...
</body>
</html>

style1.css（来自CDN1）：
body { background: blue }

style2.css（来自CDN2）：
body { background: red }

现在，假设来自cdn1的style1.css花了1秒
，而来自cdn2的style2花了500ms。我想知道最终用户会在以下时间轴之间在浏览器中看到所有的事情：
  1. 在时间[[T <500ms：因为CSS被渲染阻塞并且在没有styles1.css文件之前不会构造渲染树，所以会存在FOUC或空白页面吗？>在时间
  2. 500ms ：是否存在红页（由于style2.css已加载），FOUC或由于第1点所述原因仍为空白页？
    3. 此外，结果在所有浏览器（主要是Edge，Chrome，Firefox和Safari）上是否一致？

我仍然无法非常清楚地理解“ CSS是渲染块”的概念。我非常了解JS如何解析器阻止。但是，前者对我来说还不清楚。让我们以...

html css google-chrome cross-browser rendering
1个回答
0
投票
浏览器将根据以下时间轴加载并呈现CSS

T <500ms

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.