CssGaga – AutoSprite算法简介

CssGaga最新版(当前是build 163)改进了AutoSprite算法,图片排列紧密程度已完全超越人类,带来的好处是图片面积越小客户端所占内存越小,详见谨慎使用 CSS Sprites

CssGaga是个闭源项目,你只要用就好,不必浪费时间纠结于如何实现

淘宝的文河(yyfrankyy)同学曾问我要过CssGaga的源码,被我拒绝,我觉得授人与鱼不如授人与渔,让他去用Reflector反编译,他说他学过C#

D2前端技术沙龙(北京场)纪录

D:百度空间的编译平台能不能开源,能否推广出来?
李成银:都是基于第三方开发的,但是整体没有开源,包括编码规范公司有差异,不可能迁移过来,大家就算去用很多也要花很长时间;

不打算开源百度编译平台的李成银同学在twitter上说

@ytzong 是完全自动化的么?求小图片拼大图最小面积实现算法。我们现在只做了完全自动垂直合并和水平合并。

@ytzong 求实现方法,还有对于background-position里用到right,bottom等位置是怎么处理的?

我觉得成银看不懂C#,也不想他学了C#转做Windows Phone开发,所以简单介绍下

CssGaga的AutoSprite有两种算法:

  1. 最紧算法:主要参考 Optimal Rectangle Packing: Initial Results
  2. 抄近路算法:如果全部按最紧算法虽然图片的面积是最小的,但是会耗费CssGaga大量的计算时间,这是不能容忍的,如何即紧又快呢?这就是抄近路算法,设置一个因子,所有小于等于此因子的图片视为正方形来排列,在现实当中,根据大部分页面的特点,以小icon居多,其中又以16*16居多,所以把16作为因子,小于16*16的视为16*16来处理

CssGaga的整个AutoSprite处理流程如下:

  1. 找到所有的slice
  2. 按文件格式分为两组:jpg一组,png/gif一组
  3. 对两组分别运行如下操作
    1. 去重
    2. 去除硬盘上不存在的slice
    3. 按抄近路算法的因子来分组
    4. 根据两种算法来计算最终画布大小
    5. 拼图,返回图片位置坐标
    6. 替换css中slice的background-url,并生成background-position

其中第一步还会区分是否为IE6单独使用

其实像文河和成银完全可以把写代码的时间来省出来去推广CssGaga,重复造轮子的成本是很高的

Tags:

18 comments

  1. welefen 说道:

    学习了,呵呵。
    对于编译平台我其实是这个意思:目前还没有整体开源,因为里面集成了大量的编码规范,即使开源了大家学习和迁移成本很高。但把一些自主开发的工具给开源了(比如:FL,图片自动优化脚本,Smarty3性能优化等等),通过这种方式慢慢的开源。

    每个工具使用的范围都是有限的,比如:cssgaga应该还不能在linux下很好的使用。所以造不造轮子根据实际情况而定,只要不造完全重复的轮子就好。

  2. yyfrankyy 说道:

    哈哈,认真学习了。我跟成银的想法一样,如果cssgaga有标准的服务端调用入口,肯定不用再浪费时间了。

    其实不一定需要开源,把sprite的功能独立dll,然后其他程序通过WebService来调用也是条路子,毕竟用c#来搞服务端工具的人好像不多。。

    PS,俺还木有去反编译…

    • ytzong 说道:

      为啥一定要搞云端捏?
      你的PS、VIM之类不都是本地的么

  3. zicjin 说道:

    “cssgaga应该还不能在linux下很好的使用”

    不认同,mono项目质量完全够格,我还是非常期望LZ能认真考虑开源的事情。

  4. zicjin 说道:

    “我觉得授人与鱼不如授人与渔,让他去用Reflector反编译,他说他学过C#”

    “其实像文河和成银完全可以把写代码的时间来省出来去推广CssGaga,重复造轮子的成本是很高的”

    我语文愚钝,实在看不懂LZ这些话的逻辑。。。
    1 授人与渔的话难道不正是开源项目所做的事情吗?这关系完全说反了吧?
    2 没人喜欢想重复造轮子,但没有好的开源项目做榜样我只能重复造啊?我认为CssGaga技术层面做的非常好,只是应用接口层面有欠缺。但不管有没有欠缺,都不可能完全满足大多数公司的要求。

    如果LZ实在不愿意开源,至少做个命令行应用吧,这样才能有基本的环境适应性(本来我就没看懂为啥CssGaga没有命令行工具),这算是个折中做法,多数小公司可以考虑使用了。

    • ytzong 说道:

      命令行没有必要
      兄台可以尝试使用一下
      我个人认为可以满足所有Windows平台用户的需要

      • zicjin 说道:

        各个公司的开发环境太多样太复杂了,LZ说这话时是不是过于自信了?

        我曾经用了CssGaga在实际项目中,但后来放弃了。为什么?很简单,基本的命令行也没有,用TFS持续集成的时候无法使用powershell管道执行Css的维护任务。这是一个破口,其他部署流程包括js我都可以自动化。这个破口是无法接受的,所以我只能用YUI做点压缩了事。

        LZ在说“命令行没有必要”的时候难道没有注意到这个世界上几乎所有辅助工具都是从命令行开始的么?closure-compiler、UglifyJS、YUI不是如此么?因为辅助工具的市场定位就决定了它是无法独立完成工作的,它一定是必须结合其他工具共同组成一个开发环境。即使是像Visual Studio这样的庞然大物也不可能包办一切,所以它也有命令行。

        • ytzong 说道:

          对CssGaga来说没必要做命令行(CssGaga里也调用了几个命令行工具)
          少了命令行对你来说只是增加了一个“破口”,但相对节省在其他方面的时间已绰绰有余,还是很划算的

          • zicjin 说道:

            我感觉您讲的话像机器人的话一样,,,呵呵,,,算了不说了。还是感谢你贡献了这么一个工具,虽然我不会再用了。

            • ytzong 说道:

              对此我感到非常遗憾。
              CssGaga最开始是我在工作中为了方便自己逐步开发而成,后来融入部分团队的建议,我相信能满足所有人。
              “机器人”对话?我不这样想,我的回答是发自真心的,如果你是MM我肯定是另一副嘴脸,讨论问题我一向是很认真的

              • zicjin 说道:

                既然你说自己发自内心,那很好,我不谈命令行的事情了,我们就谈谈开源的事情。

                我实在是很费解,开源对你来说是多么十恶不赦的事情以至于你见的它像见了瘟神一样?

                开源后除了提交bug,我什么事情都不会来烦你了,想要命令行自己做就是。想要支持linux我相信自己也能搞定。

                • ytzong 说道:

                  我不怕别人来烦我,我很乐意改bug,增进合理的功能
                  我若开源不是只对你一个人开源
                  选择应受到尊重,举个不恰当的例子,卖花的小孩扯着衣服卖花,我不想买的情况下把衣服撕烂我也不会给半毛钱
                  我要把握绝对的控制,名字是我定,合并进某些利益组织的系统没门…
                  同时懂css和C#的人不多,现阶段没人能比我做的更好,如果有,请把简历发我,或者做一个更牛逼的工具出来给大家用
                  还有,哪天我下岗了还能靠此找到更好的工作或者靠卖软件或相关服务来过活

  5. echo 说道:

    友人推荐了你的小站,正在学习中

  6. Dailey 说道:

    争论很激烈啊。。。围观一下。。。

    准备用一下,不过看起来很复杂的样子,对于一些后端基础不是很好的的前端可能上手比较慢。

    • ytzong 说道:

      认为复杂的一般都是没搞懂配置,配置好了剩下就超级简单了,good luck~
      我司不少前端有对后端一点不懂,用起来没任何问题:)

Leave a comment