We were experiencing a performance issue in our app and used the Performance tab in the DevTools to try to debug it; we noticed that a lot small tasks are created. The DevTools don't give us much information as to what these tasks are. Could somebody give us a hint as to what this could be?
DevTools screenshot
We noticed that if we delay rendering using setTimeout the problem goes away.
React version: 18.2.0
Related
I am having performance issues in a React app I am working on. A page is taking a lot of time to render. On profiling the page using Performance tab in Chrome, I found that some animations are taking a lot of time (16.52 seconds!). But I am not able to figure out which part in my code is causing this issue? Here are the screenshots for recorded performance.
Can anyone point to a good resource on how to debug this? Google's page on debugging performance is not very helpful for above scenario.
My angular app runs terribly slow in mobile so I carried a test and found out that the javascript execution time (after the bundle.js gets loaded) is the main bottle neck. There's a huge difference in them between desktop to that on a mobile.
What might be causing the problem and what might be the possible solutions?
Test for desktop
Test for mobile(Moto G)
You can see the JS Execution time is denoted by the purple bar.
Please have a look at the page speed suggestions by Google for your site.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Faiesec.org&tab=mobile
Try to make the changes mentioned and test again to see if it makes it any better.
Move the render blocking js to the footer. That's the one thing I noticed when checked the source from my mobile.
Please have a look at the below question
How can I improve load performance of Angular2 apps?
I have seen the initial slow issue on many angular apps even though they have been optimized with production build. Please have a look at that it may help.
I have written a website that relies heavily on Javascript/jQuery and HTML5.
Unfortunately I occasionally experience complete browser melt downs. Because the entire browser dies on me I am finding it very hard to pin point if I have done something to cause this.
I have no infinite loops, Ive been carefully trying to make sure there are no memory leaks. Another problem is that I cant recreate the issue on command. Doing the same things in the same way and order as what caused the crash last time, wont make it crash again.
I am not entirely convinced the issue is my website, but it does seem to happen more often when I am browsing the site. These crashes have occurred in the latest stable released of Firefox and Chrome.
Is there anything I can do to get some valuable debugging information when the browser dies?
And is there any software additional to things like FireBug which I can use to specifically hunt down any memory leaks?
Does your firefox try to send a crash report to mozilla? If so, I believe you can view your own crash reports somewhere on the mozilla site. I'd look it up, but am running out of time here.
p.s. lacking reputation to make this comment, it is answer instead >.>
I have a large, javascript heavy web app that I am working on. I am experiencing very slow response times from Chrome Dev Tools for XHR responses and console loggging (3-5 secs). The actual app is running fast and responsive, only dev tools looks like it is suffering.
Does anyone have any idea why Chrome Dev Tools is becoming sluggish as my app grows?
Devtools are like any other debugger; they hook into the normal processing flow of an application, and store quite a bit more information than is normally required. This is much more work than simply rendering the page without debugging enabled, so it will indeed be slower.
That said, 3 seconds to respond to console.log seems high. I'd suggest that you first test the application in a nightly version of WebKit. If it's responsive in WebKit, but not in Chrome, please file a bug against the inspector via http://new.crbug.com/ along with any information you can provide about what scenario causes the slowness.
If it's equally sluggish in WebKit, please file a bug against WebKit's Inspector component: https://bugs.webkit.org/enter_bug.cgi
Either way, post the bug ID here, and I'll see that it's triaged into the correct team.
I "fixed" the slow chrome developer tool by (under SOURCES tab)
clearing the "watch" list that accumulated over time...
clearing all the "snippets", i had dozens as well...
Not sure which of both made the most difference, but it certainly made a difference
This is an old question, but it may help someone landing here later like I did.
Using Chrome 46.x/47.x on Linux (RHEL 7), none of the proposed solutions worked for me. What did work was to disable the setting "Use hardware acceleration when available", in the advanced browser settings.
I noticed in the process monitor/list that the Chrome renderer was taking up a lot of CPU, even putting a breakpoint or stepping throught statements in the debugger would take 10+ seconds!
Might be worth a shot.
Undock the developer tools into separate window.
In my case, it's work.
I struggled with this also, to the point where stepping through code using the chrome debugger was just so slow it took hours away from my productive development time. In watching the CPU utilization when debugging in chrome I would see it use up to as much at 40% of all 4 cores of my processor. I tried everything to no avail. Finally, I tried making the browser window of the page I was debugging as small as I could without losing any of the required view and miraculously it solved the problem. So, now I keep my debugger window popped out in a separate window, and make the window of the page I am debugging as small as I can and my debugging experience is very fast again. I have tested this over a period of weeks and it has held out. Hope this helps someone.
I've lately been running into odd issues, which I'm starting to think are related to resource starvation in the browser.
In FF:
I'd been testing one of our web apps and suddenly things that should disappear after a couple seconds stopped disappearing. I tracked back to setTimeout just flat out refusing to work. After reloading the browser it was all clear, no issues.
In IE:
I regularly see issues where IE will refuse to do transparency all the sudden, simply reloading the page clears this up.
In both:
Though I can't say its related for sure, I see unexplainable behavior, things along the lines of variables not being available (undefined) when they should be.
Both browsers also show a steady increase in memory usage over time (memory leaks).
The javascript in the web app is heavy and it is a single load page (making those memory issues mentioned all the more painful). There are lots of in-efficiency, and various things that make one say "why would you do that?".
Has anyone encountered such things? Can you point out general resources that will help identify and resolve these issues?
You could try running your application against the Chrome Profiler http://code.google.com/chrome/devtools/docs/overview.html. You can profile the CPU and get snapshots of the browser heap, that should help locate any rogue stuff.
If your application is designed to work with the Internet Explorer: The Developer Toolbar also has a profiler.