2021/1/4-每日三题第11弹：干饭了吗？干饭人！图片格式只有png、jpg 和 gif 吗？？？

前言：

朋友们好啊，这个天气是越来越冷了，但是我对学习的热情却丝毫不曾减少（咳咳😉😉，该干饭了！！！），

你信吗 ？（我信你个鬼，你这个糟老头子坏得很😜😜！）

好了，话不多说，上题目！！！😍😍😍

题目：

(题目1) 你知道的网页制作会用到的图片格式有哪些 ？

(题目2) 在css / js代码上线之后开发人员经常会优化性能，从用户刷新网页
开始，一次 js 请求一般情况下有哪些地方会有缓存处理 ？

(题目3) 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪
些方法优化这些图片的加载，给用户更好的体验 ？

倒计时10min，开始计时，看看自己能做对几道题😎😎😎？参考解析在下面，但不要直接看解析哦，这样子没什么效果的！！！

参考解析：

题目1：

1.png-8 、 png-24 、 jpeg 、 gif 、 svg
2.但是上⾯的那些都不是⾯试官想要的最后答案。⾯试官希望听到的是
  Webp , Apng 。（是否有关注新技术，新鲜事物）  
3.Webp： WebP 格式，⾕歌（google）开发的⼀种旨在加快图⽚加载速度的图⽚格式。图
  ⽚压缩体积⼤约只有 JPEG 的 2/3 ，并能节省⼤量的服务器带宽资源和数据空间。
  Facebook Ebay 等知名⽹站已经开始测试并使⽤ WebP 格式。
4.在质量相同的情况下，WebP格式图像的体积要⽐JPEG格式图像⼩ 40% 。
5.Apng：全称是 “Animated Portable Network Graphics” , 是PNG的位图动画扩展，可
  以实现png格式的动态图⽚效果。04年诞⽣，但⼀直得不到各⼤浏览器⼚商的⽀持，直到
  目前得到iOS safari 8 的⽀持，有望代替 GIF 成为下⼀代动态图标准  

题目2：

1.dns 缓存
2.cdn 缓存
3.浏览器缓存
4.服务器缓存

题目3：

1.图⽚懒加载，在⻚⾯上的未可视区域可以添加⼀个滚动事件，判断图⽚位置与浏览器顶端
  的距离与⻚⾯的距离，如果前者⼩于后者，优先加载。
2.如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展示图⽚的前⼀张和后⼀张优
  先下载。
3.如果图⽚为css图⽚，可以使⽤ CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技
  术。
4.如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略
  图，以提⾼⽤户体验。
5.如果图⽚展示区域⼩于图⽚的真实⼤⼩，则应在服务器端根据业务需要先⾏进⾏图⽚压
  缩，图⽚压缩后⼤⼩与展示⼀致。 

怎么样，是不是很简单，你做对了几道题呢？做对的再接再厉，不要骄傲，做错的也没有关系啦，好好总结，继续努力！！！

当然啦，大家如果有补充的或者其它问题，欢迎大家在评论区交流啊，路漫漫其修远兮，吾将上下而求索，希望大家可以一起坚持下去啊！😎😎😎~~~

如果这篇文章能够帮助到您，希望您不要吝惜点赞👍👍和收藏💖💖，您的支持是我继续努力的动力 💪💪！！！