Los confundí el otro día y alguien me corrigió. Así que lo arrojé a la vieja lista de ideas para publicaciones de blog y aquí estamos. Ambas son formas de limitar la cantidad de JavaScript que está ejecutando en función de eventos DOM por razones de rendimiento. Pero son, lo adivinaste, diferentes.
La limitación impone un número máximo de veces que se puede llamar a una función a lo largo del tiempo. Como en “ejecute esta función como máximo una vez cada 100 milisegundos”.
Digamos que, en circunstancias normales, llamaría a esta función 1000 veces durante 10 segundos. Si lo acelera a solo una vez cada 100 milisegundos, solo ejecutará esa función como máximo 100 veces
(10 s * 1,000) = 10,000 ms
Aceleración de 10,000ms / 100ms = 100 llamadas máximas
La eliminación de rebotes obliga a que una función no se vuelva a llamar hasta que haya pasado una cierta cantidad de tiempo sin que se llame. Como en “ejecutar esta función solo si han pasado 100 milisegundos sin que se llame”.
Quizás una función se llama 1000 veces en una ráfaga rápida, se dispersa durante 3 segundos y luego deja de llamarse. Si lo ha reducido a 100 milisegundos, la función solo se activará una vez, a los 3,1 segundos, una vez que finalice la ráfaga. Cada vez que se llama a la función durante la ráfaga, se reinicia el temporizador de eliminación de rebotes.
¿Cuál es el punto de?
Un caso de uso importante para estos conceptos son ciertos eventos DOM, como el desplazamiento y el cambio de tamaño. Por ejemplo, si adjunta un controlador de desplazamiento a un elemento y desplaza ese elemento hacia abajo, digamos 5000px, es probable que vea más de 100 eventos activados. Si su controlador de eventos hace un montón de trabajo (como cálculos pesados y otras manipulaciones DOM), es posible que vea problemas de rendimiento (jank). Si puede salirse con la suya ejecutando ese controlador menos veces, sin mucha interrupción en la experiencia, probablemente valga la pena.
Ejemplos de aciertos rápidos:
- Espere hasta que el usuario deje de cambiar el tamaño de la ventana
- No dispare un evento ajax hasta que el usuario deje de escribir
- Mida la posición de desplazamiento de la página y responda como máximo cada 50 ms
- Garantice un buen rendimiento al arrastrar elementos por una aplicación
Cómo hacerlo
Las funciones para ambos están integradas en Underscore y Lodash. Incluso si no usa esas bibliotecas al por mayor, siempre puede extraer las funciones de ellas para su propio uso.
Desplazamiento acelerado simple:
$("body").on('scroll', _.throttle(function() {
// Do expensive things
}, 100));Cambio de tamaño sin rebotes simple:
$(window).on('resize', _.debounce(function() {
// Do expensive things
}, 100));Subiendo de nivel desde aquí, trabajaría en el uso de requestAnimationFrame, por lo que incluso cuando se ejecutan las funciones, el navegador lo hace en su propio tiempo ideal. Eso se trata en este tutorial de Paul Lewis.
Manifestación
Demostración simple para que pueda experimentar la diferencia:
Vea el lápiz La diferencia entre estrangulamiento, rebote y ninguno de Chris Coyier (@chriscoyier) en CodePen.
Actualizar: ¡Más demostraciones!