Блог

У меня в моем проекте более 20 файлов js, таких как jQuery и т. Д., Когда я прокручиваю его, он зависает, так как загружается очень лениво. Как определить, какой файл создает проблему?

Это может быть одна из нескольких вещей, и, не глядя на ваш код, я не мог бы сказать, в чем на самом деле причина. Вы задали чрезвычайно субъективный комментарий. Когда дело доходит до отладки и решения проблем, нет серебряной пули.

Я всегда считал подход Occams Razor наиболее эффективным.

«Когда вы удаляете все другие параметры, все, что остается, каким бы маловероятным оно ни было, должно быть проблемой / решением / ответом».

Во-первых, прежде чем вы начнете удалять JS-файлы, вы пробовали выполнить полный поиск в вашем проекте .scroll ? Существует высокая вероятность того, что существует несколько функций, которые выполняются при прокрутке, которые вызывают перепрошивку, что является распространенной проблемой такого кода.

После того, как вы оценили свой код, вы можете точно проверить, что происходит при выполнении кода, используя для этого вкладку «Производительность» в Google Chrome (узнайте, как использовать вкладку «Производительность» здесь). Вы можете предпринять соответствующие действия.

Предполагая, что ваш код страдает от той же проблемы, с которой я сталкивался в годы становления, используя 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);
});
 

Добавьте console.log(«Check») с номерами (check1, check2) и так далее в каждый файл. Проверьте свою консоль в браузере, посмотрите, в какой серии они загружаются в консоль. Если загрузка следующего журнала займет некоторое время, вы знаете, что это предыдущий файл с номером, который вы зарегистрировали.

Ваша консоль должна сказать все. Но загрузка такого количества файлов js — плохая практика. Постарайтесь уместить все в одно, чтобы в дальнейшем разработка bckend могла перейти на .min.js Но если ты продолжишь это делать. Самый простой способ — отслеживать последовательности функций с помощью console.log, чтобы у вас все работало так, как должно 🙂