本文作者:IMWeb bleanycao 原文出处:IMWeb社区 未经同意,禁止转载
性能优化是前端开发不得不面对,必须重视的一个经久话题。教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。这样,对平台图片的优化已经达到极致了吗?
随着平台规模的不断扩大,我们发现/img/目录的小图标越来越多,已经达到了700+多个,这么多图标真的都是必须的吗?
从上面这张图可以看到,以箭头为例,不同颜色、不同大小的达到几十张,为了适配不同场景,而这些一个矢量图就可以轻松搞定。
矢量图,两个方案,svg和iconfont。svg雪碧图只兼容IE9+,而平台仍需要支持IE8的用户,为了避免矢量图和位图两套方案,选择了兼容性更好的iconfont,可以完美兼容到IE6。
319
个图标(共655KB
)适合做iconfont图片与iconfont大小对比:
很明显,合并后的iconfont只有之前图片雪碧图的8%
,不足10KB。
iconfont效果明显,业务场景适用,我们到底该如何使用?市面上已经有很多iconfont的平台,上传svg转化为字体文件,可下载查看demo,copy样式到代码中,但是存在几个问题:
与图片效果一致
虽然目前线上有很多这种图标,但是为了我们平台的图标统一性和可沉淀,我们选择了自己绘制图标。
在选择绘制图标大小上有了几次尝试,因为图标大多数是12px/16px/24px/32px/48px,最后我们经过多次测试确认绘制的svg大小为480px,左右留白30px这个标准
这个是遇到的最简单的一个问题,之前也研究过,设置cors即可:
Access-Control-Allow-Origin: *
是字体都会涉及到行高问题,icon font当然也不例外,默认我们设置line-height: 1;
,在垂直对齐的时候先使用vertical-align,如果不行,我们就用绝对定位。
虽然icon font很大程度上减少了资源大小,节省了开发工作量,一定程度上也优化了代码,并形成一个新的可遵循的规范,但目前它的表现还不是那么完美,离图片还是有点距离的
网上和iconfont.cn给出的推荐写法是:
[@font-face](/user/font-face) {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
} 但是经过实测,IE9已支持.woff,iOS4.1-几乎没有用户,因此优化为:
[@font-face](/user/font-face) {
font-family: 'iconfont';
url('fonts/webfont.eot?-7drjga') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/webfont.woff?-7drjga') format('woff'), /* IE9+、chrome、firefox */
url('fonts/webfont.ttf?-7drjga') format('truetype');/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
同时要注意书写顺序,如果.ttf在.woff之前,则chrome会同时下载这两个文件,而其他浏览器则只下载自己认识的字体文件。
最后icon font要想真的替换所有图片,还需要浏览器进一步进化。期待美好的那一天到来!!!