前端会造成内存泄漏的操作有哪些？页面卡住的原因

如果你发现前端页面卡住了，打开开发者工具也很卡，刷新页面也无效、或者关闭 tab页也很费劲，多半是有内存泄漏。

内存泄漏其实就是浏览器的内存被占用很多，导致页面奔溃。

以下是一些常见的引起内存泄漏的操作：

1. 未正确解绑事件处理程序：

   • 如果在DOM元素上添加了事件监听器，但是在元素被移除之前没有被正确移除，就可能导致内存泄漏。确保使用 removeEventListener 来移除事件监听器。

2. 定时器未清理：

   • 使用 setInterval 或 setTimeout 创建定时器时，如果没有使用 clearInterval 或 clearTimeout 取消定时器，可能会导致内存泄漏。

3. 闭包：

   • 在 JavaScript 中，闭包可能导致内存泄漏。当函数内部引用了外部函数的变量，并且该函数在外部函数执行后仍然存在，就会导致引用的变量无法被垃圾回收。

4. 未释放资源：

   • 例如，使用 XMLHttpRequest 发送请求时，如果没有正确处理和释放资源，可能会导致内存泄漏。确保在请求完成后正确关闭或释放资源。

5. DOM 元素引用：

   • 在 JavaScript 中引用了 DOM 元素，但在页面生命周期结束前没有释放这些引用。在单页应用（SPA）中，注意在组件销毁时释放对 DOM 元素的引用。

6. 循环引用：

   • 如果两个或多个对象相互引用，而且没有被垃圾回收机制检测到，就可能导致内存泄漏。这是一种常见的情况，尤其是在使用缓存或数据结构时。

7. 大量数据未清理：

   • 在处理大量数据时，确保及时清理不再需要的数据，以防止长时间占用内存。

8. 使用缓存不当：

   • 如果不适当地使用缓存，可能导致缓存的数据一直存在于内存中，即使不再需要。需要定期清理缓存或使用一些策略来确保合理使用缓存。

9. do / while 死循环