导读：随着前端的范畴逐渐扩大，深度逐渐下沉，富前端必然带来的一个问题就是性能。特别是在大型复杂项目中，重前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至崩溃。本文基于Quick BI（数据可视化分析平台）历年架构变迁中性能的排查、解决和总结出的“个性”问题，尝试总结整个前端层面相对“共性”的问题，提供一些前端性能解决思路。

一 引发性能问题原因？

引发性能问题的原因通常不是单方面缘由，特别是大型系统迭代多年后，长期积劳成疾造成，所以我们要必要分析找到症结所在，并按瓶颈优先级逐个击破，拿我们项目为例，大概分几个方面：

1 资源包过大

通过Chrome DevTools的Network标签，我们可以拿到页面实际拉取的资源大小（如下图）：

经过前端高速发展，近几年项目更新迭代，前端构建产物也在急剧增大，因为要业务先行，很多同学引入库和编码过程并没有考虑性能问题，导致构建的包增至几十MB，这样带来两个显著的问题：