中国教程网:下面我们通过计算来说下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无图片技术,微博中有什么实际上运用呢?
 
  根据上边的展现,人们可以看,无图片技术,中国教程网在微博上运用是十分广泛的。