la optimización del rendimiento de front-end - estabilización de la imagen y el acelerador
¿Qué es la estabilización de la imagen y el acelerador
- La estabilización de imagen
de manera que la función durante algún tiempo después de que el evento de disparo y luego la ejecución de parada - Estrangulando
función let a una frecuencia fija de gatillo
¿Por acelerador sacudida
Cuando damos un botón o mover el ratón para añadir la hora del evento correspondiente, si no requiere respuesta en tiempo real, puede utilizar la estabilización de imagen, estrangulando a optimizar el rendimiento de la página
html
<button id="add">点击加一</button>
<label id="addLable" for="add"></label>
js
let count = 0;
const add = document.querySelector('#add');
const addLabel = document.querySelector('#addLable');
add.addEventListener('click', () => {
addLable.innerHTML = ++count;
});
Agitar
El principio es dejar que la función anti-vibración permite que la función de ejecución de retardo, si se activan durante un evento nuevo, cancelar el plan original retrasó
html
<button id="add1">防抖加一</button>
<label id="addLable1" for="add1"></label>
js
let count1 = 0;
const add1 = document.querySelector('#add1');
const addLabel1 = document.querySelector('#addLable1');
let timeout;
const add1Click = function() {
addLabel1.innerHTML = ++count1;
};
add1.addEventListener('click', () => {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(add1Click, 500);
});
código más elegante
para conocer la razón detrás, puede ayudarnos a lograr con biblioteca de herramientas lodash, mirando más conveniente y simple
_.debounce (FUNC, tiempo de espera)
lodash web oficial
let count1 = 0;
const add1 = document.querySelector('#add1');
const addLabel1 = document.querySelector('#addLable1');
let timeout;
const add1Click = function() {
addLabel1.innerHTML = ++count1;
};
// add1.addEventListener('click', () => {
// if (timeout) {
// clearTimeout(timeout);
// }
// timeout = setTimeout(add2Click, 500);
// });
add1.addEventListener('click', _.debounce(add1Click, 500));
estrangulación
función de gas dentro de un cierto tiempo, sólo el gatillo una vez
html
<button id="add2">节流加一</button>
<label id="addLable2" for="add2"></label>
js
let count2 = 0;
const add2 = document.querySelector('#add2');
const addLabel2 = document.querySelector('#addLable2');
const add2Click = function() {
addLabel2.innerHTML = ++count2;
};
let beAbleClick = true;
add2.addEventListener('click', () => {
if (!beAbleClick) {
return;
}
setTimeout(() => {
add2Click();
beAbleClick = true;
}, 500);
beAbleClick = false;
});
Más elegante
mismas herramientas lodash tienen métodos _.throttle disponible (func, tiempo de espera)
let count2 = 0;
const add2 = document.querySelector('#add2');
const addLabel2 = document.querySelector('#addLable2');
const add2Click = function() {
addLabel2.innerHTML = ++count2;
};
// let beAbleClick = true;
// add2.addEventListener('click', () => {
// if (!beAbleClick) {
// return;
// }
// setTimeout(() => {
// add2Click();
// beAbleClick = true;
// }, 500);
// beAbleClick = false;
// });
add2.addEventListener('click', _.throttle(add2Click, 500));
``