教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

Python培训之前端图片优化七大方法(二)

更新时间:2016年09月21日14时20分 来源:传智播客Python培训学院 浏览次数:

  • 使用SVG矢量图片
前面说的几种方式,使用的都是位图,或者叫点阵图,这里所说的矢量图,指的是一种新的svg图片格式,矢量图片相对于位图来说,容量更小,在显示上图像元素的边缘光滑,不会出现锯齿,矢量图不足的地方是,它没有位图的色彩丰富,所以在使用单色的图标图片的时候,使用svg,不仅可以提高性能,而且在显示效果上也非常好,下面是位图和矢量图放大时的对比:
 
 
 
 
  • 使用字体图标
所谓的字体图标,是指我们在网页上使用的一些单色的图标,可以把这些图标做成自定义的字体,这些图标就没必要用图片来做,直接用特殊字体就可以实现,网上有集成的字体图标库,我们可以下载使用,但是这些字体图标库集成了许多不需要的图标,会增加下载的容量,建议使用阿里巴巴的字体图标库,http://www.iconfont.cn/,在这个平台上,UI可以将项目中用到的图标按照特定格式上传,生成项目自定义的字体库,也就是说,字体库里面只包含项目要用的图标字体,这样就可以节约字体库的容量,提高性能,同时也可以方便前端的开发。
 
  • 设置图片文件的缓存
设置图片的缓存,也就是设置图片文件在客户端缓存的时间,在多少时间期限之内,让用户的请求直接使用本地的缓存图片,而不用去服务器下载,这样可以极大地提高前端的性能。设置文件的缓存有多种方式,可以结合几种方式来设置。这种方法不仅仅适用于图片文件,还适用于其他可以缓存的文件。
 
 
  • 使用静态资源服务器
所谓的静态资源服务器,就是专门存储静态资源的服务器,比如说图片资源,将图片存储在这种服务器上,这些图片在页面请求时,不会额外地增加cookie等信息,节约网络传输的容量,静态资源服务器不仅仅适用于图片,还适用于其他的资源,比如公共的CSS样式,文档等等资源。
 
以上就是七种针对图片优化的方案,您可以根据项目的需要,选取特定的方案来对项目的图片进行优化,提高前端的新能。

本文版权归传智播客Python培训学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客Python培训学院
首发:http://www.itcast.cn/python/ 
0 分享到:
和我们在线交谈!