图片占流量的大头
据统计,图片内容已经占到了互联网内容总量的62%
toC网站,基本上都是图片占流量大头
某电商网站商详页,js、css、图片对比如下面三张图,结果十分明显
- js大小:
- css大小:
- 图片大小:
而咱们熟悉的vue.min.js
,压缩后94k,再gzip之后,33k,还不如一个普通的banner图大
如此大量的图片,会引发下面需要关注的问题
引发的性能 & 体验问题
影响LCP
(Largest Contentful Paint 最大内容绘制)指标
图片过大、过多,下载+加载的时间也会过大,会直接影响LCP指标
影响其余指标
图片虽然是非阻塞性资源,但是会占用当前浏览器的网络下载,影响其余js、css等资源的下载速度,尤其是在弱网环境下!
这样的话除了LCP指标,还会影响TTI
(Time to Interactive 可交互时间) 这一重要指标
同样,也会影响Speed Index(加载速度)这个指标
影响用户体验
除了数值化的指标,图片也直接影响了界面体验,毕竟你的界面如果很多图片的话,用户的关注点会聚焦在图片上。这个时候,如果图片都是瞬间秒开的那种,用户会因很快获取到了内容而心情愉悦;而如果图片需要慢慢向下、逐帧加载的一个过程,那无疑会让人感觉到等待、烦躁,会对当前的网站兴趣大大降低
相关性能工具提示
下图为Chrome的lighthouse工具,针对csdn首页性能检测的图片部分
如果是使用合适尺寸图片的话,会减少1.19秒的加载时间
内存问题
图片所占内存远超图片大小
浏览器、小程序等宿主加载图片时,是将图片吃到内存中的;而且因为图片位深
的原因,一张图片在浏览器中占的内存,远超过
该图片的文件大小
位深
位深度指的是存储每个像素所用的位数,主要用于存储,单位bit
图片位深与色彩模式有关,通常默认 ARGB_8888,位深32位(4字节,8bit = 1byte )
图片内存
png/jpg等图片格式在显示之前都需要经过解码生成一张位图,之后根据位图创建纹理传给GPU做渲染
位图内存消耗= 图片长度(像素) * 图片宽度(像素) * 位深(单位:字节)
现在假如有一个图片是600*800的,文件大小100KB
内存所占大小600 * 800 * 4 byte = 1875KB = 1.83M,超过文件大小10倍多!
对于GIF图片因为本身有多帧,所以最终的内存消耗为单帧内存x帧数
图片导致内存溢出真实案例:
2018年做小程序,有一个红米手机上的崩溃场景,就是点击查看某图片的时候,小程序会闪退
后来定位到,那张引起小程序崩溃的图片是我们运营上传的、未经压缩的原图,大小5M多,被吃到内存里,造成了低端手机的小程序内存崩溃
解法:我们公司的图片服务器,支持按参数获取压缩、降质的图片,我添加了一些参数,获取了处理后的图片,大大降低了图片大小及内存占用
从那时开始,我更加关注与研究图片的相关事情
图片性能优化,性价比高
相对于图片的重要性而言,图片的性能优化手段很多,而其中最重要的几措施,真的是又简单又高效
其余的前端性能优化,在现代浏览器的加持下,效果不是那么明显
- 针对js的优化,你可能纠结过for of、for循环、forEach、map这些循环哪个更快,可能在js处理大段数据的时候进行性能衡量,但会发现,现代浏览器的强大,让咱们写的js代码性能十分高效,除非一开始写的有重大问题,否则很难大幅度提示性能
- 针对css的优化,例如不使用*通配符、少使用标签选择器、选择器深度不能过深等。这些优化,你真的很难衡量出来
效果比较明显的性能优化,图片优化更简单
- 防抖、减少dom操作、提高动画性能,这些很关键,但基本上都是具体问题具体分析,花费的精力会多,不像图片,基本上全局适用的优化
- 优化webpack做treeshaking、合并压缩,在http的层面上,减少的请求可能不如几个图片的优化减少的请求少
作为对比,图片的优化就简单的多
适用全局
,做好图片优化,会使整站体验提高一个等级,而不是某几个界面使用一个靠谱的图片oss,能解决按大小加载、网络缓存等问题,此处可以事半功倍!
- 图片
懒加载
,也能减少很多流量问题 - 使用
webp
、apng
等新格式图片,会发现新技术很高效、很有趣
图片的各种使用场景
除了上面说的图片性能优化之外,图片还有很多实际的业务场景
- 通用的图片展示、预览组件
- 图片的上传、压缩
- 图片验证码、明水印、暗水印等
- 图片的跨域、seo等
那就开始深入的聊一下图片吧!
该专栏后面的内容大体会有
- 图片oss服务器使用
- jpg、png、gif等常规图片格式
- webp、apng等新型图片格式
- 图片性能优化汇总
- 图片相关使用场景若干等