中国教程网:下面我们通过计算来说下CSS文件与CSS Image关系！

一、无图片技术定义 在不使用CSS Image（通过CSS的引入的背景图片,不包括img标签内的图片）情况下生成类似图片效果的技术；换句话的意思就是在使用纯CSS生成类似图片效果的技术。 二、为什么要“无图片”？ 首先我们通过yslow的statistics查看新浪微博最新版首页的文件，得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比

　　一、无图片技术界定

　　不在应用CSS Image（根据CSS的引进的背景照片,不包含img标识内的图片）状况下转化成相近图片实际效果的技术；换句话说的含意就是说在应用纯CSS转化成相近图片实际效果的技术。

　　二、需不需要“无图片”？

　　最先人们根据yslow的statistics查询微博最新版本主页的文档，中国教程网获得Stylesheet File(CSS文档)尺寸为206.8K, CSS Image尺寸为623.8K。显著发觉CSS文档比CSS Image小许多。

　　或许单纯性拿这2个来比，还不可以表明哪些。

　　下边人们根据测算而言下CSS文档与CSS Image关联

　　CSS Image是由一系列的图片构成，每一张图，即便最少一个小箭头符号（以下图），你存成一张图片，如何也得1KB吧。

　　比如微博的这一小三角图型：

　　假如人们所有以CSS的方式仿真模拟这一小箭头符号，室内空间資源会占是多少？人们来测算一下，最先贴下代码

　　HTML代码以下：

　　CSS代码以下：

　　从上边的代码能够看得出，在CSS文档中一共不上200字符，假如人们依照1空格符相当于1B的来测算得话，200字符大约相当于0.2KB，比立即用图片做节省了4/5的免费下载資源，显著减少请求資源的尺寸。假如人们尽量的应用无图片技术来保持，显著能够提升网页页面的载入速率；次之，人们了解每一个CSS image都必须一个http请求去载入，电脑浏览器每一次传出的请求数量是有现的，减少CSS image的数量，显而易见减少了http请求数，也就提升网页页面的展现速率；再度，常常应用微博的同学们都了解，微博是能够焕肤，假如应用CSS无图片技术，人们仅必须简易换一下CSS特性就能保持焕肤，提升了代码的健壮性。

　　根据左右剖析，应用CSS无图片技术，能够小结获得下列3个优势：

　　减少请求資源的尺寸

　　减少http的请求数量

　　提升健壮性

　　三、CSS无图片技术，微博中有什么实际上运用呢？

　　根据上边的展现，人们可以看，无图片技术，中国教程网在微博上运用是十分广泛的。

　

转载请注明: 爱推站 » 中国教程网:下面我们通过计算来说下CSS文件与CSS Image关系！