原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
权衡利弊 网站性能优化之 CSS 无图片
技术
一、无图片技术定义
在不使用CSS Image(通过CSS 的引入的背景图片,不包括img 标签内的图片)
成类似图片效果的技术。
二、为什么要“无图片”?
首先我们通过yslow 的statistics 查看新浪微博最新版首页的文件，得到
623.8K。明显发现CSS 文件比CSS Image 小很多。
当然单纯拿这两个来比，还不能说明什么。
下面我们通过计算来说下CSS 文件与CSS Image 关系
CSS Image 是由一系列的图片组成，每一张图，即使最小一个小箭头(如下图)
例如微博的这个小三角图形
如果我们全部以CSS 的形式模拟这个小箭头，空间资源会占多少?
HTML 代码如下
CSS 代码如下
从上面的代码可以看出，在CSS 文件中总共不到200 个字符，如果我们按照1 字符等于1B
图片做节约了4/5
每一个CSS image 都需要一个http 请求去加载，浏览器每次发出的请求个数是有限的，减少C
页面的呈现速度;再次，经常使用微博的同学都知道，微博是可以换肤，如果使用CSS
高了代码的可维护性。
通过以上分析，使用CSS 无图片技术，可以总结得到以下3 个优点
减少请求资源的大小
减少http 的请求个数
提高可维护性
三、CSS 无图片技术，微博中有哪些实际应用呢?
通过上面的展示，我们可以看到，无图片技术，在微博上应用是十分普遍的。
四、无图片技术的实现方式
大概有四种方式：一是通过background-color、border 生成图片;二是通过字符生成图片;
级浏览器不兼容的问题);四是CSS3 的自定义字体(@font-face)生成图片。
利用CSS 的background-color、border 属性可以生成一些图形，例如三角。纯粹的CSS2
1)用background-color 生成的小方块，效果如下：
CSS 代码：
2)用border 生成的小方块，效果如下：
CSS 代码：
3)用border 生成的小三角，效果如下：
CSS 代码：
4)用border 生成的尖三角，效果如下：
CSS 代码：
5)用border 生成的斜三角，效果如下：
HTML 结构：
CSS 代码：
通过以上5 种图形，可以得到以下图形，效果图如下。
HTML 结构：
CSS 代码：
2.通过字符生成图片，例如尖角、圆点以及箭头，这也是CSS2 范畴，完全可以兼容ie6
1)尖角，效果图如下
HTML 结构：
CSS 代码：
2)圆点，效果图如下
HTML 结构：
CSS 样式：
3)箭头，效果图如下
HTML 结构：
CSS 样式：
3.CSS3 生成图片，使用box-shadow，border-radius，gradient 渐变等CSS3
滤镜，但是使用滤镜资源会消耗很大，所以，根据项目实际情况去权衡是否使用滤镜。
先看下谷歌搜索按钮的例子
CSS 样式：
GOOGLE 搜索这个按钮没有使用滤镜，IE 浏览器就没有做渐变处理，大家都知道GOOGLE
牺牲一下视觉体验也是可以接受的。
再看一下淘宝网“查看更多”的按钮
CSS 样式：
淘宝网这个按钮使用滤镜，可以完美兼容IE
4. CSS3 的自定义字体(@font-face)
通过CSS 来控制，这间接地做到少使用图片。
具体应用，微博微吧的ICON
HTML 结构：
CSS 样式：
至于具体实现方式的理论基础，要展开写，又是一篇文章，有兴趣的同学参考一下@
guide.html。
总之，CSS 无图片技术，是我们在写CSS
运用无图片技术做一些合理有效的性能优化。
(微博UDC 原创博文 /)
文章来源于：/article-22308-1.html
文档评论（0）