I'm inspecting a performance issue with an AngularJS application.
When performing specific actions, the CPU usage goes to 100%, the Chrome window freezes, and I have to manually terminate the process using Chrome's task manager.
I tried to debug the app (DevTools' Sources tab), but the application is quite large and the code is minified, which means that finding the issue won't be easy: I see a lot of code triggered by the digest cycle, and can't figure out which code is the actual culprit.
What could be helpful is to be able to profile the application once it freezes; I'm pretty sure the profiler will immediately show the actual bottleneck. I can successfully start the profiler (Performance tab) before the freeze happens, but once the application freezes, when I click on Stop button, the Loading profile window is stuck at zero percent (I waited for fifteen minutes just to be sure, it's still at zero), so I suppose that it's frozen as well.
Therefore my question is:
How do I find what causes the application to freeze when I'm unable to figure it out by simply debugging the application?
To answer my own question, the solution was to use a different browser. Surprisingly, Firefox let me profile the application during the freeze. The remaining part was easy, as I expected: by comparing the profiling results before the freeze with the ones after it, one could figure which code is executed repeatedly.
Thanks to Aleksey Solovey as well for his comment.
Related
I am currently learning react right now. I am following a react tutorial for a stopwatch application where it just increments the time every second. The code perfectly works as it indeed increments the time every second. However, if I open a new browser tab, or even open a different application, it seems that react doesn't update the state, meaning, the timer stops incrementing the value. But if I visit the react application, it begins to increment (once again).
I literally watch the timer go to '00:00:10' and then click another tab and wait for about 10 seconds. When I go back to the react application, the timer is still at '00:00:11', instead of '00:00:20'.
Is there something I am missing? Why is react behaving this way? It is because of performance issues? I am pretty sure this is a nature of react but I can't seem to find an explanation anywhere else.
I am also not sure if I should provide the code for the stopwatch application as I am sure that it's not a bug, nor a problem relating to the code itself. Let me know if I need to include the code so that I can edit this question.
If your website isn't active (in an active browser tab) then the Browser doesn't execute your JavaScript code. It does that to save CPU time - people tend to have a lot of tabs open.
For a timer application you want to remember the timer start time (e.g. with new Date().getTime()) and then every second you calculate the difference to this start time. This way if the user leaves the tab and comes back then the timer is correct again after latest a second.
Another benefit is that your timer will be more accurate even if the browser tab remains focused all the time. The timer calls aren't exact so your code isn't called exactly every second, but only about every second and the errors sum up over time. If you have a start time available then these errors don't matter.
Edit: There is more to this topic, the best thing I could find quickly is this discussion How do browsers pause/change Javascript when tab or window is not active?
When developing my react app the app becomes unusably slow with the devtools open in chrome. Works fast and fine with them closed or in incognito mode. I have tried disabling all extensions and had the same problem. This seems to have started happening recently when I updated chrome (now on Version 80.0.3987.132).
I am not really sure where to start debugging this issue but it has become very frustrating to develop on my app.
Any advice or help debugging would be appreciated.
TL;DR: Go to the Sources tab and delete all breakpoints for the site.
I had a similar problem. My site was very slow to load, but only in specific circumstances:
Dev-tools were open.
Tab was in a normal window. (not incognito mode)
Profiling was not enabled.
If (and only if) all three of those conditions were met, the site would load unbearably slowly (15+ seconds; normally ~3s), plus have performance issues for certain operations on the site (like changing which subpanel was open). It was very strange.
Like you, I tried disabling all of my extensions, yet the problem persisted.
Attempt 1: I tried clearing all of the site's cookies and local-storage, using the info/lock dropdown at the left of the address-bar. Suprisingly, that seems to have fixed it! (edit: this was not the root problem; see below for that)
So the problem must be that my site was storing too much data in local storage or something, such that dev-tools was choking on it (but only in specific cases, for some reason). This also matches with the issue resolving in incognito mode: incognito mode uses a "clear slate" for site cookies/local-storage.
Anyway, it's an odd one, but the cookies/local-storage clearing seems to have worked for my case. (If the issue comes up again, and the solution above doesn't fix it, I'll try to remember to mention it.)
Update: Oddly, having the profiler on still speeds things up even after the fix (ie. those three conditions being met still slows down page loading and actions, just much less than before the fix). So apparently the fix merely "reduces the intensity" of the problem rather than fully fixing it; like, by resetting local-storage, it lessens the size of that data, which somehow is a variable affecting the core problem (not yet identified).
Attempt 2: I believe I have found the root problem and solution: I removed all breakpoints for the site, and the slowdown was solved completely. So the problem seems to be that I had lots of unneeded breakpoints set at various places in my website code (some enabled, some disabled). Some of these must have been placed in/near "hotspots" that were getting called frequently. By having the dev-tools open, the Javascript engine must have had to start performing some processing related to the breakpoints, slowing things down.
My guess is that the problem would also be fixed by disabling the "JavaScript source maps" settings (as that's the only thing I can think would cause so much slowdown), but I haven't confirmed this.
This has most probably something to do with this commit, titled "Stop sending profile data when recording is off".
They already know there is an issue with the Developer Tools slowing down and they tried to prevent it by preventing profiling data to be sent via the bridge to the frontend, when not recording.
As reported, it seems the issue is not happening anymore, on the latest version. However, the cause is still unknown.
Try uninstalling the Developer Tools extension, clearing browser cache and then installing it again.
You should probably try using a version other than the one you're using, Version 80.0.3987.132. The app you are trying to develop might not be suitable to the version you are using. Delete the extension you are using, clear and remove every trace of browser cache and then re-download the extension, like what Daniele Molinari said. It might help. If it doesn't let me know. I'll try a different approach.
This is a weird one I've only recently noticed since Chrome 60.0.3112.90 on Mac OS X 10.11.6, and it really impacts my daily work.
Chrome is creating a new console context every time an Angular application is reloaded, and the previous instances (presumably) stick around. This makes working in the console difficult because the context of the console sometimes remains on an old context. Whats worse is you cannot even interact with an old context so why does it remain?
I'm unsure if this is a UI bug or an actual issue with the Angular application possibly keeping reference to something from the previous context (not sure how or what would even do that).
This occurs on both the product I work on, and on the Angular documentation website.
Here's a gif of it happening:
http://i.imgur.com/lVjLJnu.gifv
Every time you see me click outside of the console, I'm performing a reload.
Any ideas? This is absolutely obnoxious. I've disabled all extensions with no difference. My colleagues on Linux do not have this problem.
I am experiencing a performance bottle-neck in this website: http://oceanosdecolor.es/ and I'm not able to find it. If you try, you'll see any page (for example, homepage) takes a long time to load.
The first time you execute a page, the site reloads to detect client device, but that's only the first time and then it keeps client device so it doesn't reload again.
I log traces of the execution to database but I don't get useful information as, according to the log, the execution of the whole homepage happens in the same 1 second, but I can see that the homepage takes more time to load.
The IIS log (when trying locally) doesn't help as this also gives information in seconds, not miliseconds, and again, it says everything happens in the same second, and anyway running locally is much faster than on the server.
So, I ask for help in any tool to monitor performance with more accuracy or any technique I could use.
Thank you
I think your answer might not lie with IIS or SQL Server. According to the Developer Tools in Chrome, your actual page execution and sending out the HTML takes 400ms on first load from my location. The problem is you have a tangle of CSS files (many of which are not being found and causing extremely long delays). Also you have a lot of requests.
I would install Yahoo's YSlow for your favourite browser. This will give you a whole bunch of recommendations for what is running slow on your site from an end-user perspective.
To use the Developer Tools on Chrome: right click on your page, hit "Inspect Element" and then go to the "Network" tab and then hard-refresh your browser (shift-F5).
A few of the problems I see are: commun.css (2.5 seconds and failed), layout.css (400ms and failed), jquery-ui-1.8.10.custom.min.js (800ms and failed).
Find the reason for these failing and fix it and I'm sure your site will load faster. Also try use CSS image sprites wherever possible to cut down on the number of requests.
I have a standalone WPF application running on .NET 3.5. Every so often, the display simply freezes up for several seconds. This is most noticeable on screens where something is being updated often. Here is a video showing the problem.
While the display is frozen, the interface remains responsive (video).
I've come across some other posts with similar problems who attributed it to a SW/HW rendering issue. To be safe, I disabled HW rendering altogether, but still have the problem.
I ran a file monitor during the freezes to see if there is some extraordinary file access or activity going on, but nothing is out of the ordinary.
Final note: The target platform is a small touch-screen panel PC without much memory or horsepower (512 MB). I only see this issue on the target, never on my development PC, which has much more in the way of resources.
UPDATE
I thought I had fixed the issue by removing some animation code, but it did not work. I am still encountering the problem and I'm at the end of my rope.
Here's some more things I've tried:
Upgraded to .NET 4.0. Same behavior.
Added debug code to all methods that may be invoked via DispatcherTimer (which are called on the UI thread) to make sure none of them are holding up the UI.
I'm really stumped here and have added a bounty. As I mentioned, the problem only occurs on the target PC (link).
I tend to suspect either .NET GC or the OS swapfile when this kind of behavior shows up.
For the former, you could try the .NET performance counters to monitor for suspect activity.
If the device has a swap file, you can disable it and see if the behavior changes.
As others have said, a profiler (or some what of isolating what condition is inducing the delay - even just attaching and breaking the debugger when it occurs) would be a good way to get more information.
Did you tried to profile the application on the tested system? Using a memory and/or performance profiler?
You could get some good informations out of this type of test : some .Net profilers
And here's one for WPF : WPF profiler from microsoft
The culprit was the following method call:
new HwndSource(new HwndSourceParameters());
This was added to my application because it patched a memory leak problem in .NET 3.5. This work-around can be found here. If I remove this call, the rendering issues go away.
I took out the call and fixed the memory leak in another way (removing storyboard animation and using code behind instead)