真的有聪明的CSS压缩器吗？

Question

7

我测试了一些CSS压缩器，说实话，我感到失望。也许我只是试错了吗？

起点是以下故意糟糕的CSS代码：

.a{
   font-size: 10px;
   padding: 0 6px;
   text-align: center;
}
.b{
   font-size: 11px;
   padding: 0 6px;
   text-align: center;
}

显然，这个声明在两个类中都指定了三个属性中的两个是毫无意义的，导致代码长度为185字节。如果你手动修改它，它将变得更好看：

.a, .b{
   padding: 0 6px;
   text-align: center;
}
.a{
   font-size: 10px;
}
.b{
   font-size: 11px;
}

这个比较小一些（149字节）或者甚至更小

.a, .b{
   padding: 0 6px;
   text-align: center;
   font-size: 10px;
}
.b{
   font-size: 11px;
}

这是在之前133个字节处

.a,.b{padding:0 6px;text-align:center;font-size:10px}.b{font-size:11px}

压缩后仅有71个字节。这相当于原始大小的100/185*71 = 38.3%。

所有压缩所做的事情是：

.a{font-size:10px;padding:0 6px;text-align:center}.b{font-size:11px;padding:0 6px;text-align:center}

这段代码占用了100个字节。

当然，在理想的情况下，您应该首先编写更好的CSS代码，但如果您编写较大的文件并且使用任何框架，这并不容易，几乎是不可能的。

那么，有没有更好的工具可以使上述示例代码只占用71个字节？

- Raphael Jeger

我同意。虽然你的例子非常简单和直接，但想象一下有数百个定义类的 CSS 文件，每个属性被两个或更多的类共享。我不太相信这会导致 CSS 文件显着变小。 - Paul

2

增加复杂性的是，在CSS中，规则的顺序对于覆盖很重要。在不影响结果的情况下移动CSS文件中的内容并不是一件容易的任务。 - Christofer Eliasson

1

在@ChristoferEliasson的评论基础上，这种方法只能压缩那些在文件中相邻且共享相同属性的类。鉴于在相当庞大的CSS文件中进行压缩是关键，因此该技术的实际百分比节省可能微不足道。 - DA.

1

换句话说，尽管这种压缩方式是有效的，但它往往只占大多数CSS文件的一小部分。投资回报率并不高。 - DA.

@Paul：当一个属性被数百个选择器共享时，使用更长的选择器将其合并到一个规则中是必要的，你不这么认为吗？ - Raphael Jeger

显示剩余5条评论

3个回答

1

压缩看起来可能微不足道，但你还能期望它做什么呢？任何一种CSS压缩器都只能带你走到一定程度，然后就会破坏你的代码。

毕竟，CSS并不是一种编程语言。

- Jezen Thomas

CSS的定义随着其第四版肯定会发生变化。它将带有公式、条件等等 :) - Dipak

CSS已经是图灵完备的了 ;) - James Allardice

@Dipaks 这并不意味着选择器逻辑会改变，对吧？我的意思是，你不能像在JS闭包中那样使用别名。它也无法优化选择器，因为它需要了解DOM。像calc这样的实验性技术对于你是否能够比今天更有效地压缩CSS没有影响。 - Jezen Thomas

0

当您在CSS压缩后使用gzip（如大多数性能指南建议的那样），则会得到不同的结果，因为CSS压缩器的输出更易于压缩。

CSS压缩版本在gzip后为85字节，而您的版本在gzip后为89字节。

因此，在CSS压缩后使用gzip工具可以获胜。此外，结果更接近原始代码，这样就可以减少由于过度优化而破坏CSS而导致的错误空间。

但是，您的CSS代码在未压缩版本中以71字节获胜。

你所做的优化具有非常局限性的用例，其中选择器在CSS文件中相邻。

一些示例演示问题：

.a {
    height:50px;
    width:50px;
    background-color: yellow;
}

.b {
    background-color: red;
}

.c {
    background-color: yellow;
}

- Fabian Barney

在这个特殊的例子中，“我的代码”在未压缩的版本中对每个压缩器+ gZip都获胜，这有点“不酷”... - Raphael Jeger

正如@DA在评论中所述，您的优化仅适用于文件中相邻的选择器。否则，您可能会改变语义。我将在我的答案中添加一个示例。因此，此优化具有非常局部化的用途。 - Fabian Barney

是的，这很有道理。这可能会很复杂，甚至取决于类在哪里被使用，对吧？ - Raphael Jeger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dipak · Accepted Answer

Gzip压缩文件

通过对Bargaineering上的.css文件进行gzip压缩，其大小从28.2K减少到7.3K，节省了74.1%。该文件的响应时间从53ms降至39ms，节省了26.4%。