I have to build a react-redux site and i have some performance issues on chrome. I have a very big list of nested components rendered on my webpage. I have to build a modal menu that is opened in front of the already rendered list of components. In chrome is very very slow, even a click is taking very long. In firefox works pretty smooth.
I tried debugging with react dev tools and it's saying nothing is rendered in react but the app is very slow. I will attach some benchmarks with the fps. They are taken when the page is idle.
This one is one chrome:
And on Firefox the fps is steady on 60 fps. No drops.
What can be the issue on chrome.
I want to mention in background there are a lot of components but they are already rendered and do not suffer modifications.
Related
I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.
This web App(reactjs) works fine on desktop and tablets.
However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:
Please click to view the gif
I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.
Anyone know why this happened?
Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?
Seems like there is an infinity refresh did you checked useEffect / useMemo / Function Call. The only thing that i can do now, is telling you where you can possibly check in your code, but for a better understanding of your problem, should provide more info about your code or more techical information
My React app is very slow on Google Chrome. I notice a pretty high latency during some little animations (like dropdown display) and filling text fields.
It works very fine on Safari and Firefox. No latency on these browsers.
The solutions I tried:
Debounced text fields
Removed all breakpoints inside Chrome 'Sources' tab.
Thank you in advance for your help !
I have an issue with render from the server. On the first load of the page, the layout goes for a toss. However it is corrected on subsequent renders via navigating the pages. Surprisingly the weired layout also appears on a browser refresh. I have tested it with both Chrome and Microsoft Edge but same problem.
The app was created using standard boilerplate 'create-next-app' and then I just added a few of my pages. See screenshots below
one with the weird screen
and other showing correct render
This actually an issue with CSS injection with SSR for material-ui. Check examples here
Today, I was testing my angular app in Firefox.
My angular app has a couple of md-button and md-tabs. One of the md-tab contains table as it's content. Whenever I switch from this md-tab to some other md-tab in firefox, the table flashes for few seconds in new md-tab.
After spending some time in debugging, I found the property "animation", disabling which the flickering got disabled. To make it work, I changed the property "animation" to none for md-tab-content.
Whenever I start this application in firefox, it shows a popup box containing information for angular-animate.
I have run my application in chrome and safari, and it is working great in those browsers.
Regards
Ajay