سؤالات مصاحبه طراحی سیستم فرانت‌اند سطح میدل (50 سؤال)

Question 1

نقطه قوت رایج SPA چیست؟

Accepted Answer

نویگیشن سریع client-side بدون full reload

Answer

SEO همیشه بهتر از MPA بدون هیچ کاری

Answer

صفر بودن JS

Answer

عدم نیاز به routing

Question 2

برای access token حساس، کدام رویکرد امن‌تر است؟

Accepted Answer

HttpOnly Secure cookie (و/یا memory + refresh)

Answer

ذخیره در localStorage بدون محافظت

Answer

گذاشتن token در URL همیشه

Answer

لاگ کردن token در console

Question 3

Micro-frontends چه زمانی بیشتر توجیه دارند؟

Accepted Answer

تیم‌های مستقل و codebase خیلی بزرگ

Answer

همیشه برای لندینگ تک‌صفحه‌ای کوچک

Answer

وقتی فقط یک توسعه‌دهنده دارید و می‌خواهید پیچیدگی اضافه کنید

Answer

هرگز در هیچ مقیاسی

Question 4

برای چت دوطرفه بلادرنگ کدام مناسب‌تر است؟

Accepted Answer

WebSocket

Answer

Polling هر ۱۰ ثانیه

Answer

Server-Sent Events

Answer

ایمیل

Question 5

برای retry درخواست‌های ناموفق، کدام بهتر است؟

Accepted Answer

Exponential backoff با jitter و سقف تعداد تلاش

Answer

تلاش بی‌وقفه و فوری

Answer

هرگز retry نکن

Answer

رفرش کامل صفحه

Question 6

چرا cursor pagination برای feed بهتر از offset است؟

Accepted Answer

با درج آیتم جدید، آیتم تکراری یا جاافتاده ایجاد نمی‌شود

Answer

پیاده‌سازی آن همیشه ساده‌تر است

Answer

پرش مستقیم به صفحه ۵۰ را ممکن می‌کند

Answer

نیازی به index دیتابیس ندارد

Question 7

ابزارهایی مثل Sentry در فرانت چه کاری انجام می‌دهند؟

Accepted Answer

ثبت خطاهای واقعی کاربران با stack trace (از طریق source map) و context

Answer

تست واحد خودکار

Answer

فشرده‌سازی تصاویر

Answer

مدیریت state

Question 8

Feature flag چه کمکی می‌کند؟

Accepted Answer

جدا کردن deploy از release، rollout تدریجی و خاموش کردن سریع

Answer

حذف نیاز به تست

Answer

کاهش خودکار bundle

Answer

رمزنگاری کد

Question 9

چطور مطمئن شویم کاربران بعد از deploy نسخه جدید JS را می‌گیرند؟

Accepted Answer

نام فایل با hash محتوا (content hashing)

Answer

از کاربر بخواهیم cache را پاک کند

Answer

غیرفعال کردن کامل cache

Answer

تغییر دامنه در هر deploy

Question 10

هدر `Cache-Control: max-age=60, stale-while-revalidate=300` چه رفتاری دارد؟

Accepted Answer

تا ۶۰ ثانیه تازه است؛ تا ۵ دقیقه بعد نسخهٔ قدیمی فوراً سرو و در پس‌زمینه به‌روز می‌شود

Answer

تا ۶۰ ثانیه cache نمی‌شود و بعد از آن ۵ دقیقه cache می‌شود

Answer

پس از ۶۰ ثانیه کاربر باید تا دریافت پاسخ جدید منتظر بماند

Answer

فقط CDN آن را cache می‌کند و مرورگر آن را نادیده می‌گیرد

Question 11

هدر `Vary: Accept-Encoding` در پاسخ چه اثری روی cache دارد؟

Accepted Answer

cache برای هر مقدار `Accept-Encoding` نسخهٔ جداگانه نگه می‌دارد

Answer

cache را برای آن پاسخ کاملاً غیرفعال می‌کند

Answer

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

Answer

باعث می‌شود CDN هدرهای درخواست را حذف کند

Question 12

برای به‌روزرسانی فایل‌های استاتیک روی CDN، چرا URL نسخه‌دار معمولاً بهتر از purge است؟

Accepted Answer

purge در همهٔ edgeها و cache مرورگرها فوری و قطعی نیست؛ URL جدید این مشکل را ندارد

Answer

purge کردن CDN همیشه هزینهٔ زیادی دارد و ممنوع است

Answer

URL نسخه‌دار حجم فایل را کاهش می‌دهد

Answer

CDNها از purge پشتیبانی نمی‌کنند

Question 13

HTTP/3 (روی QUIC) کدام مشکل HTTP/2 را در شبکه‌های پر از packet loss بهتر حل می‌کند؟

Accepted Answer

head-of-line blocking در سطح TCP که همهٔ streamها را متوقف می‌کرد

Answer

عدم پشتیبانی HTTP/2 از فشرده‌سازی هدر

Answer

عدم امکان multiplexing در HTTP/2

Answer

نیاز HTTP/2 به یک اتصال جدا برای هر فایل

Question 14

تفاوت `rel="preload"` و `rel="prefetch"` چیست؟

Accepted Answer

preload برای منبع حیاتی صفحهٔ فعلی با اولویت بالا؛ prefetch برای ناوبری بعدی با اولویت پایین

Answer

preload فقط برای تصاویر و prefetch فقط برای فونت‌هاست

Answer

preload منبع را اجرا می‌کند ولی prefetch فقط DNS را resolve می‌کند

Answer

هر دو یکسان‌اند و فقط نامشان فرق دارد

Question 15

تصویر hero به‌صورت `background-image` در CSS تعریف شده و LCP بد است. علت اصلی چیست؟

Accepted Answer

مرورگر تصویر را تا دانلود و parse شدن CSS کشف نمی‌کند

Answer

تصاویر background هرگز در LCP حساب نمی‌شوند

Answer

CSS اجازهٔ فشرده‌سازی تصاویر را نمی‌دهد

Answer

تصاویر background همیشه بدون cache دانلود می‌شوند

Question 16

کلیک روی فیلتر یک لیست بزرگ ۴۰۰ms طول می‌کشد تا UI به‌روز شود. مؤثرترین راه بهبود INP چیست؟

Accepted Answer

فوراً بازخورد بصری بدهید و کار سنگین را به تکه‌های کوچک بشکنید و yield کنید

Answer

کل لیست را در یک تابع هم‌زمان بزرگ‌تر پردازش کنید

Answer

رویداد click را با `setInterval` شبیه‌سازی کنید

Answer

تعداد فونت‌های صفحه را افزایش دهید

Question 17

با وجود `font-display: swap`، تعویض فونت هنوز CLS ایجاد می‌کند. راه‌حل دقیق‌تر چیست؟

Accepted Answer

تنظیم fallback با `size-adjust` و `ascent-override` تا ابعادش با فونت اصلی یکی شود

Answer

حذف کامل فونت fallback از `font-family`

Answer

بارگذاری فونت با JavaScript پس از رویداد `load`

Answer

تبدیل فونت به تصویر PNG

Question 18

ویجت چت third-party حدود ۵۰۰KB JS دارد و INP را خراب کرده است. رویکرد مناسب چیست؟

Accepted Answer

یک facade سبک نمایش دهید و اسکریپت واقعی را فقط پس از تعامل کاربر لود کنید

Answer

اسکریپت را به‌صورت هم‌زمان در `<head>` قرار دهید تا زودتر آماده شود

Answer

اسکریپت را دو بار لود کنید تا مطمئن شوید کار می‌کند

Answer

CSP را غیرفعال کنید تا اسکریپت سریع‌تر اجرا شود

Question 19

صفحه‌ای SSR شده منتظر یک API کند (۲ ثانیه) برای بخش پیشنهادها می‌ماند. streaming SSR با Suspense چه کمکی می‌کند؟

Accepted Answer

بقیهٔ HTML فوراً ارسال و آن بخش بعداً در همان پاسخ stream می‌شود

Answer

API کند را به‌طور خودکار سریع‌تر می‌کند

Answer

آن بخش را برای همیشه از صفحه حذف می‌کند

Answer

صفحه را به رندر کامل سمت کلاینت تبدیل می‌کند

Question 20

یک سایت محتوایی SSR شده LCP خوب ولی INP و TBT بدی دارد. محتمل‌ترین علت چیست؟

Accepted Answer

hydration سنگین کل صفحه با JavaScript زیاد، حتی برای بخش‌های غیرتعاملی

Answer

HTML ارسالی از سرور خیلی کوچک است

Answer

CDN فایل‌های HTML را cache کرده است

Answer

تصاویر صفحه با فرمت AVIF هستند

Question 21

برای صفحات محصول یک فروشگاه با ۱۰۰ هزار محصول که قیمت‌ها چند بار در روز تغییر می‌کنند، کدام رویکرد متعادل‌تر است؟

Accepted Answer

رندر استاتیک با revalidation زمان‌دار یا on-demand پس از تغییر قیمت

Answer

build کامل همهٔ ۱۰۰ هزار صفحه پس از هر تغییر قیمت

Answer

رندر کامل سمت کلاینت بدون HTML اولیه

Answer

SSR بدون هیچ cache برای هر درخواست

Question 22

رندر صفحه در edge نزدیک کاربر انجام می‌شود ولی دیتابیس فقط در یک region است و صفحه ۴ query متوالی دارد. نتیجه چیست؟

Accepted Answer

هر query رفت‌وبرگشت طولانی دارد و ممکن است از رندر در region نزدیک دیتابیس کندتر شود

Answer

edge همهٔ queryها را به‌طور خودکار cache و موازی می‌کند

Answer

latency کاملاً صفر می‌شود چون edge نزدیک کاربر است

Answer

دیتابیس به‌طور خودکار به همهٔ edgeها replicate می‌شود

Question 23

اپ موبایل و وب هر صفحه را با ۶ درخواست به میکروسرویس‌های مختلف می‌سازند. الگوی BFF چه کمکی می‌کند؟

Accepted Answer

یک لایهٔ سرور مخصوص هر کلاینت داده‌ها را تجمیع و متناسب با نیاز آن شکل می‌دهد

Answer

همهٔ میکروسرویس‌ها را در یک دیتابیس واحد ادغام می‌کند

Answer

نیاز به احراز هویت را از بین می‌برد

Answer

کلاینت را مستقیماً به دیتابیس وصل می‌کند

Question 24

کامپوننت والد داده را fetch می‌کند و فرزندانش فقط پس از رندر شدن، fetch خودشان را شروع می‌کنند. این الگو چه مشکلی دارد؟

Accepted Answer

waterfall درخواست؛ درخواست‌های مستقل به‌جای موازی، پشت سر هم اجرا می‌شوند

Answer

درخواست‌ها هرگز cache نمی‌شوند

Answer

CORS برای درخواست‌های فرزند فعال نمی‌شود

Answer

حجم bundle به‌طور خودکار دو برابر می‌شود

Question 25

چند کامپوننت در یک صفحه هم‌زمان پروفایل کاربر را لازم دارند. کتابخانه‌هایی مثل TanStack Query یا SWR چه مزیتی دارند؟

Accepted Answer

dedupe درخواست‌های هم‌زمان با یک cache key مشترک و revalidation کنترل‌شده

Answer

ذخیرهٔ دائمی داده در دیتابیس سرور

Answer

حذف نیاز به API برای داده‌های کاربر

Answer

تبدیل خودکار REST به WebSocket

Question 26

در پیاده‌سازی optimistic update برای دکمهٔ لایک، چه چیزی ضروری است؟

Accepted Answer

نگه‌داشتن snapshot قبلی و rollback در صورت شکست درخواست

Answer

صبر برای پاسخ سرور قبل از تغییر UI

Answer

غیرفعال کردن مدیریت خطا برای سرعت بیشتر

Answer

رفرش کامل صفحه پس از هر کلیک

Question 27

کاربر سریع بین تب‌های «سفارش‌ها» و «پرداخت‌ها» جابه‌جا می‌شود و گاهی داده‌های تب قبلی نمایش داده می‌شود. علت و راه‌حل چیست؟

Accepted Answer

race condition پاسخ‌ها؛ درخواست قبلی را با `AbortController` لغو یا پاسخ کهنه را نادیده بگیرید

Answer

cache مرورگر خراب است؛ باید کل cache را غیرفعال کرد

Answer

سرور کند است؛ باید timeout را بیشتر کرد

Answer

مشکل از CSS است؛ باید `z-index` را تغییر داد

Question 28

برای داشبورد نمایش لاگ‌های زنده که کلاینت فقط داده دریافت می‌کند و پشت proxyهای سازمانی است، چرا SSE گزینهٔ خوبی است؟

Accepted Answer

روی HTTP عادی کار می‌کند، reconnect خودکار و `Last-Event-ID` دارد

Answer

از داده‌های باینری با کارایی بیشتر از WebSocket پشتیبانی می‌کند

Answer

امکان ارسال پیام از کلاینت به سرور روی همان کانال را دارد

Answer

به هیچ سروری نیاز ندارد و peer-to-peer است

Question 29

اتصال WebSocket اپ چت ۳۰ ثانیه قطع و دوباره وصل می‌شود. برای جلوگیری از گم شدن پیام‌ها چه باید کرد؟

Accepted Answer

آخرین شناسه یا sequence دریافتی را بفرستید و پیام‌های جاافتاده را از سرور بگیرید

Answer

فرض کنید هیچ پیامی در این مدت ارسال نشده است

Answer

صفحه را رفرش کنید تا همه چیز از نو لود شود

Answer

اتصال را تا ابد بدون reconnect رها کنید

Question 30

refresh token rotation چه مزیت امنیتی دارد؟

Accepted Answer

هر refresh token یک‌بارمصرف است و استفادهٔ مجدد از توکن دزدیده‌شده شناسایی می‌شود

Answer

access token را برای همیشه معتبر نگه می‌دارد

Answer

نیاز به HTTPS را از بین می‌برد

Answer

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

Question 31

access token منقضی شده و ۵ درخواست هم‌زمان پاسخ `401` می‌گیرند. پیاده‌سازی درست interceptor چیست؟

Accepted Answer

فقط یک refresh انجام شود و بقیهٔ درخواست‌ها منتظر همان Promise بمانند و سپس retry شوند

Answer

هر درخواست جداگانه refresh token را فراخوانی کند

Answer

همهٔ درخواست‌ها را رها کرده و خطا نمایش داده شود

Answer

کاربر را بلافاصله logout کرد

Question 32

cookie سشن با `SameSite=Lax` تنظیم شده است. کدام درخواست cross-site همچنان cookie را ارسال می‌کند؟

Accepted Answer

ناوبری سطح بالا با `GET`، مثل کلیک روی لینک از سایت دیگر

Answer

ارسال فرم `POST` از سایت دیگر

Answer

درخواست `fetch` از سایت دیگر

Answer

بارگذاری صفحه درون `<iframe>` در سایت دیگر

Question 33

هر درخواست API با هدر `Authorization` قبلش یک درخواست `OPTIONS` دارد و latency را دو برابر کرده است. راه بهینه چیست؟

Accepted Answer

تنظیم `Access-Control-Max-Age` برای cache پاسخ preflight، یا سرو API از همان origin

Answer

حذف هدر `Authorization` و ارسال token در query string

Answer

تنظیم `Access-Control-Allow-Origin: *` همراه با credentials

Answer

غیرفعال کردن CORS در مرورگر کاربران

Question 34

Subresource Integrity (ویژگی `integrity` روی `<script>`) در برابر چه چیزی محافظت می‌کند؟

Accepted Answer

اجرای فایلی که روی CDN عمومی دست‌کاری شده و hash آن تغییر کرده است

Answer

حملات CSRF روی فرم‌های سایت

Answer

دانلود کند فایل از CDN دور

Answer

XSS ناشی از ورودی کاربر

Question 35

برای جلوگیری از clickjacking روی صفحهٔ تنظیمات حساب، کدام هدر مناسب است؟

Accepted Answer

`Content-Security-Policy: frame-ancestors 'self'`

Answer

`Access-Control-Allow-Origin: *`

Answer

`Cache-Control: public`

Answer

`Referrer-Policy: unsafe-url`

Question 36

در Service Worker، کدام ترکیب استراتژی cache معمولاً درست است؟

Accepted Answer

network-first برای HTML و cache-first برای assetهای hash‌دار

Answer

cache-first برای HTML و network-only برای assetهای hash‌دار

Answer

cache-only برای پاسخ‌های API شخصی کاربر

Answer

network-only برای همه چیز تا داده همیشه تازه باشد

Question 37

پس از deploy نسخهٔ جدید، کاربران PWA همچنان نسخهٔ قدیمی را می‌بینند. علت رایج چیست؟

Accepted Answer

Service Worker جدید در حالت `waiting` می‌ماند تا همهٔ تب‌های قدیمی بسته شوند

Answer

CDN فایل‌ها را برای همیشه cache کرده و قابل تغییر نیست

Answer

مرورگرها Service Worker را فقط سالی یک بار به‌روز می‌کنند

Answer

PWAها نمی‌توانند به‌روزرسانی شوند و باید دوباره نصب شوند

Question 38

برای ذخیرهٔ ۵۰MB داده و هزاران رکورد قابل جستجو در اپ offline، چرا IndexedDB بهتر از `localStorage` است؟

Accepted Answer

ظرفیت بیشتر، API غیرهم‌زمان، index و ذخیرهٔ ساختاریافته دارد

Answer

داده‌ها را خودکار با سرور همگام‌سازی می‌کند

Answer

داده‌ها را با هر درخواست HTTP به سرور می‌فرستد

Answer

داده‌ها هرگز توسط مرورگر پاک نمی‌شوند

Question 39

چرا ساختن متن با `count + " item" + (count > 1 ? "s" : "")` برای اپ چندزبانه مشکل دارد؟

Accepted Answer

زبان‌ها قواعد جمع متفاوتی دارند؛ باید از ICU MessageFormat یا `Intl.PluralRules` استفاده کرد

Answer

چون concatenation رشته در JavaScript کند است

Answer

چون اعداد را نمی‌توان در رشته‌ها قرار داد

Answer

چون فقط زبان انگلیسی جمع دارد

Question 40

برای پشتیبانی هم‌زمان از RTL و LTR بدون نوشتن دو فایل CSS، کدام رویکرد بهتر است؟

Accepted Answer

استفاده از logical properties مثل `margin-inline-start` و `padding-inline-end`

Answer

استفاده از `margin-left` و تغییر دستی آن با JavaScript

Answer

چرخاندن کل صفحه با `transform: scaleX(-1)`

Answer

استفاده از `position: absolute` برای همهٔ المان‌ها

Question 41

فایل ترجمه‌ها برای ۱۲ زبان و کل اپ ۸۰۰KB شده و در bundle اصلی است. رویکرد بهتر چیست؟

Accepted Answer

فقط زبان فعال را لود کنید و ترجمه‌ها را بر اساس route یا namespace تقسیم کنید

Answer

همهٔ زبان‌ها را در `localStorage` ذخیره کنید

Answer

ترجمه‌ها را در زمان اجرا با یک API ترجمهٔ ماشینی بسازید

Answer

تعداد زبان‌ها را به یک زبان کاهش دهید

Question 42

تیم axe را در CI اضافه کرده و هیچ خطایی گزارش نمی‌شود. چه نتیجه‌ای می‌توان گرفت؟

Accepted Answer

فقط بخشی از مشکلات پوشش داده شده؛ تست کیبورد و screen reader هنوز لازم است

Answer

سایت کاملاً دسترس‌پذیر و مطابق WCAG است

Answer

دیگر نیازی به HTML معنایی نیست

Answer

axe همهٔ مشکلات کنتراست و فوکوس را تضمین می‌کند

Question 43

کتابخانهٔ کامپوننت مشترک ۱۵ تیم باید prop یک کامپوننت را تغییر دهد. رویکرد درست چیست؟

Accepted Answer

deprecate با هشدار، نسخهٔ major طبق semver و ارائهٔ codemod برای مهاجرت

Answer

تغییر بی‌صدا در یک نسخهٔ patch

Answer

کپی کردن کامپوننت برای هر تیم به‌صورت جداگانه

Answer

قفل کردن کتابخانه و عدم تغییر برای همیشه

Question 44

CI در یک monorepo با ۳۰ پکیج ۲۵ دقیقه طول می‌کشد، حتی برای تغییر یک خط. چه کمکی بیشترین اثر را دارد؟

Accepted Answer

اجرای فقط پکیج‌های affected و cache خروجی taskها (مثل Turborepo یا Nx)

Answer

حذف همهٔ تست‌ها از CI

Answer

build کردن همهٔ پکیج‌ها دو بار برای اطمینان

Answer

تقسیم monorepo به یک ریپازیتوری برای هر فایل

Question 45

پس از هر deploy، برخی کاربرانی که تب را باز گذاشته‌اند هنگام ناوبری خطای `ChunkLoadError` می‌گیرند. علت چیست؟

Accepted Answer

chunkهای build قبلی از سرور حذف شده‌اند و نسخهٔ قدیمی اپ آن‌ها را درخواست می‌کند

Answer

مرورگر کاربران از ES modules پشتیبانی نمی‌کند

Answer

CDN فایل‌های جدید را خیلی سریع منتشر کرده است

Answer

حجم chunkها برای HTTP/2 خیلی کوچک است

Question 46

در راه‌اندازی ابزار مانیتورینگ خطای فرانت‌اند برای اپ پرترافیک، کدام تنظیم مهم است؟

Accepted Answer

sampling رویدادها، تگ release و حذف داده‌های شخصی قبل از ارسال

Answer

ارسال کامل محتوای فرم‌ها و رمزها برای دیباگ بهتر

Answer

ثبت هر رویداد mousemove به‌عنوان خطا

Answer

غیرفعال کردن source map برای کاهش هزینه

Question 47

حجم JS اپ در یک سال به تدریج ۴۰٪ افزایش یافته بدون اینکه کسی متوجه شود. بهترین پیشگیری چیست؟

Accepted Answer

performance budget در CI که با عبور از حد مجاز PR را fail کند

Answer

بررسی دستی حجم bundle یک بار در سال

Answer

حذف همهٔ کتابخانه‌های third-party

Answer

افزایش timeout سرور

Question 48

تصویر کارت در دسکتاپ ۳۰۰px عرض دارد ولی با `srcset` (بدون `sizes`) نسخهٔ ۱۶۰۰px دانلود می‌شود. چرا؟

Accepted Answer

بدون `sizes` مرورگر عرض تصویر را `100vw` فرض می‌کند

Answer

مرورگر همیشه بزرگ‌ترین نسخهٔ `srcset` را انتخاب می‌کند

Answer

`srcset` فقط روی موبایل کار می‌کند

Answer

CDN تصویر کوچک را حذف کرده است

Question 49

مزیت canary release برای یک تغییر بزرگ فرانت‌اند چیست؟

Accepted Answer

نسخهٔ جدید ابتدا به درصد کمی از کاربران می‌رسد و با پایش متریک‌ها گسترش یا rollback می‌شود

Answer

نسخهٔ جدید هم‌زمان برای همهٔ کاربران منتشر می‌شود

Answer

نیاز به تست قبل از انتشار را حذف می‌کند

Answer

کد قدیمی بلافاصله از همهٔ سرورها پاک می‌شود

Question 50

گاهی دکمهٔ «ثبت» برای همیشه در حالت loading می‌ماند چون یک درخواست `fetch` هیچ‌وقت پاسخ نمی‌گیرد. راه‌حل درست چیست؟

Accepted Answer

تعیین timeout صریح با `AbortSignal.timeout()` و نمایش خطای قابل retry

Answer

تکیه بر timeout پیش‌فرض کوتاه `fetch`

Answer

حذف حالت loading از دکمه

Answer

ارسال هم‌زمان همان درخواست ۱۰ بار

طراحی سیستم فرانت‌اند · میدل · 50

نقطه قوت رایج SPA چیست؟