有什么agressive CSS Minification工具吗？

本文介绍了有什么agressive CSS Minification工具吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想知道是否有人知道一个工具，将积极重写CSS以更有效地压缩样式。例如我想： 使用适当的权重函数 c 为 b 中的元素。这可以是给定元素 b 或累积长度的属性 - 累积长度的选择器的邻居的数量。您的选择。 您可能会注意到，通过使用这种方法，您将获得一个二分图。现在尝试以下贪婪算法（伪码）： 算法 在 b 中具有最大权重并将其添加到空集合中的元素 b 如果B中的另一个元素d具有相同的权重 如果这样的广告存在，检查它是否覆盖相同的选择器。 如果 d 涵盖相同的选择器：将 d 添加到 Z 如果 d 不覆盖相同的选择器，则检查具有相同权重的下一个元素，或者如果选中所有元素，则转到步骤3 覆盖一些选择器的一组属性。 删除 Z 中的所有元素及其在G中的相邻边，并删除 Z 本身。 如果B不为空，请转到步骤1. 您的缓冲区包含预先缩小的CSS代码。您现在可以合并一些属性（例如 margin-top：0px; margin-left：1px ）。 备注 请注意，实际压缩取决于您的体重函数。因为它是一个贪婪的算法，它可能会返回一个缩小的CSS，但我相信有人会发布一个反例。请注意，您必须在删除 Z 中的元素后更新权重函数。 运行时估计 如果我没有错误，算法将总是终止并且将在O（ | B | ^ 2 * | A | ）中运行。如果你使用堆和排序每个邻接表中的属性（建立时间O（ | B | * | A | log（| A |））） O（ | B | * | A | *（log（| B |）+ log（| A |）））。 I'm wondering if anyone knows of a tool that will aggressively rewrite CSS to compress styles more efficiently. e.g. I'd like:.foo { color : red; font-size: 16px; height: 20px; }.bar { color : red; font-size: 16px; height: 30px; }to be compressed to:.foo, .bar { color : red; font-size : 16px; }.foo { height : 20px; }.bar { height : 30px; }To be clear, all the minifiers I know of, like YUI Compressor, only remove white-space and possibly join a few properties (like font-family and font-size into font). I'm looking for something that's willing to do a complete re-write of the structure of a file.Short of that, if anyone knows of any work anyone has done with regards to the compression logic behind this, that info would be appreciated. I'm thinking of writing my own if I can't find one, but there's a million things to consider, like margin-top over-writing part of margin, selector specificity & include order, etc etc etc... Then the job of how to efficiently compress the info, like will it be more efficient to repeat a selector or a property? 解决方案 I don't know any aggressive CSS minification tool, but you could use the following approach:SetupExpand your CSS (margin:1px 0 0 0; to margin-top:1px; margin-left:0px;...).Build a graph G = (V,E) with V as set of vertices and E as set of edges:V consists of the conjunction of the two sets A (unique selectors, eg. div, p > span, #myid) and B (unique properties, eg. display:block;, color:#deadbeef;).E consists of all associations between a selector (in A) and a property (in B).Use an appropriate weight function c for your elements in b. This could be the number of neighbors of a given element b, or accumulated lenght of properties - accumulated length of selectors. Your choice.You may notice that by using this approach you'll get a bipartite graph. Now try the following greedy algorithm (pseudo code):AlgorithmTake an element b in B that has maximum weight and add it to an empty set ZCheck whether another element d in B has same weightif such a d exists check whether it covers the same selectors.If d covers the same selectors: add d to Z and go to step 2.if d does not cover the same selectors check the next element with the same weight or go to step 3 if you checked all elements d.Now Z is a set of properties covering some selectors. Parse this as CSS into a buffer.Delete all elements in Z and their adjacent edges in G and delete Z itself.If B is not empty go to step 1.Your buffer contains a pre-minified CSS code. You can now merge some properties (eg. margin-top:0px;margin-left:1px).RemarksPlease note that the actual compression depends on your weight function. As it is a greedy algorithm it will likely return a minified CSS, but I believe someone will post a counterexample. Note also that you have to update your weight function after deleting the elements in Z.Runtime estimateThe algorithm will always terminate and will run in O(|B|^2*|A|) if I'm not mistaken. If you use a heap and sort the properties in each adjacency list (setup time O(|B|*|A|log(|A|))) you'll get O(|B|*|A|* (log(|B|)+log(|A|))). 这篇关于有什么agressive CSS Minification工具吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！