web前端性能优化
1、资源(js、css)合并与压缩,减少http请求 1)在线工具压缩 2)构建工具压缩 2、图片优化 1)png8、png24、png32之间的区别 2)图片格式 jpg 图片有损压缩,不支持透明,适用于不需要透明图片的场景 webp 只适用于安卓,ios上有兼容性问题 svg 矢量图,比png小,适用于需要简单的矢量图的场景 png 支持透明,适用于需要大量透明图片的场景 3)雪碧图,将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分 www.spritecow.com 优点: 将多张图片合并到一张图片中,可以减小图片的总大小 将多张图片合并到一张图片后,只需一次网络请求就可以将所需的资源全部下载,减小建立连接的消耗,在移动端尤为明显 显示雪碧图的条件: 需要一个设置好宽和高的容器 需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置。 4)Image inline (一般8kb以下的图片用,根据业务场景权衡) <img alt="Embedded Image" src="data:image/png;base64,/9j/4AAQSkZ..." /> 优点: 减少http请求次数 缺点: 会使总体资源变大 浏览器不会缓存内联图片资源 兼容性较差,只支持ie8以上浏览器