web前端面试题附答案025-怎么让gif动图只播放一次？以及扩展gif大图的渲染优化思路

经海路大白狗

已于 2024-05-10 09:31:35 修改

阅读量1.9k

点赞数 1

分类专栏：前端面试千题计划文章标签：前端性能优化面试题 javascript

于 2022-10-06 21:26:25 首次发布

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

版权

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

73 篇文章 26 订阅

订阅专栏

给大家提个问题，你觉得做前端开发，要不要动手搞一搞ps这个设计工具。我觉得是需要的，早些时候我不会用PS，然后呢也没有类似蓝湖的这种工具。UI呢就常常给我一些设计图让我搞，经常我就需要一些图片,icon，但我又不会PS，总是跟UI要他们就很烦躁，甚至还说我。后来我终于学会了扣小图片

1、让设计搞

反正gif动图也是UI设计给我们的，就应该让他们给我们只播放一次的gif动图，这无可厚非吧。这是我跟设计同学要的截图，把PS汉化了，应该是比较好找的。窗口 > 时间轴 > 然后就可以设置了。

2、前端搞

既然面试官这么问你，肯定不是想听你在你之前公司替UI同学如何如何搞PS这个工具来着，当然你说了肯定是没坏处的，技多不压身嘛（活多了才压身）。他想听你说一说从前端角度出发的话，你是如何搞的

那么gif动图我们所看见的，大部分都是一直循环下去的那种，只播放一词，说实话，这个产品经理真是思路不断，折磨不止。

这就要求服务端在下发gif动图的同时，要给我们第一帧图片，再告诉我们这个gif动图执行一次所要花费的时间。

<body>
    <img id="imgElement" src="" />
    <script>
        let gifUrl = 'aa.gif';  // 假定服务端下发的gif路径
        let pngUrl = 'aa.png';  // 假定服务端下发的png路径
        let onceTime = 3000;    // 假定gif动图执行一次的时间
        let imgDom = document.getElementById('imgElement');
        imgDom.setAttribute('src', gifUrl);
        let imgTimeout = setTimeout(() => {
            imgDom.setAttribute('src', pngUrl);
            window.clearTimeout(imgTimeout);
        }, onceTime)
    </script>
</body>

通过已知的执行一次的时间，可以在gif执行一次以后，替换成gif动图的第一帧，这样就可以让用户无感知的认为，gif动图真的只执行了一次。

3、拓展出gif大动图的渲染优化

我们知道gif大图的渲染一直都是一个大问题，因为gif会比其他静态图片体积大很多，所以对于下载，浏览器解析渲染都是一个大问题。而且gif是多帧的静态图片，他就相当于这些静态图片的组合全部渲染完成后，才能使这1个gif动图渲染出来。

所以可以根据上面的逻辑，我们先拿到gif的第一帧图片，同时拿到gif动图的路径。因为第一帧图片相对来说就会小很多很多了，可以快速展示。这个时候可以采用预加载gif的方式。这样的方式，同样可以使用户无感知的看到连贯的gif大图的渲染。

<script>
    var newImage = new Image();
    newImage.src = 'aa.gif';
    newImage.load = function() {
        图片DOM.setAttribute('src', 'aa.gif');
   }
</script>

4、总结

面试其实是一次开卷考试，很多人可以得心应手，甚至举一反三，有的人就回答当前的问题都很吃力。其实没有太多技巧，多做项目，多总结，而且是举一反三的总结。

说到吃力，给大家讲个笑话，好多年的笑话了。昨天公司来了3个女孩面试，第一个，我让他用js写了一段代码，他写出来了，我又让他用java写一段代码，他也写出来了，然后他还主动说，我要不要用拍森也写一段。但是她有男朋友了，我跟他说：回去等通知吧。后来那个呢，没有男朋友，我让他用最熟悉的方式写个hello world ，他费了半天劲儿没写出来。我跟他说：明天来上班吧。