Theo dõi tổng mức sử dụng bộ nhớ trên trang web của bạn bằng measureUserAgentspecificMemory()

Tìm hiểu cách đo lường mức sử dụng bộ nhớ của trang web trong phiên bản chính thức để phát hiện lỗi hồi quy.

Brendan Kenny

Ulan Degenbaev

Các trình duyệt tự động quản lý bộ nhớ của trang web. Mỗi khi một trang web tạo một đối tượng, trình duyệt sẽ phân bổ một phần bộ nhớ " nâng cao" để lưu trữ đối tượng đó. Vì bộ nhớ là một tài nguyên hữu hạn, nên trình duyệt sẽ thực hiện việc thu gom rác để phát hiện thời điểm một đối tượng không còn cần thiết và để giải phóng phân đoạn bộ nhớ cơ bản.

Tuy nhiên, việc phát hiện không hoàn hảo và đã chứng minh rằng phát hiện hoàn hảo là một nhiệm vụ bất khả thi. Do đó, các trình duyệt gần đúng khái niệm "cần có một đối tượng" với khái niệm "có thể truy cập một đối tượng". Nếu trang web không thể truy cập một đối tượng thông qua các biến và trường của những đối tượng có thể truy cập khác, thì trình duyệt có thể xác nhận lại đối tượng một cách an toàn. Sự khác biệt giữa hai khái niệm này dẫn đến việc rò rỉ bộ nhớ, như được minh hoạ trong ví dụ sau.

const object = {a: new Array(1000), b: new Array(2000)};
setInterval(() => console.log(object.a), 1000);

Ở đây, mảng b lớn hơn không còn cần thiết nữa, nhưng trình duyệt không xác nhận lại quyền sở hữu vì mảng đó vẫn có thể truy cập được qua object.b trong lệnh gọi lại. Do đó, bộ nhớ của mảng lớn hơn đã bị rò rỉ.

Rò rỉ bộ nhớ phổ biến trên web. Bạn có thể dễ dàng giới thiệu cách này bằng cách quên huỷ đăng ký trình nghe sự kiện, vô tình chụp các đối tượng từ iframe, bằng cách không đóng một worker, tích luỹ đối tượng trong mảng, v.v. Nếu một trang web bị rò rỉ bộ nhớ, thì mức sử dụng bộ nhớ của trang đó sẽ tăng theo thời gian và trang web sẽ hiển thị chậm và đầy đủ đối với người dùng.

Bước đầu tiên để giải quyết vấn đề này là đo lường độ chính xác. API performance.measureUserAgentSpecificMemory() mới cho phép các nhà phát triển đo lường mức sử dụng bộ nhớ của các trang web trong phiên bản chính thức, từ đó phát hiện những sự cố rò rỉ bộ nhớ xảy ra trong quá trình kiểm thử cục bộ.

performance.measureUserAgentSpecificMemory() khác với API performance.memory cũ như thế nào?

Nếu đã quen thuộc với API performance.memory không chuẩn hiện có, bạn có thể thắc mắc API mới khác với API mới này như thế nào. Điểm khác biệt chính là API cũ trả về kích thước của vùng nhớ khối xếp JavaScript, trong khi API mới ước tính bộ nhớ mà trang web sử dụng. Sự khác biệt này trở nên quan trọng khi Chrome chia sẻ cùng một vùng nhớ khối xếp với nhiều trang web (hoặc nhiều phiên bản của cùng một trang web). Trong những trường hợp như vậy, kết quả của API cũ có thể tuỳ ý tắt. Vì API cũ được định nghĩa trong các thuật ngữ dành riêng cho việc triển khai, chẳng hạn như "vùng nhớ khối xếp", nên việc chuẩn hoá API này là vô vọng.

Một điểm khác biệt nữa là API mới thực hiện việc đo lường bộ nhớ trong quá trình thu gom rác. Điều này giúp giảm độ nhiễu trong kết quả, nhưng có thể mất một chút thời gian cho đến khi có kết quả. Xin lưu ý rằng các trình duyệt khác có thể quyết định triển khai API mới mà không dựa vào tính năng thu thập rác.

Các trường hợp sử dụng được đề xuất

Mức sử dụng bộ nhớ của một trang web phụ thuộc vào thời gian diễn ra sự kiện, thao tác của người dùng và hoạt động thu gom rác. Đó là lý do API đo lường bộ nhớ được dùng để tổng hợp dữ liệu sử dụng bộ nhớ từ phiên bản chính thức. Kết quả của từng lệnh gọi riêng lẻ sẽ kém hữu ích hơn. Ví dụ về trường hợp sử dụng:

• Phát hiện hồi quy trong quá trình phát hành phiên bản mới của trang web để phát hiện các sự cố rò rỉ bộ nhớ mới.
• Tiến hành thử nghiệm A/B cho một tính năng mới để đánh giá tác động của tính năng đó đối với bộ nhớ và phát hiện tình trạng rò rỉ bộ nhớ.
• So sánh mức sử dụng bộ nhớ với thời lượng phiên để xác minh sự hiện diện hay không có rò rỉ bộ nhớ.
• So sánh mức sử dụng bộ nhớ với các chỉ số người dùng để nắm được tác động tổng thể của việc sử dụng bộ nhớ.

Khả năng tương thích với trình duyệt

Hiện tại, API này chỉ được hỗ trợ trong các trình duyệt dựa trên Chromium, kể từ Chrome 89. Kết quả của API phụ thuộc nhiều vào việc triển khai vì các trình duyệt có nhiều cách để biểu thị đối tượng trong bộ nhớ và có nhiều cách để ước tính mức sử dụng bộ nhớ. Trình duyệt có thể loại trừ một số vùng bộ nhớ khỏi quá trình kế toán nếu việc tính toán chính xác quá tốn kém hoặc không khả thi. Do đó, bạn không thể so sánh kết quả trên nhiều trình duyệt. Việc so sánh kết quả cho cùng một trình duyệt chỉ có ý nghĩa.

Sử dụng performance.measureUserAgentSpecificMemory()

Phát hiện tính năng

Hàm performance.measureUserAgentSpecificMemory sẽ không hoạt động hoặc có thể gặp lỗi SecurityError nếu môi trường thực thi không đáp ứng các yêu cầu về bảo mật để ngăn chặn việc rò rỉ thông tin trên nhiều nguồn gốc. Tính năng này hoạt động dựa trên tính năng tách biệt nhiều nguồn gốc mà trang web có thể kích hoạt bằng cách đặt tiêu đề COOP+COEP.

Có thể phát hiện hoạt động hỗ trợ trong thời gian chạy:

if (!window.crossOriginIsolated) {
  console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
} else if (!performance.measureUserAgentSpecificMemory) {
  console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
} else {
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === 'SecurityError') {
      console.log('The context is not secure.');
    } else {
      throw error;
    }
  }
  console.log(result);
}

Kiểm thử cục bộ

Chrome thực hiện việc đo lường bộ nhớ trong quá trình thu thập rác, nghĩa là API không phân giải kết quả hứa hẹn ngay lập tức mà thay vào đó sẽ chờ lần thu gom rác tiếp theo.

Việc gọi API sẽ buộc thu thập rác sau một khoảng thời gian chờ, hiện được đặt thành 20 giây, mặc dù có thể xảy ra sớm hơn. Khởi động Chrome bằng cờ hiệu dòng lệnh --enable-blink-features='ForceEagerMeasureMemory' sẽ giảm thời gian chờ xuống còn 0 và hữu ích cho việc gỡ lỗi và kiểm thử cục bộ.

Ví dụ:

Bạn nên sử dụng API này để xác định một màn hình bộ nhớ chung lấy mẫu mức sử dụng bộ nhớ của toàn bộ trang web rồi gửi kết quả đến máy chủ để tổng hợp và phân tích. Cách đơn giản nhất là lấy mẫu định kỳ, ví dụ: mỗi M phút. Tuy nhiên, điều này sẽ gây ra sai lệch cho dữ liệu vì có thể xảy ra đỉnh bộ nhớ giữa các mẫu.

Ví dụ sau cho thấy cách thực hiện phép đo bộ nhớ không sai lệch bằng quy trình Poisson, đảm bảo rằng các mẫu có khả năng xảy ra như nhau vào bất kỳ thời điểm nào (bản minh hoạ, nguồn).

Trước tiên, hãy xác định một hàm có thể lên lịch đo lường bộ nhớ tiếp theo bằng cách sử dụng setTimeout() với một khoảng thời gian ngẫu nhiên.

function scheduleMeasurement() {
  // Check measurement API is available.
  if (!window.crossOriginIsolated) {
    console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
    console.log('See https://web.dev/coop-coep/ to learn more')
    return;
  }
  if (!performance.measureUserAgentSpecificMemory) {
    console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
    return;
  }
  const interval = measurementInterval();
  console.log(`Running next memory measurement in ${Math.round(interval / 1000)} seconds`);
  setTimeout(performMeasurement, interval);
}

Hàm measurementInterval() tính toán một khoảng thời gian ngẫu nhiên tính bằng mili giây sao cho trung bình cứ 5 phút sẽ có một lần đo. Xem phần Phân phối mũ nếu bạn quan tâm đến toán học của hàm này.

function measurementInterval() {
  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}

Cuối cùng, hàm performMeasurement() không đồng bộ sẽ gọi API, ghi lại kết quả và lên lịch đo lường tiếp theo.

async function performMeasurement() {
  // 1. Invoke performance.measureUserAgentSpecificMemory().
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === 'SecurityError') {
      console.log('The context is not secure.');
      return;
    }
    // Rethrow other errors.
    throw error;
  }
  // 2. Record the result.
  console.log('Memory usage:', result);
  // 3. Schedule the next measurement.
  scheduleMeasurement();
}

Cuối cùng, hãy bắt đầu đo lường.

// Start measurements.
scheduleMeasurement();

Kết quả có thể như sau:

// Console output:
{
  bytes: 60_100_000,
  breakdown: [
    {
      bytes: 40_000_000,
      attribution: [{
        url: 'https://example.com/',
        scope: 'Window',
      }],
      types: ['JavaScript']
    },

    {
      bytes: 20_000_000,
      attribution: [{
          url: 'https://example.com/iframe',
          container: {
            id: 'iframe-id-attribute',
            src: '/iframe',
          },
          scope: 'Window',
      }],
      types: ['JavaScript']
    },

    {
      bytes: 100_000,
      attribution: [],
      types: ['DOM']
    },
  ],
}

Tổng mức sử dụng bộ nhớ ước tính được trả về trong trường bytes. Giá trị này phụ thuộc rất lớn vào hoạt động triển khai và không thể so sánh được trên các trình duyệt. Tính năng này thậm chí có thể thay đổi giữa các phiên bản khác nhau của cùng một trình duyệt. Giá trị này bao gồm JavaScript và bộ nhớ DOM của tất cả các iframe, cửa sổ liên quan và trình chạy web trong quy trình hiện tại.

Danh sách breakdown cung cấp thêm thông tin về bộ nhớ đã sử dụng. Mỗi mục nhập mô tả một số phần của bộ nhớ và phân bổ mục đó cho một tập hợp các cửa sổ, iframe và trình thực thi được xác định theo URL. Trường types liệt kê các loại bộ nhớ dành riêng cho quá trình triển khai được liên kết với bộ nhớ đó.

Bạn phải xử lý tất cả các danh sách theo cách chung và không mã hoá cứng các giả định dựa trên một trình duyệt cụ thể. Ví dụ: một số trình duyệt có thể trả về một breakdown trống hoặc một attribution trống. Các trình duyệt khác có thể trả về nhiều mục nhập trong attribution cho biết rằng chúng không thể phân biệt mục nhập nào trong số này sở hữu bộ nhớ.

Ý kiến phản hồi

Nhóm cộng đồng hiệu suất web và nhóm Chrome rất muốn biết suy nghĩ và trải nghiệm của bạn với performance.measureUserAgentSpecificMemory().

Cho chúng tôi biết về thiết kế API

Có điều gì về API không hoạt động như mong đợi không? Hay có thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Gửi một vấn đề về thông số kỹ thuật trong kho lưu trữ GitHub về performance.measureUserAgentSpecificMemory() hoặc bổ sung ý kiến về một vấn đề hiện có.

Báo cáo sự cố về triển khai

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, cung cấp các hướng dẫn đơn giản để tái tạo lỗi và đặt Thành phần thành Blink>PerformanceAPIs. Glitch rất hữu ích khi chia sẻ các bản dựng lại nhanh chóng và dễ dàng.

Thể hiện sự ủng hộ

Bạn có định dùng performance.measureUserAgentSpecificMemory() không? Sự hỗ trợ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó. Gửi một bài đăng đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và bằng cách nào.

Các đường liên kết hữu ích

• Người giải thích
• Bản minh hoạ | Nguồn minh hoạ
• Theo dõi lỗi
• Mục ChromeStatus.com
• Các thay đổi kể từ Origin dùng thử API
• Kết thúc bản dùng thử theo nguyên gốc

Xác nhận

Xin chân thành cảm ơn Domenic Denicola, Yoav Weiss, Mathias Bynens đã đánh giá API thiết kế và Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz đã đánh giá mã trong Chrome. Tôi cũng cảm ơn Per Parker, Philipp Weis, Olga Belomestnykh, MatthewBolohan và [3]Bolohan, và [Tên người] vì đã đưa ra ý kiến phản hồi có giá trị cho người dùng để giúp cải thiện đáng kể API.

Hình ảnh chính của Harrison Broadbent trên Unsplash