问题描述
项目有一个 excel 导入号码的功能，实现起来有三个步骤
-
解析：前端使用 js-xlsx 解析 excel
-
检查：解析完成拿到号码数据后传给后端接口进行数据检查
-
导入：若检查没问题则将数据传给后端接口进行号码导入
导入数据量小时，没有什么问题，当导入数据量大时（10万条），在解析阶段会卡住但不会崩溃，到了导入阶段浏览器可能会崩溃，而且在导入期间由于等待过久，用户如果直接关闭重新进行导入，出现重复导入的情况
性能分析
为什么会出现这些现象呢？打开 chrome 性能分析面板，记录一遍操作，找到了根源（内网截图不了只能拍照😂）
解析阶段无响应但不崩溃
简单来说在 解析 阶段，浏览器执行解析脚本阻碍渲染进程，所以页面会无响应，但是可以看到此时内存 和 GPU 都比较平稳，所以浏览器不会崩溃
检查阶段很快完成
到了 检查 阶段，此时只是请求接口，不阻碍浏览器渲染，所以页面是可响应的，虽然 进程 内存 GPU 消耗大，但是很快就检查完成了，所以浏览器不会崩溃
导入阶段浏览器可能崩溃且用户可能进行重复导入操作
造成崩溃的根源在于 导入 阶段，此时也是请求接口，不阻碍浏览器渲染，所以页面是可响应的，所以这时用户可以关闭弹窗，如果关闭后再次导入会出现重复导入的问题，而且可以看到此时 进程 内存 GPU 消耗大，并且 耗时过长，所以浏览器可能会崩溃
解决
至此问题根源定位到了，主要在于后端处理导入时存在性能问题耗时过长，（后来发现是插入数据库的逻辑有问题），以及存在可以重复插入的问题，这两个就交给后端优化了。
至于前端方面，主要是 excel 解析时间长（毕竟测试数据有 10 万条)，在导入时加上了 loading 防止用户误操作，另外，解析阶段无响应的问题可以使用 web worker 开启另一条线程，解析完成后通知用户进行导入，这样就不会卡住动不了了
