返回

是什么撑起了你的前端页面？揭秘JS内存底层原理

前端

不可否认的是，JS内存是网站性能的一个重要指标，理解其底层原理是掌握JS性能的关键步骤。那么，我们就通过这篇文章来系统地剖析下浏览器中的内存相关知识，包括了堆和栈、变量存储、V8引擎、垃圾回收，还有优化代码等多个维度。

JS 内存有哪些组件？

浏览器的内存系统包括堆(Heap)和栈(Stack)两个关键组件。堆用于存储动态分配的对象，例如通过调用new创建的对象，而栈则用于存储局部变量和函数调用信息。

堆：

  • 堆是内存中的一块连续空间，用于动态分配内存。
  • 分配方式是“先进后出”，也就是说，后分配的对象会被放在堆的顶部。
  • JavaScript中，所有动态分配的对象都存储在堆中，包括数组、对象、函数等。
  • 堆由 JavaScript 引擎管理，自动进行内存分配和回收。

栈：

  • 栈是一块连续的内存空间，用于存储函数调用信息和局部变量。
  • 分配方式是“先进先出”，也就是说，后分配的变量会被放在栈的顶部。
  • 每个函数调用都会创建一个新的栈帧，其中包含了局部变量和函数参数。
  • 当函数调用结束时，相应的栈帧会被弹出。
  • 栈空间是有限的，因此如果函数调用的太深，可能会导致栈溢出。

JS的内存是如何存储变量的？

JS中变量的存储方式取决于变量的类型和作用域。

  • 全局变量存储在堆中。
  • 局部变量存储在栈中。
  • 变量的值存储在内存地址中，该地址由 JavaScript 引擎管理。
  • 当变量超出作用域时，其内存地址将被释放。

V8 引擎如何处理内存管理？

V8 引擎是 Google 开发的 JavaScript 引擎，被广泛用于 Chrome 和 Node.js 等浏览器和运行时环境。V8 引擎采用了多种策略来管理内存，包括：

  • 隐藏类(Hidden Class)：V8引擎使用隐藏类来存储对象的属性信息。当创建新对象时，V8引擎会根据对象的属性信息选择一个合适的隐藏类。这可以减少内存开销，因为多个对象可以共享相同的隐藏类。
  • 内联缓存(Inline Cache)：V8引擎使用内联缓存来提高对象的属性访问速度。当第一次访问对象的属性时，V8引擎会将该属性的访问代码内联到调用代码中。这可以减少函数调用的开销，从而提高性能。
  • 垃圾回收(Garbage Collection)：V8引擎使用垃圾回收机制来释放不再使用的内存。垃圾回收机制会定期扫描内存，找到并释放不再使用的对象。

如何优化 JS 内存使用？

优化 JS 内存使用的技巧有很多，包括：

  • 减少全局变量的使用。
  • 使用局部变量代替全局变量。
  • 避免在循环中创建新对象。
  • 使用对象池来复用对象。
  • 使用闭包来减少函数调用次数。
  • 使用 V8 引擎提供的优化工具，如 --optimize-for-size 和 --allow-natives-syntax。

最后

JS的内存作为网站性能的重要组成部分，需要引起前端开发人员的足够重视。通过了解JS内存底层原理，我们不仅能写出高效的代码，还能帮助我们解决一些常见的问题，如内存泄漏和栈溢出等。最后感谢您的阅读和理解。