上周三改需求改到半夜两点，困得不行的时候点了下项目里的展开菜单。结果整个页面卡得跟幻灯片似的，鼠标指针转了半天圈圈。气得我差点把咖啡泼键盘上。
跟这个破菜单杠上了
第二天专门打开性能面板测试，好家伙，展开个菜单居然要300毫秒！点开源码一看差点吐血——每次展开时都在重新创建子菜单DOM，组件里还塞了五个嵌套循环计算样式，跟俄罗斯套娃似的。
我的骚操作分三步走：- 第一步把动态创建DOM改成提前渲染，藏了个display:none的盒子在角落。展开菜单时直接让藏在暗处的盒子闪现，省了90%创建元素的时间
- 第二步把嵌套循环拆了，头天晚上实在困得不行写的狗屎代码，直接把五个循环合成一个，边撸串边改代码的时候还掉地上一根羊肉串
- 第三步加了个缓存机制，用户首次点开菜单后就把尺寸数据记在小本本上，下回再点直接抄作业
差点翻车现场
本来以为大功告成，结果测试妹妹在群里发疯：“菜单自己乱跳！”冲过去一看，她显示器分辨率2K我本地1080P。手忙脚乱修了三个钟头，原来忘了把缓存的宽高单位从px改成vw，活该被测试妹妹翻白眼。
- 最新性能面板数据降到30毫秒内
- 子组件渲染次数从56次砍到2次
- 老板路过我工位看到满屏折线图报表，破天荒拍了拍我肩膀
昨天临下班产品又提新需求，这回我直接把改造方案拍他脸上：“要加功能可以，先把性能预算批下来”。看着产品经理便秘的表情，默默点了个螺蛳粉庆祝，整个办公室都臭了。
