javascripthtmlgiphy-api

Using Giphy API to load gifs on input gets browser fatigued


I'm writing a little app that allows you to search for gifs using GIPHY and displaying them as the user types their search input, but the more the user types the page becomes less responsive. I figured this was due to:

  1. unresolved fetch requests which trigger on text input
  2. the sheer amount of gifs that for some reason stay in the browser memory

Now I went around 1) by introducing AbortController but I have no clue if and how should i deal with 2) The error that I get before the browser starts to crash is:

GET {link to gif} net::ERR_HTTP2_PROTOCOL_ERROR_200 (OK)

My question would be: Why does the browser crash? Are saved gifs in the browser a reason for that, and if so how do I go about solving this?

Here is a link to the app and git.


Solution

  • Yes, the amount of unused gifs caused the crash. The way around it was to include:

    image.removeAttribute('src')

    for every image removed from the page.