프런트 엔드 성능 최적화 - 이미지 안정화 및 스로틀

이미지 안정화 스로틀이란

• 이미지 안정화
  되도록 트리거 이벤트 후 약간의 시간에 대한 기능과 다음 정류장 실행
• 스로틀
  고정 주파수에서 트리거 렛 함수

왜 흔들림 스로틀

우리가 버튼을 제공하거나 실시간 응답을 필요로하지 않을 경우, 해당 이벤트 시간을 추가하려면 마우스를 이동하면 페이지의 성능을 최적화하기 위해 조절, 이미지 안정화를 사용할 수 있습니다
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;
});

흔들

원칙은 손떨림 방지 기능은 새로운 이벤트 기간 동안 트리거 경우 지연 실행하는 기능은, 원래의 계획이 지연 취소 할 수 있도록하는 것입니다
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);
});

더 우아한 코드
근거의 뒤에 알고, 당신이 우리보다 편리하고 간단한 찾고, lodash 도구 라이브러리를 달성 할 수
_.debounce을 (FUNC, 제한 시간)
공식 웹 사이트를 lodash

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));

스로틀

특정 시간 내에 스로틀 기능 만 트리거 한 번
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;
});

더 우아
같은 lodash 도구는 방법을 사용할 수 _.throttle이 (FUNC, 시간 초과)

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));
``