由黄钻等级图标处理引发的思考
作者:飘飘 来源:ISD Webteam 发布时间:2009-11-16 12:37:00
最近在处理Qzone黄钻图标更新时,想起近期对业务图标进行优化所遇到的一些问题,把思绪收拾起来和大家一共探讨,欢迎多方声音。
在实际工作中,图标类的应用非常广泛,如同数组般的等级图标更显其特殊性。下面要共同探讨的两个方向,以什么方式实现及怎么更好在贴近项目实际更好地实现并供应用。
假设:业务的用户等级共有10个,加上大小2种视觉尺寸的图标,还有“过期未续费用户”的表现,共有38个图标需要入库供调用(如下图)。
在项目的CSS框架研发中,会有几个key作为考虑:请求数、代码量、兼容性、图片文件大小、是否可并为组件模块且方便逻辑性实现。
众多不同等级的图标在不同方式的广泛应用时,是否会产生过多的文件请求;
等级图标的代码在实现上是否会使用过多的代码,且页面上真实应用的只是少量代码,从而造成代码臃肿;
(x)html+css输出的图标应用到页面中,是否和页面上其它元素兼容,否则将为达到兼容目标而增加一系列代码;
如果各图标合并后,权衡项目应用的实际情况,图象文件是否会过大而消耗带宽;
图标的HTML固定,className命名中的某个数字命为作为变量,通过修改变量来达到表现效果。
回顾之前的出现的处理方式,可以归总为三种:
前景图的插入
这应是最原始的处理方式了,将众多单个等级的图片有序命名存放到一个目录,由前端页面应用,通过修改文件名的方式更换不同的等级显示。在实际的用户列表页面中,因为不同的用户通属不同的等级,那么,就会显示不贩等级图标,如上面假设,就会同时产生38个请求。且在项目的维护上,极易存在瓶颈。假设根据需目需要对图标文件更换存放目录或更改其尺寸大小,那么需要大面积对所有应用过的开发 template文件排查处理(更改URL,宽高定义,文件名等),很多情况难以维系在可控范围。透明图+背景的实现
这是Qzone项目中使用最多的一种方式,在项目的访问速度体验优化及图标实际应用中起到不可磨灭的作用,该方式后期也陆续为国内外其它网站使用。其具体实现方式是,保存一张1*1像素的透明图片,并将其设置长时间cache,因其display属性的特殊性,图片在页面布局上得心应手,且解决了多请求的问题,同时解决图片合并区域扩展维护的问题。但是,一旦在客户端cache文件队列中被挤掉,cache失败,该方式容易让这张透明的前景替位图产生洪水式的请求, 造成服务器压力和大流量。且<img />容易继承项目中其它定义。在图标与文字的垂直对齐上各浏览器的渲染解析不一样,从而增加一些兼容代码。
也有衍生出来空src的处理方式,如<img src=”" class=”app_icon” alt=”icon” />,表面上看,可以节省文件的请求,但事实上,它除了会导致大量的无效请求外,还会向日给apache不断写入错误的log,造成过大的服务端压力,同时,在非IE浏览器(如firefox)也会表现出缺省图象的红叉。内容标签+背景
这里说的是带文字等内容的标签加入黄钻等级图标背景来实现,如<span>我是黄钻7级用户</span>,给span的左边定义一个图标,把文字向右移动一定的位置。大伙在实践中验证,这种在语义上和实现上,可以说是完美的了。但是,不方便项目代码的规划和管理,特别像等级图片这类的可以归入库的代码及应用方式。同时,标题的大小区域为不可控,在后续的维护中,更会不定期更改其区域大小,那么,就在图片的合并上存在瓶颈,难以确定一个图片该预留多大的透明区域,使之不影响到其它场景的图片应用,也可能会因为后期的维护处理不当,影响到其它标签区域的背景显示异常,造成不良的用户体验。标签载体+背景
结合前几点所述,用一个标签作为图片的载体,再给它定义背景等属性,显示出相应的图标。它既可以免除用图片处理产生的流量和请求及服务器压力,又减去合并图片时所考虑的预留空间尺寸。一般标签不具img的特殊属性,既能成块状显示出图标,又能和文字等共处一行内,那么在选取的这个标签要在样式上定义得较少,不易继承样式影响表现,破坏页面的兼容和库文件的管理维护。
在实际项目中,选用了strong作为图标的替代标签:


猜你喜欢
- CAS单点登录主要是为了解决主系统和子系统的统一登录问题,能够做到任意一个子系统登录成功后,再登录其他子系统后不再需要认证,让用户不用重复地
- 本文实例为大家分享了python+opencv实现堆叠图片的具体代码,供大家参考,具体内容如下# import cv2# import nu
- Matplotlib介绍Matplotlib 是一款用于数据可视化的 Python 软件包,支持跨平台运行,它能够根据 NumPy 
- NICE!大家好,在上一章节,我们学习了 multiprocessing 模块 的关于进程的创建与进场常用的方法的相关知识。 通过在一个主进
- mysql 5.6对密码的强度进行了加强,推出了 validate_password 插件。支持密码的强度要求。安装办法:在配置文件中打开[
- 本文为大家分享了Python多线程聊天室,是一个Socket,两个线程,一个是服务器,一个是客户端。 最近公司培训,要写个大富翁的小程序,准
- 1.1.propety动态属性在面向对象编程中,我们一般把名词性的东西映射成属性,动词性的东西映射成方法。在python中他们对应的分别是属
- Python中if __name__ == ‘__main__‘作用要搞清楚这个问题,要知道以py作
- 本文实例讲述了Flask教程之重定向与错误处理。分享给大家供大家参考,具体如下:Flask类有一个redirect()方法. 当我们调用它时
- 怎样判断一个JavaScript变量是array还是obiect? 答案: 1、如果你只是用typeof来检查该变量,不论是array还是o
- 见下面的代码:<html><head><title>精彩春风之月份查询</title><
- 感想我们在用jupyter notebook的时候,经常需要可视化一些东西,尤其是一些图像,我这里给个sample code环境opencv
- 本文实例讲述了PHP编程文件处理类SplFileObject和SplFileInfo用法。分享给大家供大家参考,具体如下:php对于大文件的
- 前言 不知道从什么时候开始有了写博客的想法,奈何自己的知识储备还很薄弱,迟迟无法下笔。这是我的第一篇博客,算是记录一下自己学习前
- 1、performance schema:介绍 在MySQL5.7中,performance schema有很大改进
- Linux系统中的信号类型各操作系统的信号定义或许有些不同。下面列出了POSIX中定义的信号。在linux中使用34-64信号用作实时系统中
- 声明本文章为个人拙见,仅仅提供参考,不一定正确,各位大佬可以发表自己的意见。题目描述考虑到在虚拟机部署中资源提供商通常希望自己的收益最大化,
- 基本映射映射使用在根据不同URLs请求来产生相对应的返回内容.Bottle使用route() 修饰器来实现映射.from bottle im
- 前期准备首先,使用Python内置的Turtle绘图库需要在程序前添加以下代码:import turtle也可以写成这样:from turt
- 1.使用效果如下面动图所示,点击取色按钮后,将鼠标移动到想要取色的位置,等待两秒即可取色:点击save color按钮可以将颜色存储到col