Memory Optimization

1. Common Memory Leakage Issues in Mini-Programs

Memory leakage issues can cause continuous memory consumption growth during the runtime of a mini-program, leading to crashes or forced termination.

1.1 Prolonged Retention of Page Instances in Mini-Programs

After unloading a page, the underlying framework clears the page instance from the page stack. Under normal circumstances, the JavaScript garbage collection mechanism will recycle the page and free up memory.

However, if the page instance held by developer code (e.g., this) is not released, it will prevent the page from being properly recycled, leading to memory leakage. Developers should pay attention to this and perform necessary cleanup in the unload phase.

Case One: Page Instance Retained by Unbound Event Listeners

If event listeners hold a reference to this of the page and are not unbound after page destruction, it will prevent the page from being released.

Page({
  keyboardChangeHandler({ height }) {
    this.setData({ height });
  },
  onLoad() {
    this._handler = this.keyboardChangeHandler.bind(this);
    dlt.onKeyboardHeightChange(this._handler);
  },
  // Fix: Unbind listeners in the unload phase
  // onUnload() {
  //   dlt.offKeyboardHeightChange(this._handler)
  // },
});

Case Two: Page Instance Retained by External or Global Variables

If a function closure holds this of the page and the function is attached to a global variable or a variable outside the page lifecycle, it will prevent the page from being released.

let languageListener = null;

Page({
  onLoad() {
    getApp().userInfoChangeListener = ({ userName }) => {
      this.setData({ userName });
    };
    languageListener = ({ lang }) => {
      this.setData({ lang });
    };
  },
  // Fix: Perform cleanup in the unload phase
  // onUnload() {
  //   getApp().userInfoChangeListener = null
  //   languageListener = null
  // },
});

Case Three: Page Instance Retained by Long-Term References in Asynchronous Callbacks

Accessing this of the page in long-term asynchronous callbacks, such as long-running setTimeout, setInterval, or time-consuming DLT API callbacks (e.g., lengthy dlt.request), will prevent the page from being released.

Page({
  onLoad() {
    this._timer = setInterval(() => {
      this.setData({
        timerValue: Date.now(),
      });
    }, 1000);
  },
  // Fix: Perform cleanup in the unload phase
  // onUnload() {
  //   clearInterval(this._timer)
  // },
});

1.2 Failure to Unbind Event Listeners in a Timely Manner

Event listeners should be unbound promptly after they are no longer needed.

1.3 Uncleaned Timers

When developing features like "countdown timers" for activities such as flash sales, developers may use setInterval to set timers. Before a page or component is destroyed, clearInterval should be called to cancel the timer.