单个巨大的。css文件vs.多个较小的特定。css文件?

从历史上看，使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。

然而，截至2018年3月，超过80%的浏览器现在支持HTTP2，它允许浏览器同时下载多个资源，以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计，我不认为这样做有任何好处，除了更容易编码。

HTTP2的最佳性能的理想设计是:

有一个核心CSS文件，其中包含所有页面使用的常用样式。有页面特定的CSS在一个单独的文件使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开，先推这个，然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度，还可以在页面加载后加载站点或特定页面的剩余CSS。

2018-03-21 02:48:33

从历史上看，使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。

然而，截至2018年3月，超过80%的浏览器现在支持HTTP2，它允许浏览器同时下载多个资源，以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计，我不认为这样做有任何好处，除了更容易编码。

HTTP2的最佳性能的理想设计是:

有一个核心CSS文件，其中包含所有页面使用的常用样式。有页面特定的CSS在一个单独的文件使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开，先推这个，然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度，还可以在页面加载后加载站点或特定页面的剩余CSS。

2018-03-21 02:48:33

以下是最好的方法:

创建一个包含所有共享代码的通用CSS文件将所有特定页面的CSS代码插入到同一页面中，在标签上或对每个页面使用属性style=""

通过这种方式，您只有一个包含所有共享代码的CSS和一个HTML页面。顺便说一下(我知道这不是正确的主题)，你也可以在base64编码你的图像(但你也可以用你的js和CSS文件)。通过这种方式，您可以将更多的HTTP请求减少到1。

2011-12-07 18:23:16

我通常有一些CSS文件:

一个用于重置和全局样式的“全局”CSS文件 “模块”特定的CSS文件用于逻辑分组的页面(可能是结帐向导或其他东西中的每个页面) 用于覆盖页面的“page”特定CSS文件(或者，将其放在单个页面的块中)

我真的不太关心CSS文件的多页请求。大多数人都有不错的带宽，我相信还有其他优化会比将所有样式组合到一个单独的CSS文件中产生更大的影响。在速度和可维护性之间进行权衡，我总是倾向于可维护性。YUI压缩机听起来很酷，但我可能要检查一下。

2010-05-06 15:57:23

捆绑的样式表可以节省页面加载性能，但是样式越多，浏览器在页面上呈现动画的速度就越慢。这是由于大量未使用的样式可能不在您所在的页面上，但浏览器仍然需要计算。

参见:https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

捆绑样式表的优点: -页面加载性能

捆绑样式表的缺点: -较慢的行为，这可能会导致滚动，互动，动画，

结论: 为了解决这两个问题，对于生产来说，理想的解决方案是将所有css捆绑到一个文件中保存在http请求中，但使用javascript从该文件中提取您所在页面的css并使用它更新头部。

为了了解每个页面需要哪些共享组件，并降低复杂性，最好声明这个特定页面使用的所有组件，例如:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

2016-10-21 07:26:19

我更喜欢多个CSS文件。这样就可以更容易地根据需要将“皮肤”换入和换出。单一文件的问题在于，它可能会失控，难以管理。如果你想要蓝色背景但又不想改变按钮怎么办?只要改变你的背景文件。等。

2010-02-25 17:54:15

单个巨大的。css文件vs.多个较小的特定。css文件?

推荐文章

最新文章

标签