javascript - 更改 chrome 中的选项卡以响应站点时出现白色闪烁/闪烁

Question

你好 StackOverflow 😀

在 chrome 中切换标签页时，React 应用程序出现了一个奇怪的问题(该应用程序已加载)。示例 : (Link 如果 gif 质量太低则转为视频)

您可以看到在显示网站本身之前有一个小的白色闪光(大约 0.2 秒)，我猜我的应用有点重，有时会有 0.5-0.75 秒的白屏闪光，就像这样惹恼了顾客。

他们中的一些人这样描述:“每次我们转到网络浏览器中的另一个选项卡并返回您的应用程序时，网页都会空白 0.5 秒。”

我看到一些网站也有同样的问题，例如instacart.com，其中一些有0.1秒的白色闪光，而一些则有更长的闪光。我的问题是我该如何改进呢？与此有什么关系？

这里的大部分问题都与 react-native 中的一些东西有关，但我的应用程序是 react web。我读过 FOUC但我不确定这是否是问题所在。

顺便说一句，我认为这与计算机的功率无关(我在 ryzen9 PC 和 M1 pro mac 上使用 32 GB 内存)。

感谢您的帮助。

另外，这个问题似乎只存在于chrome中，在firefox中它没有任何白闪。我想这与to this有关(见第一个答案)。我该如何改进它？

Answer 1

原因可能各不相同。有多种方法可以评估和解决网络应用的性能问题(或闪烁问题)。

这是我想到的:

网络应用故障排除前的环境检查

I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram

机器规范仅包含部分性能评估。这可能重要也可能不重要。因为，

1. 由于更新问题，操作系统可能会降低性能。您使用的是什么操作系统？
2. Web 浏览器也可能导致缓慢。您使用的是什么互联网浏览器？它是什么版本的浏览器？您是否正在使用任何可能导致问题的特定插件或扩展程序？

因此，在评估或 QA 网络应用程序时，有必要描述每个小细节。当我在 2019 年在一家初创公司开发 Vue Web 应用程序时，实际上在生产部署环境中存在一些与特定浏览器版本绑定(bind)的实际性能问题；不仅如此，有一次我的 chrome 扩展也导致我的网络应用程序崩溃。始终明确可重现的环境，除非确切地说是哪个代码段导致了问题。

弄清楚细节后，尝试重现问题。它会在不同的浏览器、不同的机器、不同的操作系统中重现吗？如果不是，环境显然不是问题。

发现(任何)Web 应用程序的问题

如果这些小细节没有引起问题，那么是时候在浏览器中获取指标了。

因为题中设置不明确，只好跳过环评。但是请不要跳过那部分；这是至关重要的。该问题在当前环境中可能是可以解决的，但它可能会保留在不同的环境中。

有人已经在评论中提到了React devtool profiling，但我也推荐这些工具:

1. Chrome Performance Tab
2. Chrome Lighthouse(previously Chrome Audit Tab)

请先尝试使用这些工具运行性能检查。

我从 Chrome Performance Tab 运行了一个性能记录，并将范围限制在闪烁时刻 - 以及之后的一小段时间。

(红线内的截图为白屏闪烁瞬间)

目前最可能的原因

根据 Chrome Performance Tab + Lighthouse 的审计，这些问题都存在于那个闪现的时刻。

• treeshaking/code splitting 未正确使用:一个文件中有多达 40000 行代码!(content.js)它应该在 smaller chunks 中提供，这样一开始渲染时不重要的代码必须只在需要时才加载。首先检查您的代码拆分设置。
  • lighthouse 还强调了一大块单个文件中未使用的代码是在 FCP(First Contentful Paint)之前网站性能下降的最大原因。
• 第三方脚本太多:每个第三方代码都随意地放在页面中，带有 <script />标签，没有任何性能调整。运行的第三方库太多了。它们不阻塞主线程，因为它们在async中。模式，但并行加载太多它们肯定会减慢应用程序。尝试仅在需要时通过动态插入来加载第三方库。

在我看来，这是最有可能的原因，但在得出任何结论之前，我们需要深入研究。