Antin Harasymiv
Aug 26, 2019 · 1 min read

Just removing from the DOM. childNode.remove()

The browser has its own additional image cache that it manages itself (and stores large amounts on the local disk of the user). When you create a new image element for an image that exists in the browser cache, it is clever enough to use it rather than send a new network request. It will still trigger the load events on the images (regardless of whether it filled from cache or network) which means you can write your code the same and trust the browser will do its thing.

At one point we tried to be extra clever and had our own cache, where we removed the images from the DOM but kept references to them in memory so we could shuttle them back in later, but it turned out to have no appreciable impact on performance (actually some downsides in garbage collection and memory usage) so we dropped it.

So this code is as simple as created a new Image element (actually we may be using DIVs with background-image and the background-size: cover) for things that should be visible, and then just the native remove (and obviously also drop any references to them in memory, eg in arrays) once done.

    Antin Harasymiv

    Written by

    UX Engineer @Google

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade