我已经读过将CSS样式表放在文档HEAD之外禁止渐进式渲染，以避免在样式发生变化时重绘页面元素，但为什么会这样呢？它只是检查是否有任何CSS样式表在HEAD之外并延迟渲染？为什么不能首先加载所有样式表，无论HTML中的位置如何？
答案 0 :(得分：2)
嗯，我想浏览器不会等到他们从服务器获取整个文件（和链接文件（.js，.css ...）），然后在后台呈现所有内容然后将其显示给用户一下子。如果您有Firefox，请按F12并选中最后一个选项卡...在那里您可以看到浏览器如何加载内容。
与下载大型文件（例如200 MiB）不同，浏览器通常会在收到它们时立即开始显示从服务器获得的内容，同时仍然下载html / php /任意文件。
现在，您可能没有注意到快速计算机和快速Internet连接的差异，但我很确定，如果您限制Internet连接，您可以模拟此行为（页面缓慢加载）。
考虑到这一点，如果样式表位于页面的末尾，那么浏览器必须“重新呈现”所有内容是否有意义，不是吗？
答案 1 :(得分：2)
当浏览器查看HTML时，它会从上到下。在加载HTML之前，它无法知道底部是否有样式表。您在<HEAD>中加载样式表的原因是，正如您所说，它可以使用您指定的样式逐步呈现DOM对象。当它看到<link rel=stylesheet>它发出获取CSS文件的请求时。在性能方面，如果浏览器必须扫描所有样式表的整个html文件，确定需要应用哪些样式，然后加载HTML，那么某些页面的加载速度会非常慢。从设计 - 浏览器的角度来看，我认为这似乎是合乎逻辑的。
一般来说，这个想法是HTML提供内容，CSS提供样式，所以它们要保持独立。我想浏览器的设计是因为如果他们没有找到样式表，他们只是简单地加载HTML，因为老实说CSS并不是真的“必要”。它只是眼睛糖果，这是一种对我们人类很重要的美学。
在顶部或<HEAD>中设置样式表会为浏览器提供一个“抬头”（哈哈！）知道你想要放置哪些样式，这样它看起来不错，然后一旦到达底部，就会看样式表，然后加载它。
有一篇关于how browsers work的非常好的博文可能有用。
答案 2 :(得分：1)
好吧，在<style>之外添加<head>标记实际上并不合法HTML5。
编辑添加：除非您使用范围样式，只有Firefox支持。