转载自：https://xie.infoq.cn/article/aa6b0d97f38a1f8b98a61b024

不知道在座的各位有没有被问到过这样一个问题：如果页面卡顿，你觉得可能是什么原因造成的？有什么办法锁定原因并解决吗？

这是一个非常宽泛而又有深度的问题，他涉及到很多的页面性能优化问题，我依稀还记得当初面试被问到这个问题时我是这么回答的：

1. 先会检查是否是网络请求太多，导致数据返回较慢，可以适当做一些缓存
2. 也有可能是某块资源的 bundle 太大，可以考虑拆分一下
3. 然后排查一下 js 代码，是不是某处有过多循环导致占用主线程时间过长
4. 浏览器某帧渲染的东西太多，导致的卡顿
5. 在页面渲染过程中，可能有很多重复的重排重绘
6. emmmmmm....不知道了

后来了解到了，感官上的长时间运行页面卡顿也有可能是因为内存泄漏引起的

🌟 内存泄漏的定义

那什么是内存泄漏呢？借助别的大佬给出的定义，内存泄漏就是指由于疏忽或者程序的某些错误造成未能释放已经不再使用的内存的情况。简单来讲就是假设某个变量占用 100M 的内存，而你又用不到这个变量，但是这个变量没有被手动的回收或自动回收，即仍然占用 100M 的内存空间，这就是一种内存的浪费，即内存泄漏

🌼 JS 的数据存储

JavaScript的内存空间分为栈内存和堆内存，前者用来存放一些简单变量，后者用来存放复杂对象

• 简单变量指的是 JS 的基本数据类型，例如：String、Number、Boolean、null、undefined、Symbol、BigInt
• 复杂对象指的是 JS 的引用数据类型，例如：Object、Array、Function...