Chrome:等待www.site.com,如何知道哪个资源延迟了页面加载？

Question

当一个网站陷入"加载www.site.com"状态的Chrome时,无论如何都知道DOM上的哪些元素会延迟加载？例如,它可能是外部js文件或图像,需要很长时间才能加载.我尝试使用DeveloperTools中的网络选项卡,但它只显示已加载的元素和它们所用的时间.我找不到方法来查看哪个元素卡住了.

Answer 1

我找到了一种方法，我不确定它是否适用于所有情况，但它对我有用。我使用了“时间轴”选项卡（现在显示在“性能”选项卡中），它是 Chrome 开发工具中的选项卡之一。

1. 打开 Chrome 开发者工具（F12或Mac 中的CMD+ Alt+ I）并单击“性能”选项卡

2. 确保将灰色时间线栏一直拖动到右侧，您想要查看事件的最新部分，以便找到卡住的内容：

   

3. 检查记录侧栏下方。如果您在下面的捕获中没有看到这种情况，请尝试切换图标，有不同的视图模式。现在，一路向下我发现了这些。看起来进展不太顺利。显然，某些随机代码中存在某种无限循环：

   

我无法确定它是扩展本身还是其他一些代码。点击进去我只能找到// Copyright 2014 The Chromium Authors. All rights reserved.。

在没有扩展的隐身模式下检查，网站加载得很好。

我还建议检查“控制台”选项卡，看看是否存在任何可能导致无限加载的错误。你经常会在那里找到线索。