وقتی روی فرم جستجو هر keypress مستقیماً درخواست به سرور بفرستد، هم backend تحت فشار می‌رود هم UI کند می‌شود. یک الگوی ساده با debounce کمک می‌کند فقط وقتی کاربر چند لحظه تایپ را متوقف کرد، درخواست زده شود. 🔎

ایده این است: هر بار کاربر تایپ می‌کند، یک timeout قبلی لغو می‌شود و یک جدید تنظیم می‌شود. اگر تا مثلاً ۴۰۰ms چیزی تایپ نشد، تابع واقعی اجرا می‌شود (فراخوانی API، فیلتر لیست و ...).

✅ نتیجه:
- درخواست‌های کمتر به سرور
- UI روان‌تر
- کد تمیزتر نسبت به if/elseهای تکراری روی eventها

یک پیاده‌سازی ساده و عمومی در JS:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const searchInput = document.querySelector('#search');

function handleSearch(e) {
  const q = e.target.value.trim();
  if (!q) return;
  // call API, fetch data, etc.
  console.log('Searching for:', q);
}

const debouncedSearch = debounce(handleSearch, 400);

searchInput.addEventListener('input', debouncedSearch);

بهتر است delay را بر اساس نوع ورودی تنظیم شود؛ برای جستجوی live معمولاً بین ۳۰۰ تا ۵۰۰ms معقول است. در UIهای سنگین (لیست‌های بزرگ، نمودارها و ...) debounce می‌تواند تفاوت محسوسی در performance ایجاد کند. 🚀

برای مطالعه بیشتر درباره الگوهای بهینه‌سازی eventها و performance در مرورگر:
MDN - Debouncing events

امتحان روی یک input ساده در پروژه فعلی کافی است تا تاثیرش روی روان بودن تجربه کاربری دیده شود. 😉

🔖 #Web #وب #Frontend #Backend #debounce #javascript #frontend #performance #web_dev

👤 Developix

💎 Channel: @DevelopixWeb

🚀 ترفند کوچک برای لود سریع‌تر JS با defer

خیلی وقت‌ها اسکریپت‌های سنگین باعث می‌شوند لود اولیه صفحه کند شود و First Paint دیر اتفاق بیفته. یک راه ساده و امن برای بهتر شدن تجربه کاربر، استفاده از attribute به‌دردبخور defer در اسکریپت‌های خارجی است. 😎

وقتی روی <script> از defer استفاده می‌شود:
- HTML بدون توقف پارس می‌شود ✅
- فایل JS در پس‌زمینه دانلود می‌شود ✅
- اجرای JS بعد از کامل شدن HTML و قبل از DOMContentLoaded انجام می‌شود ✅

<!-- خوب برای اسکریپت‌های غیرضروری در لحظه اول -->
<script src="/static/js/app.js" defer></script>

<!-- اگر به ترتیب اجرا نیاز داری، همین ترتیب tagها رعایت می‌شود -->
<script src="/static/js/vendor.js" defer></script>
<script src="/static/js/main.js" defer></script>

برخلاف async، ترتیب اجرای اسکریپت‌ها با defer حفظ می‌شود، که برای بیشتر پروژه‌های Web امن‌تر و قابل‌پیش‌بینی‌تر است. 🌱

مرجع بیشتر: MDN – <script> element

یک بار روی اسکریپت‌های عمومی و analytics امتحان شود، تاثیرش روی سرعت حس می‌شود. ⚡️

🔖 #Web #وب #Frontend #Backend #HTML #script #defer #Performance #Frontend #Web

👤 Developix

💎 Channel: @DevelopixWeb

اسکرول‌ صفحات روی موبایل اگه کلی event listener مثل touchstart و wheel داشته باشه، راحت لگ می‌زنه. یه ترفند ساده توی جاوااسکریپت کمک می‌کنه این مشکل خیلی کمتر بشه: استفاده از passive event listener ✅

به طور پیش‌فرض، مرورگر مجبور می‌شه صبر کنه ببینه توی handler از event.preventDefault() استفاده می‌کنی یا نه؛ همین مکث، اسکرول رو کند می‌کنه. اگه به مرورگر بگی این listener «passive» هست، دیگه صبر نمی‌کنه و اسکرول رو روان انجام می‌ده. 🚀

// همیشه قبل از استفاده، پشتیبانی رو چک کن
const passiveIfSupported = (() => {
  let passive = false;
  try {
    const opts = Object.defineProperty({}, 'passive', {
      get() {
        passive = { passive: true };
      }
    });
    window.addEventListener('test', null, opts);
  } catch (e) {}
  return passive;
})();

window.addEventListener('scroll', handleScroll, passiveIfSupported);

function handleScroll(e) {
  // اینجا از e.preventDefault() استفاده نشه
}

هر جا فقط می‌خوای event رو بخونی و قصد preventDefault() نداری (مثل analytics روی اسکرول یا لمس)، استفاده از گزینه { passive: true } هم UX رو بهتر می‌کنه هم performance رو. ✨

مرجع: MDN - Passive event listeners

🔖 #Web #وب #Frontend #Backend #JavaScript #Performance #Frontend #Scroll #Event_Listener

👤 Developix

💎 Channel: @DevelopixWeb