haizlin/fe-interview

[html] 第177天 网站首页有大量的图片,加载很慢,要是你,你该怎么去优化呢?

haizhilin2013 opened this issue · 9 comments

第177天 网站首页有大量的图片,加载很慢,要是你,你该怎么去优化呢?

cxwht commented

用cdn ,用图床,或者用那种一张图片里面好多图片组成的办法(不知道怎么说)或者根据设备的不同大小,加载不同分辨率的图片

1.icon 等小图片推荐使用雪碧图;
2.类似于相册那种 使用分页加载/懒加载。

小图片的话可以使用雪碧图
正常的图片可以使用懒加载

vkboo commented
  • base64(性能差)
  • 雪碧图
  • 懒加载
  • 缩略图
  • 骨架图

小图片或icon等用精灵图
大图可以使用懒加载

问题不同解决的方法也不同
1,启动页面时加载过多的图片
使用瀑布流==》懒加载
使用雪碧图==〉多个小图放在一个大图上
使用骨架图
首屏优先加载

2,部分图片体积过大
一张100px100px的图片,其中高喊10000个像素点,而每个像素点事通过rgba进行寻处,rgba每个色道都有0~255个取值,也就是2的八次方=256。正好是8位的1byte。而每个像素点事4个色道,每个像素点需要4bytes。因袭该图片体积为100004bytes=40000bytes=39kb。
有了上述的背景知识,我们就知道怎样去优化一张图片了,无非就有两个方向:
一方面是减少像素点 裁剪
另一方面减少每个像素点的字节数 压缩 ==》缩略图

雪碧图基本已经要退出历史舞台了吧?
1 小图用 iconfont(svg)代替。
2 不能替代的用base64。
3 去除gif图,用video代替。
4 工具压缩图片的大小。
5 优先使用webp格式
6 骨骼屏+ 懒加载。
7 http2

预加载,懒加载+http2

雪碧图基本已经要退出历史舞台了吧?
1 小图用 iconfont(svg)代替。
2 不能替代的用base64。
3 去除gif图,用video代替。
4 工具压缩图片的大小。
5 优先使用webp格式
6 骨骼屏+ 懒加载。
7 http2

你好,能简单讲一下http2是什么实现方式吗