Hướng dẫn how does javascript store objects in memory? - javascript lưu trữ các đối tượng trong bộ nhớ như thế nào?

Vòng đời nhớ

Bất kể ngôn ngữ lập trình, vòng đời bộ nhớ luôn luôn giống nhau:

1. Phân bổ bộ nhớ bạn cần
2. Sử dụng bộ nhớ được phân bổ (đọc, viết)
3. Phát hành bộ nhớ được phân bổ khi nó không cần thiết nữa

Phần thứ hai là rõ ràng trong tất cả các ngôn ngữ. Phần đầu tiên và phần cuối cùng là rõ ràng trong các ngôn ngữ cấp thấp nhưng chủ yếu là ẩn trong các ngôn ngữ cấp cao như JavaScript.

Phân bổ trong JavaScript

Khởi tạo giá trị

Để không làm phiền người lập trình với phân bổ, JavaScript sẽ tự động phân bổ bộ nhớ khi các giá trị ban đầu được khai báo.

const n = 123; // allocates memory for a number
const s = "azerty"; // allocates memory for a string

const o = {
  a: 1,
  b: null,
}; // allocates memory for an object and contained values

// (like object) allocates memory for the array and
// contained values
const a = [1, null, "abra"];

function f(a) {
  return a + 2;
} // allocates a function (which is a callable object)

// function expressions also allocate an object
someElement.addEventListener("click", () => {
  someElement.style.backgroundColor = "blue";
}, false);

Phân bổ qua các cuộc gọi chức năng

Một số cuộc gọi chức năng dẫn đến phân bổ đối tượng.

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

Một số phương pháp phân bổ các giá trị hoặc đối tượng mới:

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

Sử dụng các giá trị

Sử dụng các giá trị về cơ bản có nghĩa là đọc và viết trong bộ nhớ được phân bổ. Điều này có thể được thực hiện bằng cách đọc hoặc viết giá trị của một biến hoặc thuộc tính đối tượng hoặc thậm chí chuyển một đối số cho một hàm.

Phát hành khi bộ nhớ không cần thiết nữa

Phần lớn các vấn đề quản lý bộ nhớ xảy ra ở giai đoạn này. Khía cạnh khó khăn nhất của giai đoạn này là xác định khi bộ nhớ được phân bổ không còn cần thiết.

Các ngôn ngữ cấp thấp yêu cầu nhà phát triển xác định thủ công tại thời điểm nào trong chương trình Bộ nhớ được phân bổ không còn cần thiết và phát hành nó.

Một số ngôn ngữ cấp cao, chẳng hạn như JavaScript, sử dụng một hình thức quản lý bộ nhớ tự động được gọi là Bộ sưu tập rác (GC). Mục đích của bộ thu rác là giám sát phân bổ bộ nhớ và xác định khi nào một khối bộ nhớ được phân bổ không còn cần thiết và đòi lại nó. Quá trình tự động này là một xấp xỉ vì vấn đề chung về việc xác định liệu một phần bộ nhớ cụ thể có cần thiết hay không là không thể giải quyết được.

Thu gom rác thải

Như đã nêu ở trên, vấn đề chung về việc tự động tìm thấy một số bộ nhớ "không cần thiết nữa" là không thể giải quyết được. Kết quả là, người thu gom rác thực hiện một hạn chế của một giải pháp cho vấn đề chung. Phần này sẽ giải thích các khái niệm cần thiết để hiểu các thuật toán thu thập rác chính và các hạn chế tương ứng của chúng.

Người giới thiệu

Khái niệm chính mà các thuật toán thu gom rác dựa vào là khái niệm tham chiếu. Trong bối cảnh quản lý bộ nhớ, một đối tượng được cho là tham chiếu một đối tượng khác nếu cái trước có quyền truy cập vào cái sau (một cách ngầm hoặc rõ ràng). Chẳng hạn, một đối tượng JavaScript có một tham chiếu đến nguyên mẫu của nó (tham chiếu ngầm) và các giá trị thuộc tính của nó (tham chiếu rõ ràng).

Trong bối cảnh này, khái niệm "đối tượng" được mở rộng đến một cái gì đó rộng hơn so với các đối tượng JavaScript thông thường và cũng chứa phạm vi chức năng (hoặc phạm vi từ vựng toàn cầu).

Bộ sưu tập rác tham chiếu

Đây là thuật toán bộ sưu tập rác ngây thơ nhất. Thuật toán này làm giảm vấn đề từ việc xác định liệu một đối tượng có cần thiết để xác định xem một đối tượng vẫn có bất kỳ đối tượng nào khác tham chiếu nó. Một đối tượng được cho là "rác", hoặc sưu tập nếu không có tài liệu tham khảo nào chỉ vào nó.

Ví dụ:

let x = {
  a: {
    b: 2,
  },
};
// 2 objects are created. One is referenced by the other as one of its properties.
// The other is referenced by virtue of being assigned to the 'x' variable.
// Obviously, none can be garbage-collected.

let y = x;
// The 'y' variable is the second thing that has a reference to the object.

x = 1;
// Now, the object that was originally in 'x' has a unique reference
// embodied by the 'y' variable.

let z = y.a;
// Reference to 'a' property of the object.
// This object now has 2 references: one as a property,
// the other as the 'z' variable.

y = "mozilla";
// The object that was originally in 'x' has now zero
// references to it. It can be garbage-collected.
// However its 'a' property is still referenced by
// the 'z' variable, so it cannot be freed.

z = null;
// The 'a' property of the object originally in x
// has zero references to it. It can be garbage collected.

Có một giới hạn khi nói đến các tài liệu tham khảo tròn. Trong ví dụ sau, hai đối tượng được tạo với các thuộc tính tham chiếu lẫn nhau, do đó tạo ra một chu kỳ. Họ sẽ ra khỏi phạm vi sau khi cuộc gọi chức năng hoàn thành. Tại thời điểm đó, họ trở nên không cần thiết và bộ nhớ được phân bổ của họ nên được đòi lại. Tuy nhiên, thuật toán đếm tham chiếu sẽ không xem xét chúng có thể thu hồi được vì mỗi đối tượng có ít nhất một tham chiếu chỉ vào chúng, dẫn đến cả hai đều không được đánh dấu để thu gom rác. Tài liệu tham khảo tròn là một nguyên nhân phổ biến của rò rỉ bộ nhớ.

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

Internet Explorer 6 và 7 được biết là có bộ thu gom rác tham chiếu, đã gây ra rò rỉ bộ nhớ với các tài liệu tham khảo tròn. Không có động cơ hiện đại sử dụng việc sử dụng việc sử dụng việc thu gom rác nữa.

Thuật toán đánh dấu và quét

Thuật toán này làm giảm định nghĩa "một đối tượng không còn cần thiết" thành "một đối tượng là không thể truy cập".

Thuật toán này giả định kiến ​​thức về một tập hợp các đối tượng gọi là gốc. Trong JavaScript, gốc là đối tượng toàn cầu. Theo định kỳ, người thu gom rác sẽ bắt đầu từ các rễ này, tìm tất cả các đối tượng được tham chiếu từ các rễ này, sau đó tất cả các đối tượng được tham chiếu từ những thứ này, v.v. các đối tượng.

Thuật toán này là một cải tiến so với cái trước vì một đối tượng không có tài liệu tham khảo là không thể truy cập được. Điều ngược lại không đúng như chúng ta đã thấy với các tài liệu tham khảo tròn.

Hiện tại, tất cả các động cơ hiện đại vận chuyển một người thu gom rác đánh dấu và quét. Tất cả các cải tiến được thực hiện trong lĩnh vực thu gom rác JavaScript (Bộ sưu tập rác thế hệ/gia tăng/đồng thời/song song) trong vài năm qua là các cải tiến thực hiện của thuật toán này, nhưng không cải thiện thuật toán thu gom rác cũng như việc giảm bớt định nghĩa khi nào "Một đối tượng không còn cần thiết nữa".

Lợi ích ngay lập tức của phương pháp này là chu kỳ không còn là vấn đề. Trong ví dụ đầu tiên ở trên, sau khi trả về cuộc gọi hàm, hai đối tượng không còn được tham chiếu bởi bất kỳ tài nguyên nào có thể truy cập được từ đối tượng toàn cầu. Do đó, chúng sẽ được tìm thấy không thể truy cập được bởi người thu gom rác và có bộ nhớ được phân bổ của họ được khai hoang.

Tuy nhiên, việc không thể kiểm soát thủ công bộ sưu tập rác vẫn còn. Có những lúc nó sẽ thuận tiện để quyết định thủ công khi nào và bộ nhớ nào được phát hành. Để giải phóng bộ nhớ của một đối tượng, nó cần phải được thực hiện rõ ràng không thể truy cập được. Cũng không thể lập trình bộ sưu tập rác kích hoạt theo chương trình trong JavaScript-và có thể sẽ không bao giờ nằm ​​trong ngôn ngữ cốt lõi, mặc dù các động cơ có thể phơi bày các API đằng sau các cờ chọn tham gia.

Định cấu hình mô hình bộ nhớ động cơ

Các công cụ JavaScript thường cung cấp các cờ hiển thị mô hình bộ nhớ. Ví dụ: Node.js cung cấp các tùy chọn và công cụ bổ sung để hiển thị các cơ chế V8 cơ bản để định cấu hình và gỡ lỗi các vấn đề bộ nhớ. Cấu hình này có thể không có sẵn trong các trình duyệt và thậm chí ít hơn đối với các trang web (thông qua các tiêu đề HTTP, v.v.).

Lượng bộ nhớ heap có sẵn tối đa có thể được tăng lên bằng cờ:

node --max-old-space-size=6000 index.js

Chúng ta cũng có thể phơi bày bộ thu rác để gỡ lỗi các vấn đề về bộ nhớ bằng cờ và trình gỡ lỗi Chrome:

node --expose-gc --inspect index.js

Cấu trúc dữ liệu hỗ trợ quản lý bộ nhớ

Mặc dù JavaScript không trực tiếp phơi bày API thu gom rác, ngôn ngữ cung cấp một số cấu trúc dữ liệu gián tiếp quan sát việc thu gom rác và có thể được sử dụng để quản lý việc sử dụng bộ nhớ.

Yếu và yếu

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

const s = "azerty";
const s2 = s.substr(0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.

const a = ["ouais ouais", "nan nan"];
const a2 = ["generation", "nan nan"];
const a3 = a.concat(a2);
// new array with 4 elements being
// the concatenation of a and a2 elements.

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

• const d = new Date(); // allocates a Date object
  
  const e = document.createElement("div"); // allocates a DOM element
  

  3 và

  const d = new Date(); // allocates a Date object
  
  const e = document.createElement("div"); // allocates a DOM element
  

  4 chỉ có thể lưu trữ các đối tượng. Điều này là do chỉ các đối tượng được thu thập rác - các giá trị nguyên thủy luôn có thể được rèn (nghĩa là

  let x = {
    a: {
      b: 2,
    },
  };
  // 2 objects are created. One is referenced by the other as one of its properties.
  // The other is referenced by virtue of being assigned to the 'x' variable.
  // Obviously, none can be garbage-collected.
  
  let y = x;
  // The 'y' variable is the second thing that has a reference to the object.
  
  x = 1;
  // Now, the object that was originally in 'x' has a unique reference
  // embodied by the 'y' variable.
  
  let z = y.a;
  // Reference to 'a' property of the object.
  // This object now has 2 references: one as a property,
  // the other as the 'z' variable.
  
  y = "mozilla";
  // The object that was originally in 'x' has now zero
  // references to it. It can be garbage-collected.
  // However its 'a' property is still referenced by
  // the 'z' variable, so it cannot be freed.
  
  z = null;
  // The 'a' property of the object originally in x
  // has zero references to it. It can be garbage collected.
  

  1 nhưng

  let x = {
    a: {
      b: 2,
    },
  };
  // 2 objects are created. One is referenced by the other as one of its properties.
  // The other is referenced by virtue of being assigned to the 'x' variable.
  // Obviously, none can be garbage-collected.
  
  let y = x;
  // The 'y' variable is the second thing that has a reference to the object.
  
  x = 1;
  // Now, the object that was originally in 'x' has a unique reference
  // embodied by the 'y' variable.
  
  let z = y.a;
  // Reference to 'a' property of the object.
  // This object now has 2 references: one as a property,
  // the other as the 'z' variable.
  
  y = "mozilla";
  // The object that was originally in 'x' has now zero
  // references to it. It can be garbage-collected.
  // However its 'a' property is still referenced by
  // the 'z' variable, so it cannot be freed.
  
  z = null;
  // The 'a' property of the object originally in x
  // has zero references to it. It can be garbage collected.
  

  2), khiến chúng ở lại trong bộ sưu tập mãi mãi.

• const d = new Date(); // allocates a Date object
  
  const e = document.createElement("div"); // allocates a DOM element
  

  3 và

  const d = new Date(); // allocates a Date object
  
  const e = document.createElement("div"); // allocates a DOM element
  

  4 không thể hiểu được. Điều này ngăn bạn sử dụng

  let x = {
    a: {
      b: 2,
    },
  };
  // 2 objects are created. One is referenced by the other as one of its properties.
  // The other is referenced by virtue of being assigned to the 'x' variable.
  // Obviously, none can be garbage-collected.
  
  let y = x;
  // The 'y' variable is the second thing that has a reference to the object.
  
  x = 1;
  // Now, the object that was originally in 'x' has a unique reference
  // embodied by the 'y' variable.
  
  let z = y.a;
  // Reference to 'a' property of the object.
  // This object now has 2 references: one as a property,
  // the other as the 'z' variable.
  
  y = "mozilla";
  // The object that was originally in 'x' has now zero
  // references to it. It can be garbage-collected.
  // However its 'a' property is still referenced by
  // the 'z' variable, so it cannot be freed.
  
  z = null;
  // The 'a' property of the object originally in x
  // has zero references to it. It can be garbage collected.
  

  5 để quan sát sự sống động của các đối tượng hoặc nắm giữ một khóa tùy ý, nếu không đủ điều kiện để thu gom rác. (Bộ sưu tập rác nên vô hình nhất có thể.)

Trong các giải thích điển hình của

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const wm = new WeakMap();
const key = {};
wm.set(key, { key });
// Now `key` cannot be garbage collected,
// because the value holds a reference to the key,
// and the value is strongly held in the map!

Nếu

let x = {
  a: {
    b: 2,
  },
};
// 2 objects are created. One is referenced by the other as one of its properties.
// The other is referenced by virtue of being assigned to the 'x' variable.
// Obviously, none can be garbage-collected.

let y = x;
// The 'y' variable is the second thing that has a reference to the object.

x = 1;
// Now, the object that was originally in 'x' has a unique reference
// embodied by the 'y' variable.

let z = y.a;
// Reference to 'a' property of the object.
// This object now has 2 references: one as a property,
// the other as the 'z' variable.

y = "mozilla";
// The object that was originally in 'x' has now zero
// references to it. It can be garbage-collected.
// However its 'a' property is still referenced by
// the 'z' variable, so it cannot be freed.

z = null;
// The 'a' property of the object originally in x
// has zero references to it. It can be garbage collected.

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

Ephemerons là một sự tinh chỉnh của các cặp yếu trong đó cả khóa và giá trị đều không thể được phân loại là yếu hoặc mạnh. Kết nối của khóa xác định kết nối của giá trị, nhưng kết nối của giá trị không ảnh hưởng đến kết nối của khóa. .

Là một mô hình tinh thần thô, hãy nghĩ về một

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

CẢNH BÁO: Đây không phải là một polyfill cũng như bất cứ nơi nào gần với cách nó được triển khai trong động cơ (nối vào cơ chế thu gom rác). This is not a polyfill nor is anywhere close to how it's implemented in the engine (which hooks into the garbage collection mechanism).

class MyWeakMap {
  #marker = Symbol("MyWeakMapData");
  get(key) {
    return key[this.#marker];
  }
  set(key, value) {
    key[this.#marker] = value;
  }
  has(key) {
    return this.#marker in key;
  }
  delete(key) {
    delete key[this.#marker];
  }
}

Như bạn có thể thấy,

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

Để biết thêm thông tin về API của họ, hãy xem Hướng dẫn Bộ sưu tập khóa.

Yếu và hoàn thiện

Lưu ý:

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

Tất cả các biến có một đối tượng là giá trị là các tham chiếu đến đối tượng đó. Tuy nhiên, các tài liệu tham khảo như vậy rất mạnh - sự tồn tại của chúng sẽ ngăn người thu gom rác đánh dấu đối tượng là đủ điều kiện để thu thập.

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

Một trường hợp sử dụng cho

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

node --max-old-space-size=6000 index.js

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function cached(getter) {
  // A Map from string URLs to WeakRefs of results
  const cache = new Map();
  return async (key) => {
    if (cache.has(key)) {
      return cache.get(key).deref();
    }
    const value = await getter(key);
    cache.set(key, new WeakRef(value));
    return value;
  };
}

const getImage = cached((url) => fetch(url).then((res) => res.blob()));

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

const d = new Date(); // allocates a Date object

const e = document.createElement("div"); // allocates a DOM element

Do các mối quan tâm về hiệu suất và bảo mật, không có gì đảm bảo khi nào cuộc gọi lại sẽ được gọi, hoặc nếu nó sẽ được gọi tất cả. Nó chỉ nên được sử dụng để dọn dẹp-và làm sạch không quan trọng. Có nhiều cách khác để quản lý tài nguyên xác định hơn, chẳng hạn như

node --expose-gc --inspect index.js

node --expose-gc --inspect index.js

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

Để biết thêm thông tin về API của

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();

function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x

  return "azerty";
}

f();