html - 加载 CSS 的最快方式——内联 vs HEAD

Question

我有一个 50x50px 的 div，我想尽快显示在我的主页上。

我做的更快吗

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

或者给它分配一个类来避免内联样式:

<div class="myDiv">

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

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

Answer 1

如果不首先加载 HEAD，就没有 BODY。

在渲染 BODY 之前，必须先加载它。如果它被加载，那么 HEAD 已经被加载。

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

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

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