🧪داخل Performance Lab؛ چطور بفهمیم کدام بخش JavaScript کند است؟

یکی از اشتباهات رایج در بهینه‌سازی فرانت‌اند، حدس‌زدن محل مشکل است.

مثلاً تصور می‌کنیم حلقه‌های تو در تو عامل کندی هستند؛ درحالی‌که ممکن است زمان اصلی صرف درخواست‌های شبکه یا رندر مرورگر شود.

برای اندازه‌گیری بخش‌های مشخصی از کد، می‌توانیم از User Timing API استفاده کنیم.

  performance.mark("render-start");

  renderDashboard();

  performance.mark("render-end");

  performance.measure(
    "dashboard-render",
    "render-start",
    "render-end"
  );

  const result = performance
    .getEntriesByName("dashboard-render")
    .at(-1);

  console.log(result.duration);
  

با این روش می‌توانیم مدت اجرای بخش مشخصی از کد را اندازه‌گیری کنیم.

البته اگر renderDashboard عملیات ناهمگام داشته باشد، این اندازه‌گیری صرفاً زمان اجرای اولیه آن را نشان می‌دهد؛ نه لزوماً زمان تکمیل عملیات.

قاعده مهم: قبل از بهینه‌سازی، اندازه‌گیری کن؛ بعد تغییر بده و دوباره اندازه بگیر.

@CodeVerse_dev