偶然间，我发现了优快云的bug，改一下，效率竟提高3600%

发现问题

上篇文章发布后获得了“话题达人Lv2”的徽章，今天逛优快云时，突然想查看一下自己拥有的所有徽章，点击“查看所有徽章”后，就看到了下图的效果。

一名从业多年前端开发工程师的嗅觉告诉我，这个界面布局显然是有问题的。同样是凭借一名写bug多年的老程序员经验，第一件事情先保留现场，重新开个页签看下还能重现吗？重新进入，果然正常了！

问题分析

对比差异发现，这个弹框应该是存在一个白色底的背景映衬，这个白色底可能是没有加载成功，或者层级不对。于是揣着好奇打开了F12控制台，查看DOM元素，发现这里是用了一张1600px*210px的背景图实现的title背景底，有可能是图片地址错误或者加载时cancel掉了。

看图片的组成和形状，我个人猜测应该是为了要满足头像部分UI设计内容的实现，那为什么用背景图呢？应该是图省事，提高开发效率，白色的容器嵌套头像容易实现，但难点在于两侧的上升弧和下降弧，让UI帮忙切个图以背景图方式引入，确实是最简单的一种做法！但有条件的话还是改一改吧。

问题定性

于是我多刷新了几次，也用周围同事的电脑试了试，可惜一直没能重现。于是将网速调整为slow3G再清除缓存，刷新一下，在加载弹窗的过程中确实见证了图片从无到有的过程。那么这个Bug可以定性为“正常使用下低概率偶现，网速较慢时影响视觉体验的优化型Bug”，纯前端的活儿。

方案措施

一般修改某个bug或者进行功能/样式优化，对明确要解决的问题给出期望，这里的优化目标如下：

是否能够将偶现概率降低，甚至降低概率为0。
弱网环境下，图片加载速率是否可以提升。
弱网环境下，至少保持布局合理化和完整性。

对于以上目标和期望，可以想到如下解决方案：

图片压缩：图片已经是压缩的了，目前为2.4KB，再压缩下去可能会影响图片质量。
使用svg：因为图片整体不是太复杂，svg确实是一个好方法，但svg理论上是存在一些兼容性问题，可能造成一些未知的影响。
转化base64：图片分辨率太高，转成base64会很长，这种场景效果有限。
使用Canvas：Canvas确实都能够解决，但实现起来有些复杂，维护性不好。
使用CSS：使用CSS是最合适不过的了，但存在难点在于上升弧和下降弧。

必要性

产品定位：优快云是一款ToC的产品，展示端异常场景的兼容有必要考虑，细节需要不断打磨。
业务定性：徽章属于“成就感”业务类别，此处的弹窗类似徽章的列表和详情，入口又放置在“个人资料”模块的初始化位和引导位，是个核心业务点，值得重视。
技术改进：投入研发成本讲究投入产出比，如果是优化价值不大又耗时的工作一般优先级不高，此处有一定优化价值，而且改动很小，有一定优化价值。
底线和价值：可以分享自己全部的已解锁徽章，业务倾向肯定也是鼓励创作者在此页面分享，这种情况的底线是至少做到布局正常。哪怕是为了一些用户潜在好感度和用户留存率，优化也是有价值的。

优化实现

若使用svg或者base64，业务上只需要换一下img标签的src属性即可，此处经过比对，采取CSS方式去实现更合适一些。这里我们只需要两步即可完成，第一步，调整DOM结构；第二步，实现上升弧和下降弧。

结构调整

宏观上我们需要着重修改头像那里，调整DOM结构，我们可以将头像当作一个div包含，留出5px的边距，再利用伪元素当作上升弧和下降弧的容器。

抽象成DOM树，其实我们只需要实现头像容器即可，HTML结构如图下方。

<div class="user-medal-head">
    <div class="user-medal-head-box">
        <img src="xxx.jpg"/>
    </div>
    <span class="user-medal-close"></span>
</div>

切凹弧

上升弧和下降弧是这里边的难点，如何实现红色部分的效果呢？如何切一个凹弧呢？用Canvas还能想想贝塞尔曲线，用DOM不太常见。

有个方案其实可行，就是再嵌套一个div，再里边结合伪元素切个圆？这个嵌套有点多了！有一个CSS方法叫做“径向渐变”，上述例子的左半部分实现如下。在容器以圆为渐变shape，圆心在容器左上点，以白色开始200px的距离再以红色200px的距离结束，开始和结束的渐变距离相同，意味着渐变虚化距离为0。【具体API文档】

background: radial-gradient(circle at left top, #fff 200px, #f00 200px);

C端产品也要考虑浏览器兼容性，毕竟广大受众用的浏览器五花八门。虽然径向渐变是属于CSS3，但兼容性良好，至少使用Vue框架的绝大多数浏览器都能够兼容，而且程序员群体逛论坛用低版本浏览器的确少有。

总结

总体下来，CSS的修改代码如下。保证了在弱网状态下大布局是完整的，也不用去加载图片当作背景，其实就是用CSS替代了图片。

.user-medal-head{
    height: 109px;
    background: url(https://g.csdnimg.cn/user-medal/2.0.0/images/bg-head.png) center center no-repeat;
    background-size: contain;
    position: relative;
    background: #fff; /* 覆盖background */
    height: 40px; /* 覆盖height */
    border-radius: 10px 10px 0 0;
}

.user-medal-head-box::before,
.user-medal-head-box::after{
    content: ' ';
    position: absolute;
    width: 42px;
    height: 44px;
}

.user-medal-head-box::before{
    left: -39px;
    top: 15px;
    background: radial-gradient(circle at left top, transparent 44px, #fff 44px);
}

.user-medal-head-box::after{
    left: 83px;
    top: 15px;
    background: radial-gradient(circle at right top, transparent 44px, #fff 44px);
}
}

经过优化调整，使用了少量代码就完美还原了效果，用CSS的实现方式替代引入图片的方式。省去了2.4KB图片资源的加载，根据添加代码的字节数计算效率提高了3600%；另外，这一优化项也减少了非必要资源的加载，减少了流量的消耗，对于C端产品虽然是一个小细节的提升，但面对大量用户的访问，日积月累，小流足以成江海，2.4KB虽然不大，却是调优路上的一大步。