当更改chrome中的选项卡以响应站点时,白色 Flink / Flink

6vl6ewon  于 2022-12-06  发布在  Go
关注(0)|答案(3)|浏览(158)

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有关(见第一个答案)。我如何改进它?

uurity8g

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,

  1. OS can slow down the performance due to its update issue. what OS are you using?
  2. 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:

  1. Chrome Performance Tab
  2. 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.

tyg4sfes

tyg4sfes2#

我通常在我的浏览器中关闭这个功能,并且我没有体验到你在你提供的网站上解释的内容(我在MacBook Pro 2020 13”英特尔上运行Chrome)。
也许关闭硬件加速可以解决此问题?
你说这个问题只出现在Chrome浏览器中,你有没有任何扩展,可能会影响页面切换标签页时?我想任何扩展,阅读或编辑页面的任何形式或方式。
我猜你已经试过了,但如果没有:重新安装chrome并使用全新安装(无扩展,无配置文件登录...)测试站点是否有效?

dpiehjr4

dpiehjr43#

最后,这个解决方案非常疯狂,我们在导航栏中有一张带有我们公司徽标的图片(出现在应用程序的每个页面上)。图片的问题是--宽度高达35,000像素,高度高达5,000像素。你看不到它,因为它在一个具有固定高度和宽度的div中。我发现的方法是--打开开发工具,并开始删除div。例如,我们有:

<div id="root">
  <div>1</div>
  <div>2</div>
</div>

所以我删除了div 1,然后检查问题是否仍然存在。如果问题仍然存在,我去删除div 2。并继续这样,直到你发现一些疯狂的像32, 000 px的图片。非常'老派',但它是什么(:

相关问题