actualmente tenemos una aplicación web basada en NodeJS donde se recopilan datos y sus gráficos se presentan como imágenes usando plotlyJS. A continuación se muestra uno de esos fragmentos de código que crea un gráfico de los datos como una imagen y usa la URL generada para actualizar el elemento respectivo (ocurre una vez por segundo).
var d3 = Plotly.d3; var img_jpg = d3.select("#" + images[id_img]); var old_url = img_jpg.src; Plotly.newPlot(plotly_id, plot_data, layout).then(function (gd) { Plotly.toImage(gd, { height: 1280, width: 2000 }) .then(function (url) { img_jpg.attr("src", url); }); });Esta parte del código funciona como se esperaba, pero deja un rastro de URL. direcciones URL de blob y datos para ser precisos, como se muestra en la siguiente captura de pantalla.
salida de la herramienta de depuración que muestra las direcciones URL de datos y blobs generadas
Con el tiempo, estas URL inundan la memoria del navegador y provocan un bloqueo después de un tiempo. URL apiladas después de ejecutar la aplicación durante unos segundos
Recargar la página ayuda, pero no es amigable. Probé https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL pero no parece ayudar. ¿Puede sugerir qué se puede hacer para borrar estas URL de la instancia actual? Espero sugerencias, gracias!
Al llamar a revokeObjectURL, también debe borrar todas las referencias a blobUrl para que se libere.
Si una fuente de imagen es una blobUrl:
image.src = blobUrl;Limpiarlo así funciona para mí:
URL.revokeObjectURL(blobUrl); image.src = ""; blobUrl = undefined;