jtbandes/memory-test.html

## memory-test.html
<!DOCTYPE html>
<html>
  <head>
    <title>WebGL perf test</title>
  </head>

  <body>
    <button id="create-button">Create canvas</button>
    <button id="alloc-button" disabled>Allocate buffer</button>
    <button id="remove-button" disabled>Remove canvas</button>
    <button id="gc-button">Trigger GC</button>
    <br />
    <br />
    <div id="container"></div>
    <script>
      let createButton = document.getElementById("create-button");
      let allocButton = document.getElementById("alloc-button");
      let removeButton = document.getElementById("remove-button");
      let gcButton = document.getElementById("gc-button");

      let gcSentinel = Symbol("gc sentinel");
      let gcOccurred = false;
      const registry = new FinalizationRegistry((value) => {
        console.log("FinalizationRegistry callback called for ", value);
        if (value === gcSentinel) {
          gcOccurred = true;
        }
      });

      /** @type {HTMLCanvasElement} */
      let canvas;

      createButton.addEventListener("click", (event) => {
        createButton.setAttribute("disabled", "disabled");
        allocButton.removeAttribute("disabled");
        removeButton.removeAttribute("disabled");

        const container = document.getElementById("container");
        canvas = document.createElement("canvas");
        registry.register(canvas, "canvas");
        container.appendChild(canvas);
        const gl = canvas.getContext("webgl");
        gl.clearColor(0.5, 0.0, 0.5, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
      });

      allocButton.addEventListener("click", () => {
        const gl = canvas.getContext("webgl");
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, 1024 * 1024 * 1024, gl.STATIC_DRAW);
        registry.register(buffer, "buffer");
      });

      removeButton.addEventListener("click", () => {
        createButton.removeAttribute("disabled");
        allocButton.setAttribute("disabled", "disabled");
        removeButton.setAttribute("disabled", "disabled");

        canvas.remove();
        canvas = undefined;
      });

      gcButton.addEventListener("click", async () => {
        gcOccurred = false;
        registry.register({}, gcSentinel);
        while (!gcOccurred) {
          console.log("Trying to trigger garbage collection...");
          new Uint8Array(1024 * 1024 * 1024);
          await new Promise((resolve) => setTimeout(resolve, 10));
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebGL perf test</title>
	</head>

	<body>
	<button id="create-button">Create canvas</button>
	<button id="alloc-button" disabled>Allocate buffer</button>
	<button id="remove-button" disabled>Remove canvas</button>
	<button id="gc-button">Trigger GC</button>
	<br />
	<br />
	<div id="container"></div>
	<script>
	let createButton = document.getElementById("create-button");
	let allocButton = document.getElementById("alloc-button");
	let removeButton = document.getElementById("remove-button");
	let gcButton = document.getElementById("gc-button");

	let gcSentinel = Symbol("gc sentinel");
	let gcOccurred = false;
	const registry = new FinalizationRegistry((value) => {
	console.log("FinalizationRegistry callback called for ", value);
	if (value === gcSentinel) {
	gcOccurred = true;
	}
	});

	/** @type {HTMLCanvasElement} */
	let canvas;

	createButton.addEventListener("click", (event) => {
	createButton.setAttribute("disabled", "disabled");
	allocButton.removeAttribute("disabled");
	removeButton.removeAttribute("disabled");

	const container = document.getElementById("container");
	canvas = document.createElement("canvas");
	registry.register(canvas, "canvas");
	container.appendChild(canvas);
	const gl = canvas.getContext("webgl");
	gl.clearColor(0.5, 0.0, 0.5, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);
	});

	allocButton.addEventListener("click", () => {
	const gl = canvas.getContext("webgl");
	const buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, 1024 * 1024 * 1024, gl.STATIC_DRAW);
	registry.register(buffer, "buffer");
	});

	removeButton.addEventListener("click", () => {
	createButton.removeAttribute("disabled");
	allocButton.setAttribute("disabled", "disabled");
	removeButton.setAttribute("disabled", "disabled");

	canvas.remove();
	canvas = undefined;
	});

	gcButton.addEventListener("click", async () => {
	gcOccurred = false;
	registry.register({}, gcSentinel);
	while (!gcOccurred) {
	console.log("Trying to trigger garbage collection...");
	new Uint8Array(1024 * 1024 * 1024);
	await new Promise((resolve) => setTimeout(resolve, 10));
	}
	});
	</script>
	</body>
	</html>