Question

我有一个50x50像素的div，我希望尽快在我的主页上显示。

我做得更快

<div style="height:50px;width:50px">

或者为它指定一个类以避免内联样式：

<div class="myDiv">

将myDiv类放在HTML页面的HEAD部分的CSS文件中？

我的想法是第一个应该更快，因为它不需要请求和接收CSS？我猜ultimatley我问的是BODY和HEAD是顺序还是并行渲染。

Answer 1

首先没有HEAD加载，就没有BODY。

在渲染BODY之前，必须先加载它。如果已加载，则HEAD已加载。

您可能对浏览器是否可以同时加载CSS文件和HTML文档本身感兴趣。这取决于浏览器的实现，但我相信大多数人可以同时下载至少两个文档。

另一个重要的事情是文档所包含的文件越多，其中一个文件的请求丢失的可能性就越大。因此，通过使用内联CSS，您可以确保CSS永远不会丢失。

但我必须指出内联CSS被认为是一种糟糕的风格。一旦你有足够的标记，你会发现一次更新你的页面变得越来越困难。你将不可避免地失去一个或另一个实例。在单独的文档中声明所有样式并从页面引用它们是一个更好的主意。这样，当您需要更改某种颜色时，可以在一个地方进行，而不是在您的页面中找到37个地方。

Answer 2

正如其他人已经指出的那样，正确的要做的就是将样式放在外部文件中，并在文档的<head>部分引用它。

但是，如果您要快速（这就是您所要求的），那么您应该使用内联声明，如

<div style="height:50px;width:50px">

有几个原因：

您不必加载外部文件。这是非常慢的（与下一个原因相比），因为涉及额外的HTTP请求（在请求和下载本身之上）可能被其他外部文件（如JavaScript，favicons等）阻止。因此，如果您将声明放在同一文档的某些<style>标记中，它的加载速度会更快。但接下来有另一个原因。
浏览器不必查看DOM树并搜索具有类myDiv的节点以应用样式。它找到<div>并立即（或在下一个渲染转弯处）应用样式信息这第二次延迟几乎不会引人注意，但如果你想要获得高性能，那么这就是你要走的路。

我同意这些可能在某种程度上是理论上的原因但是你走了。： - ）

Answer 3

有些情况下，这将是一种“好”的做法。例如，您有一个高价值的登录页面，需要大约500字节的CSS支持，与200K样式表相对应。

虽然如此，他们的客户必须在NEXT页面上下载该文件，但在目标网页上渲染的时间通常最为重要。

此外，AFAIK，浏览器在下载整个CSS文件之前不会开始渲染，而内联样式则不然。但是，是的，最佳实践，以及98％的时间你想把CSS放在一个链接文件中。

Answer 4

使用嵌入式css文件。在第一次请求之后，浏览器将缓存该文件，而不必再次下载。使页面加载速度更快，减轻服务器的压力。

内联样式不仅难看，而且还会破坏整个层叠的内容。

Answer 5

性能上的差异将是难以察觉的，应该是无关紧要的。而不是担心像这样的过早优化更关心做“正确的事情” - 在这种情况下，正确的做法是为CSS使用外部样式表文件，因为它更易于维护并将问题分开。