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

Question 1

Core Web Vitals شامل کدام‌هاست؟

Accepted Answer

LCP، INP، CLS

Answer

فقط FPS بازی

Answer

فقط تعداد خطوط کد

Answer

فقط دمای CPU سرور

Question 2

نقش اصلی CDN برای فرانت چیست؟

Accepted Answer

cache کردن asset نزدیک کاربر برای latency کمتر

Answer

نوشتن منطق business روی کلاینت

Answer

جایگزین کامل دیتابیس

Answer

حذف HTTPS

Question 3

کدام روش bundle را کوچک‌تر می‌کند؟

Accepted Answer

code splitting و tree-shaking

Answer

اضافه کردن همه polyfillها بدون نیاز

Answer

import کل lodash همیشه

Answer

غیرفعال کردن فشرده‌سازی

Question 4

هدر `Cache-Control: max-age=31536000, immutable` برای چه فایل‌هایی مناسب است؟

Accepted Answer

assetهای hash‌دار مثل `app.3f9a.js`

Answer

فایل HTML اصلی

Answer

پاسخ API کاربر

Answer

صفحه لاگین

Question 5

`loading="lazy"` روی `<img>` چه می‌کند؟

Accepted Answer

دانلود تصویر را تا نزدیک شدن به viewport به تعویق می‌اندازد

Answer

کیفیت تصویر را کم می‌کند

Answer

تصویر را دیرتر روی سرور می‌سازد

Answer

تصویر را cache نمی‌کند

Question 6

Minification چه کاری انجام می‌دهد؟

Accepted Answer

حذف فاصله، کامنت و کوتاه کردن نام‌ها برای کاهش حجم

Answer

رمزنگاری کد برای امنیت

Answer

تبدیل JS به WebAssembly

Answer

حذف کدهای استفاده‌شده

Question 7

HTTPS در برابر چه چیزی محافظت می‌کند؟

Accepted Answer

شنود و دستکاری داده در مسیر (man-in-the-middle)

Answer

همه حملات XSS

Answer

باگ‌های منطق سرور

Answer

حملات DDoS

Question 8

مزیت اصلی GraphQL نسبت به REST از دید کلاینت؟

Accepted Answer

کلاینت دقیقاً فیلدهای لازم را در یک درخواست مشخص می‌کند

Answer

همیشه سریع‌تر از REST است

Answer

نیازی به سرور ندارد

Answer

cache کردن HTTP ساده‌تر است

Question 9

چرا ورودی جستجوی زنده را debounce می‌کنیم؟

Accepted Answer

برای کاهش تعداد درخواست به سرور هنگام تایپ

Answer

برای امن‌تر شدن جستجو

Answer

برای ذخیره در localStorage

Answer

چون مرورگر الزام می‌کند

Question 10

معیار LCP دقیقاً چه چیزی را اندازه می‌گیرد؟

Accepted Answer

زمان رندر بزرگ‌ترین تصویر یا بلوک متنی قابل‌مشاهده در viewport

Answer

زمان دانلود کامل همهٔ فایل‌های JavaScript صفحه

Answer

تعداد کل درخواست‌های شبکه تا لحظهٔ `load`

Answer

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

Question 11

رایج‌ترین دلیل CLS بالا در صفحه‌ای پر از تصویر چیست؟

Accepted Answer

تصاویری که `width` و `height` یا `aspect-ratio` ندارند

Answer

استفاده از فرمت WebP به جای JPEG

Answer

فعال بودن فشرده‌سازی gzip روی سرور

Answer

سرو کردن تصاویر از طریق CDN

Question 12

معیار INP چه جنبه‌ای از تجربهٔ کاربر را می‌سنجد؟

Accepted Answer

سرعت پاسخ بصری صفحه به کلیک، تپ و تایپ کاربر

Answer

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

Answer

میزان جابه‌جایی ناگهانی المان‌ها هنگام لود

Answer

حجم کل حافظهٔ مصرفی تب مرورگر

Question 13

TTFB به چه زمانی اشاره دارد؟

Accepted Answer

فاصلهٔ شروع درخواست تا رسیدن اولین بایت پاسخ از سرور

Answer

زمان اجرای اولین تابع JavaScript در صفحه

Answer

زمان رندر اولین فونت سفارشی

Answer

زمان لازم برای بارگذاری کامل تصاویر

Question 14

فعال کردن Brotli یا gzip روی سرور چه فایده‌ای دارد؟

Accepted Answer

کاهش حجم انتقال فایل‌های متنی مثل HTML، CSS و JS

Answer

کاهش زمان اجرای JavaScript در مرورگر

Answer

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

Answer

رمزنگاری پاسخ‌ها به جای استفاده از HTTPS

Question 15

وقتی مرورگر با `If-None-Match` درخواست می‌دهد و پاسخ `304 Not Modified` می‌گیرد، چه اتفاقی افتاده است؟

Accepted Answer

نسخهٔ cache‌شده هنوز معتبر است و بدنهٔ پاسخ دوباره ارسال نمی‌شود

Answer

فایل روی سرور حذف شده و باید از cache پاک شود

Answer

سرور درخواست را به آدرس دیگری redirect کرده است

Answer

کاربر دسترسی لازم برای دریافت فایل را ندارد

Question 16

برای پاسخ API حاوی اطلاعات بانکی کاربر، کدام هدر مناسب‌تر است؟

Accepted Answer

`Cache-Control: no-store`

Answer

`Cache-Control: public, max-age=86400`

Answer

`Cache-Control: max-age=31536000, immutable`

Answer

`Cache-Control: s-maxage=3600`

Question 17

مهم‌ترین بهبود HTTP/2 نسبت به HTTP/1.1 برای فرانت‌اند چیست؟

Accepted Answer

ارسال هم‌زمان چند درخواست روی یک اتصال (multiplexing)

Answer

حذف نیاز به TLS برای همهٔ سایت‌ها

Answer

اجرای JavaScript روی سرور به جای مرورگر

Answer

cache خودکار همهٔ پاسخ‌ها بدون هدر

Question 18

وقتی کاربر برای اولین بار آدرس سایت را وارد می‌کند، نقش DNS چیست؟

Accepted Answer

تبدیل نام دامنه به آدرس IP سرور

Answer

رمزنگاری ارتباط بین مرورگر و سرور

Answer

فشرده‌سازی فایل‌های HTML قبل از ارسال

Answer

اعتبارسنجی نام کاربری و رمز عبور

Question 19

`<link rel="preconnect" href="https://fonts.example.com">` چه کاری انجام می‌دهد؟

Accepted Answer

DNS، اتصال TCP و TLS به آن دامنه را زودتر برقرار می‌کند

Answer

همهٔ فایل‌های آن دامنه را از قبل دانلود می‌کند

Answer

آن دامنه را از CSP صفحه مستثنا می‌کند

Answer

درخواست‌ها به آن دامنه را تا بعد از `load` عقب می‌اندازد

Question 20

تفاوت اصلی `

Accepted Answer

`defer` بعد از parse شدن HTML و به ترتیب اجرا می‌شود؛ `async` به محض دانلود

Answer

`defer` فقط روی سرور اجرا می‌شود و `async` فقط در مرورگر

Answer

`async` اسکریپت را cache نمی‌کند ولی `defer` cache می‌کند

Answer

`defer` اسکریپت را تا تعامل کاربر دانلود نمی‌کند

Question 21

چرا فایل CSS بزرگ در `<head>` می‌تواند نمایش اولیهٔ صفحه را کند کند؟

Accepted Answer

چون CSS به‌طور پیش‌فرض render-blocking است و مرورگر تا دانلودش صبر می‌کند

Answer

چون CSS باید قبل از اجرا روی سرور کامپایل شود

Answer

چون مرورگر CSS را فقط پس از اجرای همهٔ اسکریپت‌ها می‌خواند

Answer

چون CSS نمی‌تواند از HTTP cache استفاده کند

Question 22

CORS در مرورگر چه چیزی را کنترل می‌کند؟

Accepted Answer

اینکه JavaScript یک origin اجازهٔ خواندن پاسخ origin دیگر را دارد یا نه

Answer

اینکه کاربر اجازهٔ ورود به سایت را دارد یا نه

Answer

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

Answer

اینکه فایل‌ها از CDN سرو شوند یا از origin

Question 23

تفاوت status code `401` و `403` چیست؟

Accepted Answer

`401` یعنی احراز هویت نشده؛ `403` یعنی شناخته شده ولی دسترسی ندارد

Answer

`401` یعنی صفحه پیدا نشد؛ `403` یعنی خطای سرور

Answer

`401` یعنی درخواست زیاد؛ `403` یعنی timeout

Answer

هر دو دقیقاً یک معنا دارند و قابل جایگزینی‌اند

Question 24

کدام متدهای HTTP طبق تعریف idempotent هستند؟

Accepted Answer

`GET`، `PUT` و `DELETE`

Answer

فقط `POST`

Answer

`POST` و `PATCH`

Answer

هیچ متدی idempotent نیست

Question 25

تفاوت اصلی `localStorage` و `sessionStorage` چیست؟

Accepted Answer

`sessionStorage` با بسته شدن تب پاک می‌شود و بین تب‌ها مشترک نیست

Answer

`localStorage` فقط روی سرور ذخیره می‌شود

Answer

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

Answer

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

Question 26

دربارهٔ payload یک JWT معمولی (JWS) کدام گزاره درست است؟

Accepted Answer

فقط Base64URL شده و هر کسی می‌تواند آن را بخواند

Answer

با کلید سرور رمزنگاری شده و غیرقابل خواندن است

Answer

فقط مرورگری که آن را ساخته می‌تواند decode کند

Answer

پس از هر درخواست به‌صورت خودکار تغییر می‌کند

Question 27

نمایش کامنت کاربر با `element.innerHTML = comment` چه خطری دارد؟

Accepted Answer

XSS؛ کد مخرب داخل کامنت در مرورگر کاربران دیگر اجرا می‌شود

Answer

SQL injection مستقیم در دیتابیس سرور

Answer

کند شدن DNS lookup برای کل صفحه

Answer

از کار افتادن cache مرورگر برای آن صفحه

Question 28

حملهٔ CSRF از چه چیزی سوءاستفاده می‌کند؟

Accepted Answer

ارسال خودکار cookie مرورگر همراه درخواستی که سایت دیگری ساخته

Answer

خواندن مستقیم `localStorage` سایت قربانی توسط سایت مهاجم

Answer

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

Answer

شنود ترافیک روی شبکهٔ Wi-Fi عمومی

Question 29

چرا نباید کلید محرمانهٔ API پرداخت را در متغیر محیطی سمت کلاینت (مثل `NEXT_PUBLIC_*`) گذاشت؟

Accepted Answer

چون مقدار آن در bundle نهایی قرار می‌گیرد و برای همه قابل مشاهده است

Answer

چون متغیرهای محیطی در production کار نمی‌کنند

Answer

چون باعث بزرگ شدن شدید حجم bundle می‌شود

Answer

چون مرورگرها متغیرهای محیطی را مسدود می‌کنند

Question 30

استفاده از `srcset` روی `<img>` چه مشکلی را حل می‌کند؟

Accepted Answer

مرورگر اندازهٔ مناسب تصویر را بر اساس صفحه و تراکم پیکسل انتخاب می‌کند

Answer

تصویر را به‌طور خودکار به فرمت SVG تبدیل می‌کند

Answer

جلوی ذخیرهٔ تصویر توسط کاربر را می‌گیرد

Answer

تصویر را فقط بعد از اجرای JavaScript نمایش می‌دهد

Question 31

چرا فرمت‌هایی مثل AVIF و WebP برای عکس‌های سایت توصیه می‌شوند؟

Accepted Answer

با کیفیت مشابه، حجم کمتری نسبت به JPEG و PNG دارند

Answer

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

Answer

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

Answer

همیشه بدون افت کیفیت (lossless) هستند

Question 32

`font-display: swap` در `@font-face` چه رفتاری ایجاد می‌کند؟

Accepted Answer

متن فوراً با فونت جایگزین نمایش داده و بعد با فونت اصلی عوض می‌شود

Answer

متن تا دانلود کامل فونت اصلی کاملاً مخفی می‌ماند

Answer

فونت به‌جای مرورگر روی سرور رندر می‌شود

Answer

فونت فقط وقتی کاربر اسکرول کند دانلود می‌شود

Question 33

مزیت اصلی SSR نسبت به رندر کامل سمت کلاینت (CSR) چیست؟

Accepted Answer

HTML آماده زودتر نمایش داده می‌شود و برای SEO بهتر است

Answer

دیگر هیچ JavaScriptای به مرورگر ارسال نمی‌شود

Answer

بار سرور نسبت به CSR همیشه کمتر است

Answer

نیاز به API و دیتابیس را حذف می‌کند

Question 34

رندر استاتیک (SSG) برای کدام صفحه مناسب‌تر است؟

Accepted Answer

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

Answer

سبد خرید شخصی هر کاربر

Answer

داشبورد قیمت لحظه‌ای بورس

Answer

صفحهٔ نتایج جستجو با فیلترهای دلخواه

Question 35

برای ارسال اعلان‌های یک‌طرفه از سرور به مرورگر (مثل وضعیت سفارش)، کدام گزینهٔ ساده و استاندارد است؟

Accepted Answer

Server-Sent Events با `EventSource`

Answer

ارسال فرم HTML هر یک ثانیه

Answer

ذخیرهٔ وضعیت در `localStorage`

Answer

استفاده از `postMessage` بین تب‌ها

Question 36

عیب اصلی short polling (درخواست هر چند ثانیه) برای داده‌ای که به ندرت تغییر می‌کند چیست؟

Accepted Answer

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

Answer

مرورگرها polling را به‌طور کامل مسدود می‌کنند

Answer

polling فقط روی HTTP/1.0 کار می‌کند

Answer

داده‌ها همیشه با تأخیر چند دقیقه‌ای می‌رسند

Question 37

Service Worker چیست؟

Accepted Answer

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

Answer

یک thread برای رندر سریع‌تر CSS

Answer

سرور کوچکی که روی CDN اجرا می‌شود

Answer

افزونه‌ای که کاربر باید دستی نصب کند

Question 38

فایل Web App Manifest (`manifest.json`) در PWA چه نقشی دارد؟

Accepted Answer

نام، آیکون، رنگ و حالت نمایش برای نصب اپ را تعریف می‌کند

Answer

لیست همهٔ وابستگی‌های npm پروژه را نگه می‌دارد

Answer

قوانین cache شبکه را مستقیماً اجرا می‌کند

Answer

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

Question 39

برای یک صفحهٔ فارسی، کدام تنظیم روی `<html>` درست است؟

Accepted Answer

`<html lang="fa" dir="rtl">`

Answer

`<html lang="en" dir="ltr">`

Answer

`<html style="text-align:right">` بدون `lang`

Answer

`<html translate="no">` به تنهایی

Question 40

بهترین روش نمایش قیمت و تاریخ بر اساس زبان کاربر در مرورگر چیست؟

Accepted Answer

استفاده از `Intl.NumberFormat` و `Intl.DateTimeFormat`

Answer

نوشتن دستی تابع جداگانه برای هر کشور

Answer

تبدیل همه چیز به رشته با `toString()`

Answer

نمایش همیشگی فرمت آمریکایی برای همه

Question 41

برای یک تصویر کاملاً تزئینی، مقدار `alt` چه باید باشد؟

Accepted Answer

رشتهٔ خالی `alt=""` تا screen reader آن را نادیده بگیرد

Answer

نام فایل تصویر مثل `bg-pattern.png`

Answer

کلمهٔ `image` برای همهٔ تصاویر

Answer

ویژگی `alt` باید کلاً حذف شود

Question 42

چرا برای یک دکمهٔ کلیک‌پذیر `

Accepted Answer

فوکوس کیبورد، فعال‌سازی با Enter/Space و role را به‌طور پیش‌فرض دارد

Answer

`<button>` سریع‌تر از `<div>` دانلود می‌شود

Answer

`

` در مرورگرهای موبایل کلیک را دریافت نمی‌کند

Answer

`<button>` خودکار درخواست را به سرور cache می‌کند

Question 43

source map در production چه کاربردی دارد؟

Accepted Answer

نگاشت خطاهای کد minify‌شده به فایل و خط اصلی کد

Answer

کاهش حجم bundle نهایی

Answer

سرعت بخشیدن به اجرای JavaScript

Answer

رمزنگاری کد برای جلوگیری از کپی

Question 44

نمایش skeleton به جای spinner هنگام لود داده چه مزیتی دارد؟

Accepted Answer

سرعت درک‌شده بهتر می‌شود و فضای محتوا از قبل رزرو می‌شود

Answer

داده‌ها واقعاً سریع‌تر از سرور دریافت می‌شوند

Answer

نیاز به مدیریت خطا را از بین می‌برد

Answer

حجم bundle را به‌طور قابل‌توجهی کم می‌کند

Question 45

برای handler رویداد `scroll` که موقعیت را محاسبه می‌کند، کدام تکنیک مناسب است؟

Accepted Answer

throttle کردن یا استفاده از `requestAnimationFrame`

Answer

اجرای محاسبات سنگین در هر رویداد بدون محدودیت

Answer

افزودن چند listener یکسان برای اطمینان

Answer

فراخوانی `alert` در هر بار اسکرول

Question 46

وقتی API پاسخ `429 Too Many Requests` می‌دهد، کلاینت چه باید بکند؟

Accepted Answer

درخواست‌ها را کم کند و پس از زمان `Retry-After` دوباره تلاش کند

Answer

بلافاصله همان درخواست را در یک حلقه تکرار کند

Answer

کاربر را از حساب کاربری خارج کند

Answer

cache مرورگر را به‌طور کامل پاک کند

Question 47

هدف اصلی CI (Continuous Integration) در پروژهٔ فرانت‌اند چیست؟

Accepted Answer

اجرای خودکار lint، تست و build روی هر push یا pull request

Answer

نوشتن خودکار کد جدید به جای توسعه‌دهنده

Answer

طراحی رابط کاربری بدون نیاز به طراح

Answer

جایگزینی کامل code review توسط انسان

Question 48

preview deployment برای هر pull request چه فایده‌ای دارد؟

Accepted Answer

تیم می‌تواند تغییرات را روی یک URL واقعی قبل از merge بررسی کند

Answer

تغییرات بلافاصله برای همهٔ کاربران production منتشر می‌شوند

Answer

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

Answer

هزینهٔ سرور production را صفر می‌کند

Question 49

چرا برای صفحه‌ای با ده‌ها درخواست کوچک، latency اغلب مهم‌تر از bandwidth است؟

Accepted Answer

چون هر round-trip زمان ثابتی دارد که با پهنای باند بیشتر کم نمی‌شود

Answer

چون پهنای باند فقط روی دانلود تصاویر اثر دارد

Answer

چون latency فقط روی سرور اندازه‌گیری می‌شود

Answer

چون فایل‌های کوچک همیشه از cache خوانده می‌شوند

Question 50

وقتی دریافت داده از API شکست می‌خورد، بهترین رفتار UI چیست؟

Accepted Answer

نمایش پیام خطای قابل فهم همراه با دکمهٔ تلاش مجدد

Answer

نمایش صفحهٔ سفید بدون هیچ توضیحی

Answer

نمایش spinner بی‌پایان برای همیشه

Answer

رفرش خودکار کل صفحه در یک حلقه

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

Core Web Vitals شامل کدام‌هاست؟