使用Chrome开发工具找出导致FOUC的原因

Question

我一直在修复网站JS，将其移至底部，缩小等。除页面上的内容（电子商务网站的博客）外，其他一切都没问题，因为页面加载会导致标头未设置样式大约需要一秒钟的时间，但是即使它们共享相同的CSS / JS，它也不会在网站的任何其他部分发生。 该博客的图像非常繁重，但是禁用了图像（我也尝试过禁用脚本），但这种情况仍然会发生。 这是自进行更改以来才发生的事情，我无法简单地进行还原，但是更改都是积极的，应该有所帮助。 我看不到任何导致它的JS（因为我删除了脚本以查看它是否在其中），而且在FF中也没有发生。

我会共享一个链接，但它位于封闭的登台服务器后面。 我可以提供代码，但是我不确定是什么，而且还有很多。

因此，我希望我可以使用开发工具来了解正在发生的事情，可能是时间轴视图之类的东西。 我只是不知道该怎么做。

有什么建议吗？

埃德：我在登台和现场站点上都使用了“网络”选项卡，从图像中可以看出，它们是相同的，css是实际页面之后加载的第一件事，而在现场站点上实际上是ga。 JS。 所以现在更是一个难题...

Answer 1

不用担心，想出来了...它是Stylebot Chrome扩展程序。.不知道为什么在进行了这些更改后立即引起它，以及为什么它不影响实时站点。 我没有为此领域定义任何样式。 我猜是个错误。

都一样欢呼:)

Answer 2

开发工具中的“时间轴”选项卡用于基准测试/站点性能测试。 如果您想知道正在加载内容的时间，地点和时间，请使用“网络”选项卡。

将console.log（）随处填充一些相关消息也是常见的做法，以便您知道何时运行部分代码。