Finalizer jank test

This page was created to help explore whether or not I'm properly using FinalizerRegistry correctly. Normally garbage collection (GC) is transparent to the user, so to make it observable for testing purposes this demo creates a bunch of instances. Usage procedure is as follows:

Basic use
  1. Open your browser's developer tools & select the console.
  2. Click "Dispatch event"
  3. Observe that the following messages are logged: 
    ------------------------------------------------------------
  globalHandleClickedDirect (container.length = 0)
  globalHandleClickedWeak
Create and destroy a single instance

This workflow creats a new listener instance and manually calls it's destory() method to synchronously removes it's listener. This emulates the workflow of intentionally disposing of an instance that was created by a JavaScript library our application uses.

  1. Click "Create" instantiate a new listener that uses the FinalizationRegistry. Note that the following message is logged: 
    Action.instanceNumber=0 created
  2. Click "Dispatch event"
  3. Observe that the following messages are logged: 
    ------------------------------------------------------------
  globalHandleClickedDirect (container.length = 2)
  globalHandleClickedWeak
  clicked (0)
  4. Click "Destroy" and note that the following messages are logged: 
    Calling `destroy()` on 1 instance(s)
Create and release a single instance

This workflow creats a new listener instance and, to keep it alive, stores a reference to it in a global array. When it is no longer needed, we "release" it to the garbage collector by dropping the global reference. This emulates situations where an application only holds a reference to a class instance supplied by a library in a function closure or other temporary context.

  1. Click "Create" instantiate a new listener that uses the FinalizationRegistry. Note that the following message is logged: 
    Action.instanceNumber=0 created
  2. Click "Dispatch event"
  3. Observe that the following messages are logged: 
    ------------------------------------------------------------
  globalHandleClickedDirect (container.length = 2)
  globalHandleClickedWeak
  clicked (0)
  4. Click "Release" and immediately click "Dispatch event". Clicking release will imediately log the following mesasge: 
    Releasing references to 1 instance(s)
    Clicking "Dispatch event" will (most likely) log the following messages: 
    ------------------------------------------------------------
  globalHandleClickedDirect (container.length = 2)
  globalHandleClickedWeak
  clicked (0)
  5. Wait 2-10 seconds for GC to occur. It may be observable as a brief pause or hitch in the animation of the jank bar.
  6. Click "Dispatch event" again. If GC happend you should now see the following mesasges: 
    ------------------------------------------------------------
script.js:128 globalHandleClickedDirect (container.length = 0)
script.js:133 globalHandleClickedWeak
    If you still see clicked (1), GC may not have happened. Technically we can't force the JS engine to collect garbage, so ¯\_(ツ)_/¯. Maybe try using the Create Many button insted?
Jank bar

Using this project