如何找到哪个js文件创建问题

Question

我的项目中有 20 多个 js 文件，例如 jQuery 等，当我滚动它时它会挂起，因为它加载非常懒惰。 如何找到导致问题的文件？

Answer 1

这可能是几件事之一，如果不查看您的代码，我不可能说出实际原因是什么。你问了一个非常主观的评论。在调试和解决问题方面没有灵丹妙药。

---

我一直认为 Occams Razor 方法最有效。

“当您删除所有其他选项时，剩下的无论多么不可能，都必须是问题/解决方案/答案。”

---

首先，在您开始删除 JS 文件之前，您是否尝试过在您的项目中全面搜索 .scroll？ 很有可能有几个在滚动时运行的函数会导致回流，这是此类代码的常见问题。

评估完代码后，您可以使用 Google Chrome 中的“性能”标签来准确验证代码执行时会发生什么 (Learn how to use the Performance Tab here)。您可以采取适当的措施。

---

假设您的代码遇到了我在使用 jQuery 的成长期遇到的相同问题 - 多个或有问题的滚动事件 - 您可以对可以在滚动后运行的事件进行去抖动 已完成。您可以使用以下模式来做到这一点。

场景 1： 这将运行很多次。每个滚轮拖动“N”次（取决于设置 - 我的是 10 次），使用滚动条时甚至更多次。

function someFunc() {
    let someArr = [];

    for(var i = 0; i < 1000000; i++ {
        someArr.push((i * 2));
    }
    
    for(var i = 0; i < someArr.length; i++ {
        someArr[i] /= 0.25;
    }
}


$(window).on("scroll", function() {
    someFunc();
});

场景 2：

这将在滚动完成后运行一次。在执行前等待 200 毫秒，以确保用户完全完成滚动。

function someFunc() {
    let someArr = [];

    for(var i = 0; i < 1000000; i++ {
        someArr.push((i * 2));
    }
    
    for(var i = 0; i < someArr.length; i++ {
        someArr[i] /= 0.25;
    }
}

let debouncedTimeout = null;

$(window).on("scroll", function() {
    if (debouncedTimeout) {
        clearTimeout(debouncedTimeout);
    }

    debouncedTimeout = setTimeout(someFunc(), 200);
});

Answer 2

在每个文件中添加一个带有数字（check1、check2）等的 console.log("Check")。在浏览器中检查您的控制台，查看它们在控制台中加载的系列。如果加载下一个日志需要一段时间，您知道它是上一个文件，其中包含您记录的编号。

Answer 3

您的控制台应该说明一切。 但是加载这么多 js 文件是不好的做法。 尝试将所有内容合二为一，因此在进一步的后端开发中可以转到 .min.js 但如果你继续这样做。最简单的方法是使用 console.log 跟踪功能序列，这样您就可以按照预期的方式工作 :)