排序CSS以减少​​gzip文件大小？

Yesterday I came across this post (via Ajaxian), it talks about how you might be able to end up with smaller file sizes (after gzipping) if you help gzip a little bit by sorting the CSS properties and values in stylesheets, so they are as similar and close to each other as possible.

昨天我(通过Ajaxian )碰到了这篇文章，它讨论了如果通过在样式表中对CSS属性和值进行排序来帮助gzip，那么如何能够以较小的文件大小(gzip压缩后)结束，所以它们是尽可能相似且彼此接近。

Now obviously it's not easy to do a safe sorting, there's many edge cases to be taken care of, but the question before diving into safeness is - is it really worth it?

现在显然进行安全分类并不容易，需要处理很多边缘情况，但是在进入安全性之前的问题是-真的值得吗？

In attempt to answer that I did a very simple CSS parser in JavaScript that will sort the properties and values, then I tested with a few files.

为了回答这个问题，我在JavaScript中做了一个非常简单CSS解析器，它将对属性和值进行排序，然后我测试了一些文件。

Long story short - it's probably not worth it. But if you want to help, please use the online tool and report if you see a considerable benefit for your own stylesheets.

长话短说-可能不值得。 但是，如果您想提供帮助，请使用在线工具并报告，如果您发现自己的样式表有很大的好处。

怎么运行的 (How it works)

Again, bear in mind this is not safe to do, your pages might look different before and after optimization. This is just a test if alphabetizing is really worth it in terms of gzipped filesize.

同样，请记住这是不安全的，优化前后页面可能看起来有所不同。 这只是测试是否真的值得在压缩的文件大小方面进行测试。

Before:

之前：

b {
  b: b c a;
  a: a b c;
}

a {
  a: a;
}

After

后

b {
  a: a b c;
  b: a b c;
}
a {
  a: a;
}

As you can see, order of selectors is preserved, properties within each CSS block are sorted and their values are sorted too.

如您所见，选择器的顺序得以保留，每个CSS块中的属性都进行了排序，其值也进行了排序。

通过测试CSS来提供帮助 (Help by testing your CSS)

Since the original question was - is it worth modifying YUI Compressor to sort properties and values, you can help by following these two steps:

由于最初的问题是-是否值得修改YUI Compressor以对属性和值进行排序，因此您可以按照以下两个步骤提供帮助：

1. minify your real-life CSS with YUI compressor (online version here) and then

   使用YUI压缩器(此处为在线版本)最小化您的真实CSS，然后

2. paste the result in my parser/sorter tool to see if you can gain much after compression.

   将结果粘贴到我的解析器/排序器工具中，以查看压缩后是否可以获得很多收益。

Please share your results in the comments section of this post.

请在这篇文章的评论部分分享您的结果。

到目前为止的结果？ (Results so far?)

I tested with two files well under 10K and the results were ever-so-slightly negative - the results were 0.05% bigger. Tested also with a few files over 10K and the results were 1.5% savings. Hardly worth it. But I hope someone can prove me wrong and show cases where alphabetizing can be well worth it. After all, the sweetest optimization is the one you don't have to do, but your build process can manage by itself 😉

我测试了两个文件，文件大小都在10K以下，结果几乎是负面的-结果大了0.05％。 还对一些超过10K的文件进行了测试，结果节省了1.5％。 几乎不值得。 但我希望有人能证明我错了，并举例说明按字母顺序排列是值得的。 毕竟，最甜蜜的优化是您不必做的优化，但是您的构建过程可以自行管理😉

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/sort-css-gzip-file-size/