在单个网站上的 Page Speed Insights 中收到奇怪的错误

Question

我的服务器上有一个网站无法在 Page Speed Insights 中运行（此服务器上的所有其他网站都可以正常运行）：https://[URL]/。我收到以下错误：

发生错误 Lighthouse 返回错误：PAGE_HUNG。由于页面停止响应，Lighthouse 无法可靠地加载您请求的 URL。您可以刷新再试一次。 如果问题仍然存在，请访问 PageSpeed Insights 邮件列表以获得支持。

但是，该网站在所有浏览器中都能正常加载。

Answer 1

那是因为您的网站有错误。

如果您将用户代理设置为手机，则“自动优化”JS 文件中似乎存在错误，这意味着它卡在循环中，将空数组打印到控制台。

重现步骤

1. 在 Google Chrome (f12) 中打开开发者工具
2. 将设备设置为“Galaxy S5”（左上角第二个图标，看起来像手机和平板电脑以激活“设备工具栏”）
3. 在“控制台”选项卡打开的情况下重新加载页面。
4. 观看每秒 12000 console.logs 的滚动！

如何解决

据我所知，这是由于您的滑块，它似乎可以在桌面上很好地记录图像（6 个图像），但第二个是移动用户代理，它每秒记录数千次空白数组。

这似乎是由于您有两个使用 var i 的嵌套循环。

似乎第一个循环开始尝试遍历项目，它遇到了第二个循环（现在是一个不会执行的循环，因为slides 变量是一个空数组并且没有长度）但是仍然被执行的一件事是var i = 0。

这会将i 重置为 0，并且for (var i = 0; i < bodyClassList.length; i++) { 循环永远不会超过 0，因此它会创建一个无限循环。

var bodyClassList = document.getElementsByTagName("BODY")[0].classList;
    for (var i = 0; i < bodyClassList.length; i++) {
        if (bodyClassList[i] === 'page-id-123') {
            var slides = $('.slides li img').toArray();
            console.log(slides);
            for (var i = 0; i < slides.length; i++) { //this resets the i variable to 0 every time because slides.length = 0 (therefore i is not incremented)
                //this never gets executed as the slides.length is 0.
                //removed a load of if / else statements for brevity
            }
        }
    }

只需更改您的代码，使其中一个循环具有不同的变量名称，您就不会遇到这种冲突。 （例如，var i 用于第一个循环，并确保第二个循环为 var j）。

我知道这可能归结为自动优化出错，因此您必须先检查未缩小的源代码，如果它使用两个不同的变量，那么您可能必须手动最小化/更改相关文件。

当slides 变量不为空时，为什么不会遇到同样的问题？

因为虽然在第二次循环中重置为 0 也发生在这里，i 在第二次执行第一次循环之前会增加到 5。

if (bodyClassList[i] === 'page-id-123') { 出现在索引 5 处，因此当第一个循环增加到 6 时，它第二次绕过它，i 变量永远不会重置为 0。

具有讽刺意味的是，如果您少放一张幻灯片，这个问题就会更快地显现出来！