前端性能优化之我的实操案例

周末，客户反馈了一个页面上的组件操作卡顿的问题，周一抽空看了一下，发现这个问题虽然不复杂，但里面挺有门道，顺手记录一下。这个控件用于客户搜索供应商厂家，数据陆陆续续添加的比较多，现在已有上千条不同的供应商厂家，每个供应商都会展示一张营业执照照片和一个简短的文字介绍，这批图片信息已经导致了该组件明显卡顿。

探究原因

最开始以为是数据太多导致，因为从第一个供应商到最后一个供应商都需要下载并展示这上千张营业执照图片，这么一大批数据同时下载肯定会慢。为了验证这个猜想，我在控制台的network选项卡中勾选了“Disable cache”和“Slow 3G”，果然加载速度慢了许多，每次切换供应商至少要5、6秒，甚至更久。

我继续观察发现，图片确实多，但展示这张图片并不是单纯的<img>，而是用一个<div>包裹起来，图片是background-image，想当然的以为这些图片可能预先缓存了，查看了一下发现并没有，<div>上也没有background-size: cover，最终结果就是每次切换供应商都需要加载一张新的图片。

优化方案

既然这样我们就来改造一下，这里我对一个单独的供应商做了改造，有兴趣的同学可以打开控制台看看改变了哪些属性：

<div style="background-image: url(&quot;https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniV.png&quot;); width: 48px; height: 48px; background-size: contain; background-position: center;">
</div>

1. 将<img>改成了<div>并设置了固定的宽度、高度，宽度和高度和原来的图片一样。
2. 将背景图片地址用background-image来设置。
3. 设置了background-size为contain，这样如果图片比盒子大，图片就会按比例缩小，直到有一边正好等于盒子的相应边长，另一边可能会留下空白区域，而如果图片比盒子小，图片就会按比例放大，直到有一边正好等于盒子的相应边长，另一边可能会被裁剪。
4. 设置了background-position为center，这样图片就会居中显示。

改造完毕后，再次运行，切换供应商明显变快了，图片也全部都能显示。到这里我们的优化已经完成了，接着我们还可以根据项目的实际情况做进一步优化，比如：

1. 将这批图片全部上传到CDN上，这样可以减少服务器的压力，并加快图片的加载速度。
2. 使用懒加载技术，这样只有当用户滚动到供应商时才会加载相应的图片。
3. 减少不必要的请求，比如我们在上面的例子中使用了background-size: contain，这样可以减少浏览器为了知道图片大小而发起的请求。

当然优化方案并不是一成不变的，大家还需要根据项目的实际情况来做调整，找到最适合自己项目的优化方案。