前两天遇到一个问题:我厂的一个产品在 Firefox 下,可能发生因为 CPU 占用过高而卡死的情况。这个问题在测试环境不复现,在 Chrome下基本上也不会复现。
因为我厂老板是这个产品的主要用户,这个 bug 让我倍感压力,但一直没有解决它的好办法。终于有一天,在某台生产机上调试另外一个 bug 的时候,我终于发现了稳定复现这个 bug 的方式。
接下来就是几个小时的 debug,然后发现问题所在,然后解决问题,然后发现解决方案不理想,于是寻求新的解决方案,然后找到新的 API,最终彻底的解决这个问题。
接下来我就分享这个过程,读完整篇文章当中你将学会:
- 使用开发者工具查找性能问题
- 不断切分,缩小问题范围
- 理解 Vue 响应式原理分析问题根源
- 修复问题并验证
- 新的解决方案 Intersection Observer
- 解决问题并上线
目标读者:
- 中级开发者
- 熟悉原生 JS
大家觉得这个 idea 如何?请留言告诉我。不出意外的话这将是我下个月的 gitchat 内容。
有同学在 Drift 里留言,这里更新回答一下:这篇文章最后没写,因为当时 GitChat 的编辑不感兴趣,所以就放弃了。将来有机会会写。
欢迎吐槽,共同进步