Strange web inspector lag in both Safari and Chrome - javascript

I’m experiencing this odd issue where the web inspector in both Safari and Chrome don’t refresh after a full page reload until about 10–20 seconds later, and only with the web app I’m building. Anyone ever seen anything like this?
Here is a video showing the issue.
The video starts with a page refresh. When you see the blue screen that means the page is fully refreshed. A full 13 seconds later you’ll see the content of the inspector on the right refresh.
This is a relatively heavy React app I’m building, but actual browser performance has been great. I see no lag times or chuggy responses in the actual UI. Only this strange inspector issue. Safari fares slightly better, but still a weird lag.
I’ve no idea if this is a React issue, an OSX issue, a browser issue, or something else entirely. Happy to move this to the appropriate place once I find out (fingers crossed).

Related

Chrome hangs for 15s+, no clues in DevTools — how can I debug this?

One page on a client's site causes Chrome to hang unresponsively for 15 seconds or so. On macOS, the browser locks up completely and the spinning wheel appears.
There are no issues whatsoever in Safari or Firefox. I have no idea why this is happening, and DevTools doesn't seem to give any clues as to what's causing it.
Here's a screenshot of the timeline — note the flurry of activity in the final second, when the browser becomes responsive after seemingly doing "nothing" in the latter half:
Some comments on the timeline above:
At ~12,500ms the page looks ready. In any other browser, it is ready for interaction at this point. You can see the final green chunk in the timeline finishes around here.
Chrome completely locks up between 12,500ms and 28,500ms.
I initially assumed the problem was with one of the 3rd-party/analytics scripts, as you can see the timeline shows activity from these right in the final second (> 28,000ms). I tried switching every one of these off, but exactly the same thing happens.
This is a particularly large page, as it lists several thousand records in a JS datatable. I appreciate performance can be improved, but I don't believe that's the root cause. The page/plugin has been working absolutely fine for several years.
What can I try next? Thanks! 🙏
This turned out to be a bug in Google Chrome v107. Updating to v108 fixed the issue immediately.

White flickering/flashing when changing tab in chrome to react site

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 (:

Why does Firefox lag using NVDA on a page setting textContent?

Recently I've been testing my website using screen readers and ran into a page that lags like crazy when using NVDA. More specifically:
All browser actions are substantially delayed, but NVDA itself runs perfectly fine
For example, the page normally loads in its entirety in less than a second, but with NVDA active, the first image can take several minutes to render
Refreshing the page takes several minutes to execute
Even switching or closing the tab takes several seconds
After some extensive debugging, I isolated the issue into a rather specific set of criteria causing the slowdown:
This only happens on Firefox (I'm currently on Firefox 90); Chrome and Edge are fine
This only happens with NVDA; VoiceOver on Mac is fine even on Firefox. I do not have JAWS.
The action causing a slow down is setting an element's textContent on every requestAnimationFrame, so it's happening dozens of times per second
I am uncertain if this is experimentally significant, but I'm running on Windows 10 Home
I managed to scrape together a minimal CodePen example. I used CodePen here because the simplest way I could replicate the issue was by refreshing the page. In the example is a refresh button that activates a spinner, so if the page is fast the spinner will show up for only a brief moment; if it's slow then you'll get to observe the spinner in all its glory.
What I see when I try to refresh:
So while I isolated what is causing the issue, I have no idea why this is happening and hence how to solve my original page's problem without deactivating the widget outright.
What might be the underlying cause(s) of Firefox/NVDA slowing down on a page setting textContent?
Is there an alternative to setting textContent that I can or perhaps should consider?
Is this perhaps an issue that should be filed directly with either Firefox, NVDA, or both?
Thank you!
Addendum:
NVDA Github Issue: This open issue indicates long pages are slow to load, which may be related to my problem
My Website's Page: The page on my website I'm talking about

Safari blank page SharePoint portal

We are working on a SharePoint Portal and facing some weird issue with iOS devices (safari browser). At times, as we navigate from page to page, sometimes a next page will not load. browser stays white (blank page). No errors. F5(browser refresh) takes care of it and the page loads fine.
We researched this issue over google and found that people are discussing about this & there is no concrete fix for it except clearing browser cache (in code or manually).
Has anyone had experienced similar issues with iOS devices before & found any working solution for this issue? Any insight would be really appreciated!!
Thanks.
Vishal

Weird flickering bug in the latest version of Chrome browser

After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.

Categories