JavaScript 성능 향상: 디바운싱 및 제한 이해

목차

• 디바운싱: 전략적 지연
  • 디바운싱 작동 방식
  • 디바운싱 예시
• 제한: 이벤트 빈도 제어
  • 제한 작동 방식
  • 제한 예시
• React에서 구현하기: 사용자 정의 후크를 사용한 디바운스 및 조절
  • 디바운싱을 위한 맞춤형 후크
  • 디바운스 후크 사용
  • 조절을 위한 맞춤형 후크
  • 스로틀 후크 사용
• 최종 생각

---

성능 최적화는 최신 웹 애플리케이션, 특히 검색창에 입력, 스크롤 또는 창 크기 조정과 같은 사용자 상호 작용이 포함된 애플리케이션에서 매우 중요합니다. 이러한 작업은 짧은 시간에 많은 함수 호출을 실행하여 성능을 저하시킬 수 있습니다.

이 문제를 완화하기 위해 두 가지 일반적인 기술은 디바운싱과 제한입니다. 이를 통해 함수가 호출되는 속도를 제어하여 더욱 원활하고 효율적인 환경을 조성할 수 있습니다.

디바운싱: 전략적 지연

디바운싱은 마지막 이벤트 트리거 이후 지정된 시간이 지날 때까지 함수 실행을 지연합니다. 이는 키를 누를 때마다 API 요청을 피하고 싶은 검색 입력과 같은 이벤트를 처리할 때 특히 유용합니다.

디바운싱 작동 방식

API 요청을 하기 전에 사용자가 300ms 동안 입력을 멈출 때까지 기다리는 검색 입력을 상상해 보세요. 디바운싱을 사용하면 사용자가 입력을 일시 중지한 후에만 함수가 실행되도록 하여 불필요한 API 호출을 방지할 수 있습니다.

디바운싱 예시

function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
function searchAPI() {
  console.log("API request made");
}
const debouncedSearch = debounce(searchAPI, 300);
debouncedSearch(); // Only triggers 300ms after the last call

여기서는 사용자가 300ms 동안 일시정지해야만 API 요청이 이루어집니다.

제한: 이벤트 빈도 제어

디바운싱과 달리 제한은 이벤트가 계속 트리거되더라도 지정된 간격마다 최대 한 번 함수가 호출되도록 합니다. 이 기술은 이벤트가 지속적으로 발생하는 창 크기 조정 또는 스크롤과 같은 시나리오에 이상적입니다.

조절 작동 방식

조절을 사용하면 정의된 기간(예: 200ms) 동안 함수가 한 번만 실행되어 반복되는 트리거로 인해 함수가 압도당하지 않도록 할 수 있습니다.

제한 예

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
function updateLayout() {
  console.log("Layout updated");
}
const throttledUpdate = throttle(updateLayout, 200);
window.addEventListener("resize", throttledUpdate);

이 예에서 레이아웃 업데이트 함수는 창 크기 조정 중에 200ms마다 한 번만 호출됩니다.

React에서 구현하기: 사용자 정의 후크를 사용한 디바운스 및 조절

React에서는 사용자 정의 후크를 사용하여 구성 요소 전체에서 디바운스 및 스로틀 기능을 재사용할 수 있습니다. 이는 모듈성을 강화하고 다양한 상호 작용에서 성능을 최적화합니다.

디바운싱을 위한 커스텀 후크

<p>import { useRef, useCallback } from "react";<br>
const useDebounce = (func, delay) => {<br>
  const timer = useRef(null);<br>
  return useCallback(<br>
    (...args) => {<br>
      if (timer.current) {<br>
        clearTimeout(timer.current);<br>
      }<br>
      timer.current = setTimeout(() => func(...args), delay);<br>
    },<br>
    [func, delay]<br>
  );<br>
};<br>
export default useDebounce;</p>

디바운스 후크 사용

<p>import React, { useState } from "react";<br>
import useDebounce from "./useDebounce";<br>
const SearchComponent = () => {<br>
  const [searchTerm, setSearchTerm] = useState("");</p>

<p>const fetchResults = (query) => {<br>
    console.log(Fetching results for </span><span class="p">${</span><span class="nx">query</span><span class="p">}</span><span class="s2">);<br>
    return new Promise((resolve) => setTimeout(resolve, 1000));<br>
  };<br>
  const debouncedFetch = useDebounce(fetchResults, 300);<br>
  const handleSearch = (e) => {<br>
    setSearchTerm(e.target.value);<br>
    debouncedFetch(e.target.value);<br>
  };<br>
  return <input value={searchTerm} onChange={handleSearch} placeholder="Search..." />;<br>
};<br>
export default SearchComponent;</p>

조절을 위한 맞춤형 후크

<p>import { useRef, useCallback } from "react";<br>
const useThrottle = (func, limit) => {<br>
  const lastRun = useRef(Date.now());<br>
  return useCallback(<br>
    (...args) => {<br>
      const now = Date.now();<br>
      if (now - lastRun.current >= limit) {<br>
        func(...args);<br>
        lastRun.current = now;<br>
      }<br>
    },<br>
    [func, limit]<br>
  );<br>
};<br>
export default useThrottle;</p>

스로틀 후크 사용

<p>import React, { useEffect } from "react";<br>
import useThrottle from "./useThrottle";</p>

<p>const ScrollComponent = () => {<br>
  const handleScroll = () => {<br>
    console.log("Scrolled!");<br>
  };<br>
  const throttledScroll = useThrottle(handleScroll, 500);<br>
  useEffect(() => {<br>
    window.addEventListener("scroll", throttledScroll);<br>
    return () => window.removeEventListener("scroll", throttledScroll);<br>
  }, [throttledScroll]);<br>
  return <div style={{ height: "200vh" }}>Scroll down to see the effect</div>;<br>
};<br>
export default ScrollComponent;</p>

최종 소감

디바운싱과 제한은 모두 최신 애플리케이션의 성능을 향상시키는 데 없어서는 안 될 기술입니다. 디바운싱은 검색 필드와 같은 입력에 이상적이지만 조절은 스크롤과 같은 빈도가 높은 이벤트에 가장 적합합니다. useDebounce 및 useThrottle과 같은 React의 사용자 정의 후크를 사용하면 앱 전반에 걸쳐 이러한 최적화를 쉽게 구현할 수 있어 보다 효율적이고 응답성이 뛰어난 경험을 보장할 수 있습니다.

위 내용은 JavaScript 성능 향상: 디바운싱 및 제한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!