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

Question

我一直在修复网站 JS，将其移至底部，缩小等。除了（电子商务网站的）博客之外，一切都还好，因为页面加载导致标题成为un-styled 一秒钟左右，但它不会发生在网站的任何其他部分，即使它们共享相同的 CSS/JS。该博客的图像很重，但是禁用了图像（我也尝试过禁用脚本），它仍然会发生。这只是在我做出改变后才发生的，我不能简单地恢复，但这些改变都是积极的，如果有的话应该会有所帮助。我看不到任何 JS 导致它（因为我删除了脚本以查看它是否在其中）并且它不会在 FF 中发生。

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

所以，我曾希望我可以使用开发工具来找出正在发生的事情，可能是时间线视图或其他东西。我只是不知道该怎么做。

有什么建议吗？

Ed：我在登台站点和实时站点上都使用了网络选项卡，正如您从图片中看到的那样，它们是相同的，css 是在实际页面之后加载的第一件事，而在实时站点上它是实际上是 ga.js。所以现在它更像是一个谜......

Answer 1

别担心，想通了...这是 Stylebot Chrome 扩展程序...不知道为什么在进行这些更改后现在导致它，以及为什么它没有影响实时站点。我没有为此域定义任何样式。我猜是一个错误。

都一样干杯:)

Answer 2

开发工具中的时间轴选项卡用于基准测试/网站性能测试。如果您想知道正在加载什么内容、何时何地发生了什么，您可以使用网络选项卡。

在任何地方都使用一些相关消息填充 console.log() 也是一种常见的做法，这样您就知道何时运行某些代码部分。