Each time the page is reloaded, the animation's frames per second (fps

In my project, I have two main pages: 'index' and 'about'. The 'about' page includes a cool animation that you can check out here.

The issue I'm facing is that when I navigate from the 'index' page to the 'about' page locally, the frames per second (fps) of the animation seem to fluctuate:

Initial visit to About page:

52.9 fps

https://i.sstatic.net/skE7l.png

When going back to Index:

41.0 fps

https://i.sstatic.net/f7gPM.png

Returning to About:

29.5 fps

https://i.sstatic.net/6Ji6l.png

I am unsure about what could be causing this issue. Just for context, the project is built using Vue.

javascriptanimationvue.jsfrontendweb-frontend

Answer №1

An error message appeared in the console: 

Too many active WebGL contexts

I believe it might not be best practice to create a new renderer and redo all the work for each mount?

I experimented with keeping the component alive, and that seemed to resolve the issue. 

<keep-alive>
    <router-view/>
</keep-alive>

Alternatively, you could consider moving the renderer up to the parent component and reusing it instead of creating a new one for each mount.

On another note, I recommend trying out the extension PixiJS Inspector. It's great for PIXI debugging purposes. It also reveals that every time "About" is clicked, a new PIXI container is generated. By implementing the aforementioned solution, only one container will exist throughout user interactions.

For more information, visit: https://github.com/pixijs/pixi.js/issues/2233

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing from system mode to dark mode or light mode

Within my Next.js web application, I am implementing MUI to facilitate the transition between system, light, and dark modes. Persistence between sessions is achieved by storing the selected theme in local storage. The user has the option to change the them ...

javascriptreactjsmaterial-ui

Node: Sending JSON Values in a POST Request

I am currently working with the index.js file below: var Lob = require('lob')('test_6afa806011ecd05b39535093f7e57757695'); var residence = require('./addresses.json'); console.log(residence.residence.length); for (i = 0; i ...

javascriptjsonnode.jsapi

Firefox 3 fails to utilize cache when an ajax request is made while the page is loading

Upon loading the page DOM, I utilize jQuery to fetch JSON data via ajax like so: $(document).ready(function(){ getData(); }); ...where the function getData() executes a basic jQuery ajax call similar to this: function getData(){ $.ajax({cache: t ...

javascriptjqueryajaxfirefoxcaching

Postman successfully interacts with cookies, while VueJS encounters difficulties in doing so

Currently, I have a Flask server up and running on , along with a Vue.js frontend running on http://localhost:8080. The API has been set up and tested using Postman, with everything functioning seamlessly as expected. Upon sending a POST request to /log ...

vue.jsflasksessioncookiesaxios

Spying on functions within Vue 3 setup() is not allowed

What is the best way to create a Jest test that triggers the function resetTimer and verifies that startTimer is also triggered? JS Code: setup () { const startTimer = () => { // ... }; const resetTimer = () => { startTi ...

vue.jsjestjsvuejs3vue-composition-apispyon

Extract specific nested elements

Looking for assistance with extracting specific nested objects from a series structured like so: data = {"12345":{"value":{"1":"2","3":"4"}}, {"12346":{"value":{"5":"6","7":"8"}}, {"12347":{"value":{"9":"0","11":"22"}} In need of creating a functio ...

javascript

Tips for managing the submission process for dynamically generated formsORStrategies for

<tr> <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post"> <td><input name="yyy" value="FormAValue" type="hidden">TestA</td> <td><input name="before_year" class="fo ...

javascriptjqueryhtmlforms

Ways to access UserProfile in a different Dialogio

For the implementation of a chatbot, I am utilizing Microsoft's Bot Builder framework. However, upon implementing an alternative path to the dialog flow, I noticed that the user's Profile references are getting lost. Here is the code snippet fr ...

javascriptnode.jstypescriptbotframeworkchatbot

How to ensure NodeJS waits for a response before returning a value

I've come across a seemingly simple problem that I just can't seem to solve. My current project involves working with an asynchronous messaging bot. In this particular scenario, the bot is supposed to react to an event by calling a Restful API a ...

javascriptnode.jsrest

Utilizing Bootstrap 5: Executing JavaScript exclusively upon successful form validation

I've created a form with multiple input fields that are being validated using Bootstrap 5 validation. <form class="needs-validation asset-test" action="{{ url_for('asset_test') }}" method="post" novalidate> ...

javascriptbootstrap-5

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

javascriptjqueryhtmlcss

The donut chart in Chart.js is stuck in grayscale without any colorization

I just set up a donut chart using chart.js with the following code: <div id="chartContainer" style="height: 320px; width: 320px"> <canvas id="hoursFEContainer"></canvas> </div> To use chart.js, I downlo ...

javascriptnode.jschartschart.js

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

javascripthtml

Utilize Jquery to extract HTML content from an array of links and implement regular expressions

Currently, I am embarking on the journey of developing a Google Chrome extension despite my limited experience in this field. My aim is to create a tool that can identify individuals who have left reviews on Amazon products. Specifically, I am looking to l ...

javascriptjqueryscreen-scraping

Building a DOM element using jQuery

I have a function $(document).ready(function () { $("#btnhighlight").click(function () { var htext = $("#txthighlighttext").val(); $("#lstCodelist option").each(function () { var sp = $(this).text(); ...

javascriptjquerydom

When an HTML input button within a table fails to trigger any jQuery function upon being clicked

I currently have a table set up with multiple rows and columns. <table style="width: 100%;" class='table_result'> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td> ...

javascriptjqueryhtml

I am hoping for JavaScript to perform three distinct actions depending on the names of the files that are currently open in Photoshop

Currently, I am in the process of developing a JavaScript script for Photoshop. The main objective of this script is to prompt the user to choose a folder containing multiple files. Subsequently, the script will open each file within the folder and perform ...

javascriptphotoshopextendscriptphotoshop-script

The deletion of Webpack Clean- /public/js has been successfully completed

I am utilizing the clean-webpack-plugin to empty the contents of my public/js directory. https://www.npmjs.com/package/clean-webpack-plugin Despite trying various methods, I keep encountering the message /public/js has been removed plugins: [ new CleanW ...

javascriptpluginsnpmwebpack

Showing the information obtained from an API request once the user submits the form without the need to reload the page

I am currently working on a form that will take search query requests from users upon submission and then display the results by making an API call. My goal is to show these results without the page having to refresh, using AJAX. The backend connection to ...

javascriptphpjqueryajax

Struggling to eliminate placeholders using regular expressions in JavaScript

In my dynamically generated table, I have some placeholders that need to be removed. These placeholders are in the format of {firm[i][j]}, where i and j are numbers. I attempted to use a regular expression in JavaScript to remove them, but it didn't ...

javascriptjqueryregex