Hello堆栈溢出😀
我有一个奇怪的问题与一个React应用程序时,切换标签在 chrome (应用程序已经加载).例如:(Link到视频如果gif质量太低)
你可以看到有一个小的白色闪光之前,它显示网站本身(像0.2秒的东西),事情是我的应用程序是有点重,我猜,它有时是0.5-0.75秒的白色屏幕 Flink 一样,这是恼人的客户。
他们中的一些人这样描述:“每次我们转到Web浏览器中的另一个选项卡并返回到您的应用程序时,网页都会空白0.5秒。”
我看过一些网站也有同样的问题,例如instacart.com,其中一些有0.1秒的白色闪光,而其中一些有更长的闪光。我的问题是我如何改善这个问题?与此相关的是什么?
这里的大多数问题都与react-native中的一些东西有关,但我的应用程序是react web。我读过关于FOUC的文章,但我不确定这是否是问题所在。
顺便说一句,我不认为这与电脑的能力有关(我在ryzen 9 PC和M1 pro mac上得到了这个32 GB的内存)。
谢谢你的帮助。
另外,这个问题似乎只存在于chrome,在firefox中它没有任何白色闪。我猜这与to this有关(见第一个答案)。我如何改进它?
3条答案
按热度按时间uurity8g1#
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,
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:
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.
<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 inasync
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.
tyg4sfes2#
我通常在我的浏览器中关闭这个功能,并且我没有体验到你在你提供的网站上解释的内容(我在MacBook Pro 2020 13”英特尔上运行Chrome)。
也许关闭硬件加速可以解决此问题?
你说这个问题只出现在Chrome浏览器中,你有没有任何扩展,可能会影响页面切换标签页时?我想任何扩展,阅读或编辑页面的任何形式或方式。
我猜你已经试过了,但如果没有:重新安装chrome并使用全新安装(无扩展,无配置文件登录...)测试站点是否有效?
dpiehjr43#
最后,这个解决方案非常疯狂,我们在导航栏中有一张带有我们公司徽标的图片(出现在应用程序的每个页面上)。图片的问题是--宽度高达35,000像素,高度高达5,000像素。你看不到它,因为它在一个具有固定高度和宽度的div中。我发现的方法是--打开开发工具,并开始删除div。例如,我们有:
所以我删除了div 1,然后检查问题是否仍然存在。如果问题仍然存在,我去删除div 2。并继续这样,直到你发现一些疯狂的像32, 000 px的图片。非常'老派',但它是什么(: