frontend-interview-questions

1. چگونه بودجه عملکرد را برای یک برنامه React تعریف و اعمال می‌کنید؟

پاسخ:

بودجه عملکرد مجموعه‌ای از محدودیت‌ها برای معیارهای کلیدی عملکرد است. من آن را زود تعریف می‌کنم بر اساس نیازهای تجاری و دستگاه‌های هدف با استفاده از معیارهایی مثل:

• نخستین رنگ‌آمیزی محتوایی (FCP) < 2 ثانیه
• زمان تا تعاملی شدن (TTI) < 5 ثانیه
• حجم کل JS < 170KB (فشرده‌شده با gzip)
• حجم تصویر در هر مسیر < 300KB

ابزارهای اعمال:

• lighthouse-ci برای آستانه‌های معیار
• پیکربندی performance وب‌پک:

performance: {
  maxEntrypointSize: 250000,
  maxAssetSize: 250000,
},

2. رویکرد شما برای ممیزی یک برنامه React در برابر بودجه عملکرد در طول توسعه چیست؟

پاسخ:

من از ابزارهای خودکار و دستی در جریان‌های کاری توسعه استفاده می‌کنم:

• Lighthouse (دستی یا از طریق CI با lighthouse-ci)
• Webpack Bundle Analyzer برای ممیزی حجم JS
• React Profiler برای شناسایی رندرهای غیرضروری
• Chrome DevTools برای TTI واقعی، جابجایی‌های چیدمان

معیارها را در بررسی‌های PR ادغام می‌کنم تا پاسخگویی تضمین شود.

3. چگونه توسعه ویژگی‌ها را با حفظ بودجه عملکرد در یک پروژه React متعادل می‌کنید؟

پاسخ:

تعادل از طریق محافظ‌ها و اولویت‌ها:

• تنظیم هشدارهای بودجه در CI تا پس‌رفت‌های عملکرد زودهنگام ظاهر شوند
• تشویق به تقسیم کد، بارگذاری تنبل، و هیدراتاسیون تدریجی برای ویژگی‌های جدید
• مشارکت دادن محصول در معاوضه‌های عملکرد در طول برنامه‌ریزی

من از عملکرد به‌عنوان یک نیاز غیرکارکردی دفاع می‌کنم، نه یک فکر بعدی.

4. استراتژی شما برای بهینه‌سازی اسکریپت‌های شخص ثالث در چارچوب بودجه عملکرد چیست؟

پاسخ:

1. ممیزی ضرورت هر اسکریپت (فقط از آنچه ارزش افزوده دارد استفاده کنید).
2. بارگذاری اسکریپت‌ها به‌صورت غیرهمزمان یا تأخیری:

<script src="chat.js" async></script>

1. انتقال به ادغام‌های سمت سرور (مثل پروکسی تحلیل) در صورت امکان.
2. استفاده از وب ورکرها برای جداسازی کارهای سنگین از ریسمان اصلی.
3. استفاده از Subresource Integrity (SRI) و preconnect برای تحویل سریع‌تر.

5. چگونه بررسی‌های بودجه عملکرد را در یک خط لوله CI/CD برای یک برنامه React ادغام می‌کنید؟

پاسخ:

• استفاده از lighthouse-ci در CI برای شکست دادن ساخت‌ها هنگام نقض بودجه‌ها:

lighthouse-ci:
  script: lhci autorun

• افزودن بررسی‌های حجم بسته با ابزارهایی مثل size-limit:

"scripts": {
  "size-check": "size-limit"
}

• ادغام ردیابی Web Vitals (از طریق @vercel/web-vitals) در تولید برای بینش‌های پس از استقرار.

6. رویکرد شما برای بهینه‌سازی تصاویر و دارایی‌ها در یک برنامه React برای رعایت بودجه عملکرد چیست؟

پاسخ:

• ارائه تصاویر در فرمت‌های مدرن مثل WebP یا AVIF.
• استفاده از srcset پاسخ‌گو برای رزولوشن‌های مختلف دستگاه.
• بارگذاری تنبل تصاویر با loading="lazy" یا react-lazyload.
• استفاده از ابزارهایی مثل image-webpack-loader:

{
  loader: 'image-webpack-loader',
  options: { mozjpeg: { progressive: true } }
}

• برای سایت‌های استاتیک، ابزارهایی مثل کامپوننت تصویر Next.js اکثر این‌ها را به‌صورت خودکار مدیریت می‌کنند.

7. چگونه زمان تا تعاملی شدن (TTI) را در یک برنامه React اندازه‌گیری و بهبود می‌دهید؟

پاسخ:

• اندازه‌گیری با Lighthouse، WebPageTest، و نظارت بر کاربران واقعی (RUM).
• بهبود از طریق:
  • تقسیم کد با React.lazy/Suspense
  • تأخیر JS غیربحرانی
  • اولویت‌بندی محتوای بالای صفحه
  • استفاده از رندر سمت سرور (SSR) + تکنیک‌های تأخیر هیدراتاسیون

const HeavyComponent = React.lazy(() => import('./Heavy'));

8. فرآیند شما برای شناسایی و حذف منابع مسدودکننده رندر در یک برنامه React چیست؟

پاسخ:

1. ممیزی با Lighthouse/DevTools برای مسیرهای بحرانی مسدودشده.
2. تأخیر یا پیش‌بارگذاری فونت‌ها و استایل‌ها:

<link rel="preload" as="style" href="styles.css" />

1. به حداقل رساندن و درون‌خطی کردن CSS بحرانی.
2. بارگذاری JS غیربحرانی با defer یا async.

پلاگین‌های وب‌پک مثل mini-css-extract-plugin + استخراج‌کننده‌های CSS بحرانی به خودکارسازی این کمک می‌کنند.

9. چگونه یک تیم را در مورد رعایت بودجه عملکرد در یک کدبیس React آموزش می‌دهید؟

پاسخ:

• ایجاد یک دفترچه عملکرد مشترک (ابزارها، بودجه‌ها، بهترین روش‌ها).
• جاسازی گزارش‌های Lighthouse و حجم بسته در بررسی‌های PR.
• برگزاری جلسات جفتی عملکرد و بررسی‌های کد.
• برجسته کردن پس‌رفت‌ها در بازنگری‌ها.
• نمایش موفقیت‌ها (مثل بهبودهای TTI) برای ساخت فرهنگ اولویت‌دهی به عملکرد.

10. رویکرد شما برای حفظ بودجه عملکرد با مقیاس‌پذیری یک برنامه React در طول زمان چیست؟

• عملکرد را به‌عنوان یک قرارداد زنده در نظر بگیرید، بودجه‌ها را هر سه ماه بازبینی کنید.
• استفاده از ابزارهای RUM (مثل SpeedCurve، NewRelic) برای نظارت بر عملکرد واقعی.
• نسخه‌بندی و ردیابی پس‌رفت‌ها از طریق داشبوردهای CI.
• تنظیم قوانین برای اسپرینت‌های بدهی فنی و ممیزی‌های دوره‌ای بسته.
• نگه داشتن یک بک‌لاگ عملکرد اختصاصی برای رفع انحرافات بودجه.

This site is open source. Improve this page.