How to not save data retrieved with the fetch method? Javascript

Question

I am trying to fetch data from my server as often as possible.
To do so, I use the fetch method inside an AnimationFrame.
However, this work pretty well the first 30 secondes, and then it began to lag. When I looked at the Inspector, I can see that at every fetch I perform, the data the browser received is saved in a Fetches folder... resulting in thousands of files. How can I delete the data stored in the Fetches folder?
Here the main code:

function fetch_from_server() {
    if (has_new_value) {

        let infos = new FormData();
        infos.append('x', player.x);
        infos.append('y', player.y);
        infos.append('csrfmiddlewaretoken', csrf.getAttribute('value'));

        return fetch(url_info, {
            method: 'POST',
            body: infos,
            credentials: 'same-origin',
        })
        .then(response => response.json())
        .then(json => {
            update_p(json);
        })
        .then(_ => {
            has_new_value = false;
            is_fetching = false;})
        .catch(error => console.log('Error:', error));      
    }
    else {
        return fetch(url_info)
        .then(response => response.json())
        .then(json => {
            update_p(json);
        })
        .then(is_fetching = false)
        .catch(error => console.log('Error:', error));
    };
};

// Update Loop
function update(timestamp) {
    if (!is_fetching) {
        delay = (timestamp - last_update_time); // milliseconds
        is_fetching = true
        my_fetch = fetch_from_server();
    }

    rAF = window.requestAnimationFrame(update);
};

I requested the first AnimationFrame with a click Event Listener. This is just a simple project to exchange data between browser in a mini-game. I just wanted to play with javascript but I am stuck here and I found the answer to my problem nowhere.

Thank you all!

AdrKacz

PS: Even if I often use StackOverflow, this is my first post, I apologise if I did not respect some standard.

Answer 1

You should never optimize for the specific browser implementation because they can change at any time and vary on different platforms; instead, look for inefficiencies in your own code.

I think the real issue is that you're trying to solve this problem in an suboptimal way. If you can, try to limit fetching to as slow as you can for this game (maybe once or twice a second at max). Also, try removing as many caching mechanisms and headers as you can to improve performance. If you're already doing all that and it's still slow, unfortunately you might need to rethink your design.

What you want is a constant, efficient stream of data between client and server. HTTP requests have headers, security checks, and other inefficiencies embedded within each one, which can lead to massive slowdown and bad UX upon even a single failed request.

That's why you should use a more efficient standard for small chunks of constant data like WebSocket. Not only can you make efficient requests from your client, the server can also send data directly to the client! For example, if you have a turn-based game, if one player makes a move, that player's browser can send a request to the server notifying it of the turn occurring, then the server can send data directly to all other players notifying other clients about that move.

Unfortunately, using WebSocket will require a total redesign of your application, which is why I suggest trying everything in your power to make your current fetching solution work. However, if you do want to use them, you can either implement it directly using the browser WebSocket API and some server-side library (for Node.js, something like ws) or use a novice-friendly server-client solution such as socket.io (while less performant, it will probably be much easier to use).