My Angular 2 Application is slow to respond (1-5 seconds) to key input, button clicks, tabbing across inputs, etc. only when Chrome Developer Tools is open. Material 2 animations also become slow and choppy.
I've been developing this application for three months, and use Chrome DevTools every day. This issue cropped up seemingly overnight.
What I know:
I stashed all pending application changes to revert my application to a time when this was not a problem. The issue persisted.
Chrome DevTools doesn't seem to slow down any other application (ie. google inbox, google maps) in the same browser session.
Maddeningly, when I run the DevTools' Timeline "Record" to try to gain visibility into the issue, the issue disappears and the page reacts at normal speed again! I assume this is the best clue that I have, but I don't know the internal workings of DevTools well enough to know how "Timeline Record" changes things.
I've restarted Chrome and deleted all cached data.
Nothing of the sort happens in Firefox or IE when I open the Developer tools in those.
Any recommendations on where to look next would be greatly appreciated!
Final answer:
Remove all breakpoints
Even if they're not getting hit this fixed it for me and got performance back to normal.
May be a bigger issue if you have logging breakpoints - so try deleting those first if you're attached to your breakpoints.
Previous answers:
I came up with a workaround - although still not really figured out what is actually wrong.
I also discovered a bunch of tools I didn't even know existed that I'd skipped over before - they're under More tools.
Start by opening the Performance Monitor. This shows a nice CPU graph isolated for your Chrome tab - the Windows task manager is as useless as it ever was.
This is the behavior I got when choosing a date from mat-calendar. No other logic running - just selecting a date. I removed everything from app-component and just put a mat-calendar and it took ten seconds to change the date!
Other controls are generally fine. I could open dialogs, use combo boxes etc. and nice and fast. But selecting a date gave me this nonsense:
I tried emptying local storage, clearing cache, etc. and then I changed port number for my website. I simply changed dev.example.com:44300 to dev.example.com:44301 - in other words Chrome now thought it was a different website.
This is what it looked like after I switched port number.
I also got the same effect using a reverse proxy server - which put my local machine on the internet - so I could try to duplicate the issue from other machines. I could not.
So hope that helps someone - still no clue what's in the cache for this server that is having such a massive impact on performance. But for sure it's not just my code.
Here's a few other things to try:
Test with --aot flag
This didn't make a difference to me, but good to narrow things down.
Add some controls that don't do anything (as a control)
This way you can find if some specific action or control is causing the slow down. You should of course be able to toggle these instantly.
Just toggle them on and off, hide something.
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
Enable Rendering debugging options
Make sure you aren't re-rendering the whole page constantly
The rendering option above will show this to some extent, but one thing I like to do is just add a random text box - type in it and if the text subsequently disappears you know that control has been rerendered.
<!-- yes, just a standard text box -->
<input type="text"/>
Just hide things with *ngIf="false"
Hide controls (yours and third party) and see if anything is causing problems.
For me I'm currently suspecting mat-calendar is causing issues - but I'm still thoroughly confused as to why enabling 'Record' makes the problem non existent.
I've fixed the issue, but I'll never know what was causing it. Likely a setting that I had accidentally changed.
I deleted the Chrome App and reinstalled, everything is back to normal. I'm going to leave this question open in case anyone else has this problem or wants to contribute.
It is normal for every web app to run slowly with Chrome dev tools opened.
Especially if you have inspect tab open, that it's like a new page opened in the same time + has animations on any block render.
We had this issue today at a colleagues workstation. Turned out that it was a chrome-extension (don't remember, something with "ghost" in its name). So maybe try out using guest-mode and check whether the issue still occurs. If it doesn't, successively reactivate the extensions to see which one is causing the problems. If it still occurs, follow the other proposed approaches.
Related
Hello StackOverflow 😀​
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
I'm a website owner, and the buttons that control the light/dark modes on my site are just simple divs that use LocalStorage in a very simple way to update the style of the page according to the user's choice:
<div id="go-to-dark-mode-icon" onclick="localStorage.setItem('brightness', 'dark'); location.reload()">
</div>
<div id="go-to-light-mode-icon" onclick="localStorage.setItem('brightness', 'white'); location.reload()">
</div>
But lately I've been having a weird bug that only seem to happen on my computer's Google Chrome (not on mobile, on Edge, or on my friends' computers as far as I know): there are times when the divs work just fine, and then all of a sudden I click on one of them and nothing changes. And from that moment on, everything goes crazy—I refresh the page and sometimes it's dark and other times it's not, sometimes certain elements are displayed in their light mode version while others are in their dark mode version, etc.
And whenever this craziness ensues, if I open Chrome's developer tools and go to the LocalStorage tab, I can see the "brightness" variable constantly swicthing back and forth between "dark" and "white" every one or two seconds, but it does so by itself, unprovoked, even after the page is loaded and without clicking on anything.
This behaviour is so weird that I can't possibly imagine there's a bug with the rest of my code, not only because it has nothing to do with how light and dark modes are handled but also because this is probably impossible to achieve with simply JavaScript even if I wanted to. So what's going on? Is this a known Chrome bug? Is there any way I can fix it?
We have recently changed our navigation menus. They have been working fine for everyone except for one user only when that user is using chrome.
The menu will render when they hover over an option the first time but after that, no menus render (see screenshots).
We are using the exact same version of chrome rendering the same website. Has anyone else ever experienced anything like this or have any ideas what could cause this?
Working:
Broken:
Looks to me very much like a caching issue. Some of the JavaScript or CSS from before the update may still be stored in the user's browser cache.
To resolve this, clear Chrome's browser cache.
You can access the relevant dialog via ctrl+shift+del.
I was finally able to resolve the issue.
Firstly, everyone was using the same version of chrome in incognito mode with no extensions and a cleared cache so we're still not sure why only one specific user was getting the issue and no one else. Also that user was 2000 miles away so we could not physically debug on that machine. (It was an manager/admin with sensitive info on the machine so RDP was also not an option)
I was finally able to reproduce the issue by testing using Chrome Canary and discovered that the issue was directly related to hiding the sub-fly-out menus off screen using left -999999999px instead of display: none. Apparently just holding the '9' key down for a few seconds was a bad idea and it seemed to cause an overflow error of some kind and changing the left value to -9999px instead fixed it for that user and everyone else in Chrome Canary.
Thanks to everyone who contributed.
I have a relatively un-complex ASP.Net application, which occasionally displays an alert message in layer, with a shadow, with a pushbutton to dismiss the notification.
This code has been working fine for years.
Lately, I am getting complaints from users of really slow response. What they experience is that the page is completely unresponsive, and when they click on the [OK] pushbutton nothing happens for a really long time.
When I record a Timeline, I can see the original even which caused a round-trip to the webserver, and I can see the response from the webserver. I can also see all the Javascript code which runs as a result of the response.
As far as the application is concerned, the transaction is over, and, as far as the Javascript is concerned, the transaction is over as well. All we need to do is wait for the user to click the [OK] button and we will dismiss the notification popup.
This is where the "freeze" happens. The [OK] event is not delivered for like 20-30 seconds. What's going on in the meantime? That's why I'm writing:
We see some very short timers fire every once in a while, then we see a quick Recalculate Style call, followed by an Update Layer Tree event.
The Update Layer Tree event takes 10-12 seconds!
Here's the code for the dialog which is going unresponsive because of the Update Layer Tree events The gets displayed first as you see it here, then, if something goes wrong, it may get updated with code similar to showAlert:
Status/error dialog code
See #tiblu's comment for detail on why Chrome would perform Update Layer Tree.
As for taking 12 seconds: does the interaction behave normally in other browsers, for example Firefox or Safari? If your code has been working fine for years as you say and the browser response issues have been popping up recently (> mid-October, 2015) and only in Chrome the issue may not be your code.
There are a number of similar new issues and complaints recently, pointing to the release of Chrome 46. For example: this issue (code.google.com) and this issue (code.google.com).
CPU spikes are responsible for browser unresponsiveness, which you can monitor using Chrome's Task Manager. As for why CPU is spiking and further detail you'll need to follow the issues above and others as they develop.
Apologies for the pseudo-answer, don't currently have the rep to slip this into a comment.
Thanks to all who responded ... I was unable to figure out how to re-install an older version of Chrome, but I did manage to get my hands on a beta version of Chrome 48 (48.0.2564.8), and, to my most pleasant surprise, I am no longer able to reproduce the problem.
Just to be sure, I restored 46 from this morning's BACKUP, and it re-exhibited the issue. After re-installing beta-48, the problem is gone.
Hooray! Well done everyone!
Last night, I was trying to debug a particular bit of vanilla JavaScript on a private page.
After a half an hour or so, the browser crashed while in the middle of stepping through a troublesome section.
When FireFox restarted, FireBug insisted that there was no JavaScript on the page - does anyone have any ideas what is causing this? Clearly the JS was (nearly) valid before the crash, and wasn't changed before I restarted. The only thing I can see, is that FireBug probably installed an update at that point?
I've tried cutting out all of my code, but nothing seems to make a difference. Other pages, even on the same intranet site, still work, but this one doesn't list any files under the "Script" drop down.
I've compared with the built-in Dev tools, and they also show no JavaScript loaded. The JS is a form submission handler, and clearly it is no longer running when the form is submitted.
I struggled with this for much of today. Eventually resolved it by creating a new profile.
I would be very interested in learning of the root cause if anyone figures it out.