Tengo más de 20 archivos js como jQuery, etc. en mi proyecto, cuando me desplazo, se bloquea porque se carga con mucha pereza. ¿Cómo encontrar qué archivo crea el problema?
Puede ser una de varias cosas y sin mirar su código no podría decir cuál sería realmente la causa . Has pedido un comentario extremadamente subjetivo. No hay fórmula mágica cuando se trata de depuración y resolución de problemas.
Siempre he encontrado que el enfoque de Occams Razor es el más efectivo.
"Cuando eliminas todas las demás opciones, lo que quede, por improbable que sea, debe ser el problema/solución/respuesta".
En primer lugar, antes de comenzar a eliminar archivos JS, ¿ha intentado realizar una búsqueda completa de su proyecto para .scroll ? Existe una alta probabilidad de que haya varias funciones que se ejecutan en el desplazamiento y que provocan reflujos, un problema común en dicho código.
Una vez que haya evaluado su código, puede verificar exactamente qué sucede cuando el código se ejecuta usando la pestaña "Rendimiento" en Google Chrome para hacer esto ( Aprenda cómo usar la pestaña Rendimiento aquí ). Puede tomar la acción apropiada.
Suponiendo que su código sufre el mismo problema que encontré en mis años formativos usando jQuery (eventos de desplazamiento múltiples o problemáticos), puede eliminar los rebotes de los que pueden ejecutarse después de que se haya completado el desplazamiento. Puedes hacerlo usando el siguiente patrón.
Escenario 1: Esto se ejecutaría muchas veces. 'N' veces por cada arrastre de la rueda de desplazamiento (dependiendo de la configuración, la mía es 10) e incluso más veces cuando se usa la barra de desplazamiento.
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(); });Escenario 2:
Esto se ejecutaría una vez que finalice el desplazamiento. Esperar 200 ms antes de ejecutar para asegurarse de que el usuario haya terminado de desplazarse por completo.
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); });Agregue un archivo console.log("Check") con números (check1, check2) y así sucesivamente en cada archivo. Revisa tu consola en tu navegador, mira en que series cargan en consola. Si tarda un poco en cargar el siguiente registro, sabrá que es el archivo anterior con el número que registró.
Tu consola debería decirlo todo. Pero cargar tantos archivos js es una mala práctica. Intente encajar todo en uno, por lo que en un mayor desarrollo de backend puede ir a un .min.js Pero si sigue haciendo esto. La forma más sencilla es realizar un seguimiento de las secuencias de funciones con console.log, para que todo funcione como se supone que debe :)