TODO

1. 项目中有什么亮点？

2. 个人有什么优势？

3. 在项目中具体做过什么性能优化？

4. 在以往项目中遇到过什么难题，如何解决的？

先定位 → 分析原因 → 验证方案 → 优化总结

我印象比较深的一次难题是在一个 Vue + ECharts 的项目里。
当时我们需要在页面中动态渲染多个图表组件，但每次切换数据源时页面都会明显卡顿。

我就用 Chrome Performance 面板 做了性能分析。在 Memory 面板 也看到 ECharts 实例的数量在不断增加，说明旧实例没有被复用或者删除，导致dom节点数量一直在上升。我进一步看了代码逻辑，发现每次切换 tab 时我们都重新执行了 echarts.init()，导致之前的实例没被销毁，又重新生成新的 canvas 元素，所以才导致的卡顿。

后来我通过 组件缓存（keep-alive） 和 实例复用，把图表初始化逻辑只放在 mounted 阶段，缓存图表的实例，切换数据时只调用 setOption 更新。

优化之后，切换数据源时明显流畅了。