Cree una instantánea de montón V8 en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows , macOS y Linux . Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

NodeJS es un tiempo de ejecución de JavaScript que utiliza el motor V8 de Chrome. NodeJS tiene muchas ventajas que lo hacen bastante popular como la primera opción para soluciones de back-end, incluidas las API RESTful. Sin embargo, NodeJS tiene algunos inconvenientes asociados. Una de las principales desventajas de NodeJS son los cuellos de botella en el rendimiento debido a las pesadas tareas de cálculo. Esto se debe a que NodeJS es de un solo subproceso. Esto da como resultado un procesamiento lento, por lo que NodeJS no se recomienda para cálculos pesados. En una aplicación Electron, debemos asegurarnos de que NodeJS no tenga una pérdida de memoria que ralentice aún más el rendimiento. Por lo tanto, Electron nos proporciona una forma en la que podemos tomar instantáneas de montón V8 utilizando los métodos de instancia del objeto BrowserWindow y elpropiedad de contenido web . Luego podemos usar este montón para encontrar fugas de memoria en nuestra aplicación Electron usando Chrome DevTools . Este tutorial demostrará cómo tomar instantáneas de V8 Heap y cargarlas en Chrome DevTools para una inspección adicional en una aplicación Electron. 

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto: 
   

Ejemplo: siga los pasos dados en Arrastrar y soltar archivos en ElectronJS para configurar la aplicación básica de Electron. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 

paquete.json: 

{
  "name": "electron-snapshot",
  "version": "1.0.0",
  "description": "Snapshot of Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Cree la carpeta de activos según la estructura del proyecto. Usaremos la carpeta de activos como la ruta predeterminada para almacenar el archivo de instantánea de montón V8 generado por la aplicación. La extensión de archivo para un archivo Heap Snapshot V8 es .heapsnapshot . 
Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado. 

Heap Snapshots en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron .
 

• index.html : agregue el siguiente fragmento en ese archivo. El botón Create V8 Heap Snapshot aún no tiene ninguna funcionalidad asociada.

<h3>
  Create a Snapshot in Electron
</h3>
<button id="snap">
  Create V8 Heap Snapshot
</button>

• index.js : agregue el siguiente fragmento en ese archivo.

const electron = require('electron')
const path = require('path')
  
// Importing BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
  
let win = BrowserWindow.getFocusedWindow();
  
// let win = BrowserWindow.getAllWindows()[0];
const filepath = path.join(__dirname, '../assets/snap.heapsnapshot')
  
var snap = document.getElementById('snap');
snap.addEventListener('click', (event) => {
    win.webContents.takeHeapSnapshot(filepath)
        .then(console.log('V8 HeapSnapshot taken Successfully'))
        .catch(err => {
            console.log(err);
        });
});

 
El método de instancia win.webContents.takeHeapSnapshot(ruta del archivo) simplemente toma una instantánea del montón V8 de la memoria de la aplicación y la guarda en la ruta del archivo dada. Este método de instancia devuelve una Promesa y se resuelve cuando el archivo de instantánea se ha creado correctamente en la ruta de archivo dada. Toma los siguientes parámetros.

• ruta de archivo: string Este parámetro no puede estar vacío. Especifica la ruta del archivo donde nos gustaría guardar el archivo Heap Snapshot generado. En nuestro código, hemos guardado el archivo Heap Snapshot generado en la carpeta de activos junto con el nombre del archivo usando el módulo de ruta .

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow . 

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede consultar directamente desde el arreglo, como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código.

Salida: Al iniciar la aplicación, deberíamos ver el siguiente resultado.
 

snap.heapsnapshot : 

El archivo snap.heapsnapshot es solo un conjunto aleatorio de números. Para que este archivo tenga algún sentido, debemos cargarlo en Chrome DevTools para que podamos evaluarlo en busca de fugas de memoria. Siga los pasos dados para cargar este archivo en Chrome Devtools. 

• Paso 1: dentro de la aplicación Electron, inicie Chrome DevTools en caso de que se hayan desactivado al iniciar la aplicación. Podemos iniciar usando el atajo de teclado, Ctrl+Shift+I . En nuestro código, los hemos habilitado de forma predeterminada al iniciar la aplicación mediante el método de instancia win.webContents.openDevTools() de la propiedad webContents especificada en el archivo main.js.
• Paso 2: Dentro de DevTools, vaya a la pestaña Memoria y dentro de Seleccionar tipo de perfilado , elija la opción Instantánea del montón . Después de eso, haga clic en el botón Cargar . Esto debería abrir un cuadro de diálogo Sistema de archivos nativo.

• Paso 3: Navega hasta donde hemos almacenado el archivo .heapsnapshot y haz clic en Abrir . Esto cargará el archivo y ahora podemos verlo dentro de Chrome DevTools . Haga clic en el archivo para ver las estadísticas de la aplicación.

Salida: Nota: También podemos usar el método process.takeHeapSnapshot(filePath) del objeto de proceso para crear un archivo V8 Heap Snapshot de la aplicación Electron. El objeto de proceso en Electron es una extensión del objeto de proceso de NodeJS que proporciona una variedad adicional de métodos y propiedades de Instancia que se pueden usar en la aplicación de Electron.