web前端面试题附答案013-你网站里的图片用webp格式了吗？（没用过怎么办）

经海路大白狗

已于 2022-10-20 21:10:03 修改

阅读量299

点赞数

分类专栏：前端面试千题计划文章标签：前端前端开发职场和发展面试题

于 2022-10-03 23:50:11 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/127157916

版权

前端面试千题计划专栏收录该内容

73 篇文章 27 订阅

订阅专栏

一、面试官为什么这么问？

不是都说了吗，同样的图片，png和webp对比，webp明显是有优势的，那肯定回答用了啊，而且使用起来又不是那么费劲，就把后缀改了呗。

如果你这么回答，面试官紧接着就会问，所有的图片都是webp格式的吗？除了你说小图片用了base64，其他图片貌似也都符合场景，那面试官这个时候十有八九是在问webp图片的支持性是如何做的。

二、关于webp图片的支持性

1、gif图片不支持webp，这个是大家比较熟知的吧。原因就是gif图片本身质量比较大，眼看着一个很小的图片，就一个很细微的小动作的gif图片，其实远远比png等其他图片质量要高。而如果用了webp图片呢，质量即便是减小了，但每一帧将会大打折扣，所以gif图不适合用webp。

<script>
    // 服务端下发图片的变量，暂时前端定义一下吧
    let url = 'aa.gif';
    let urlLastPointIndex = url.lastIndexOf('.');
    if (url.slice(urlLastPointIndex).indexOf('gif') !== -1) {
        // gif图片不支持webp格式
    } else {
        // 其他可支持
    }
</script>

2、但重点还不是gif图片，重点在于webp图片对于某些浏览器是不支持的，而不是你针对某一个图片做判断，而是要有一个公共方法来判断浏览器的支持性。试想，一个页面上百张图片，每次过来都判断一下，那将会非常大的降低图片渲染效率。

<script>
    let supportWebp = document.createElement("canvas").
toDataURL("image/webp", .5).indexOf("data:image/webp")
    if (supportWebp !== -1) {
        // 表示当前浏览器支持webp格式，将原来服务端下发的图片再拼接.webp后缀即可
    }
</script>

3、这里的思路呢就是利用document这个文档对象，创建一个canvas的dom元素，而这个canvas元素本身有toDataURL方法，转变base64空链接，方法接收2个参数，可以看一下创建的这个canvas在利用toDataURL以后是个什么内容，虽然内容很多，但重点是要识别如果转成功以后是否包含data:image/webp的字眼。

document.createElement("canvas").toDataURL("image/webp", .5)
------------------------------------
------------------
------------------------------------
'data:image/webp;base64,UklGRtgCAABX
RUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgC
AAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAA
......
......
4wMAAAAAAAAAA=='

在C端渲染图片是非常重要的一点，而且技术在不断提升，不知道后续还会出现哪些更高深的技术呢。会不会像摩尔定义一样，每隔多久，同样大小的电路板上晶体管的数量提升多少，价格减少多少呢，真的不好说。

三、总结

现在可以说webp这个知识点是必考题，除非他们公司是做管理系统的，平时几乎不怎么考虑图片问题。但只要是C端渲染沾边的就会考，而且也不至于上面的几点，怎么判断浏览器是否支持，哪些支持，用webp有哪些好处，甚至有的公司是有自己的webp实现逻辑的。很多东西如果光背面试题能答出的东西是有限的，经验，总结才是最重要的，还有就是多看别人的文章，来学习。其实很多时候大家会发现，这些博主们发干活的不多，你哪天碰见一个问题，如果快速找到了某个文章，直接解决了你的问题，那么真的应该感谢一下这个人。