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

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

این فایل شامل چندین سوال مربوط به مصاحبه‌ی فرانت-اند هست که ازشون میشه در زمان بررسی داوطلب‌های بالقوه استفاده کرد. به هیچ وجه پیشنهاد نمیشه که تمام سوالات اینجا رو از یک داوطلب بپرسین (چون چند ساعت طول می‌کشه). انتخاب چند مورد از این لیست باید بهتون در بررسی توانایی‌هایی که نیاز دارید کمک کنه.

توجه: در نظر داشته باشید که ته خیلی از این سوالات باز هستن و ممکنه به یک بحث جذاب ختم بشن که بیشتر از یک جواب ساده به شما در مورد توانایی‌های شخص مورد نظر اطلاعات میده.

فهرست

  1. سوال‌های عمومی
  2. سوال‌های اچ‌تی‌ام‌ال
  3. سوال‌های سی‌اس‌اس
  4. سوال‌های جی‌اس
  5. سوال‌های تستینگ
  6. سوال‌های پرفورمنس
  7. سوال‌های شبکه
  8. سوال‌های کدینگ
  9. سوال‌های فان

درگیر شدن

  1. مشارکت کنندگان
  2. چطور مشارکت کنید
  3. مجوز

سوال‌های عمومی:

  • این هفته/امروز چه چیزی یاد گرفتی؟
  • چه چیزی توی کد زدن برات جذابه یا به هیجان میارتت؟
  • یه چالش فنی که جدیدا باهاش روبرو شدی چی بود و چطوری حلش کردی؟
  • وقتی میخوایی یه سایت یا یه وب اپلیکیشن بسازی، به چه چیزهای رابط کاربری، امنیتی، کارایی، سئو، نگه‌داری یا تکونولوژی توجه میکنی؟
  • در مورد محیط توسعه‌ی مورد علاقه‌ات بگو.
  • با کدوم سیستم کنترل ورژن آشنا هستی؟
  • میتونی گردش کارت رو برای وقتی که داری یه صفحه وب میسازی توضیح بدی؟
  • اگه ۵ تا استایل‌شیت مختلف داشته باشی، چطوری اون‌ها رو به نحو احسنت با هم توی سایت ادغام میکنی؟
  • میتونی تفاوت بین بهبود تصاعدی و افت شدید رو توضیح بدی؟
  • چطوری اَسِت‌ها/منابع یک وبسایت رو بهینه میکنی؟
  • یک مرورگر در هر لحظه از یک دامنه چنتا منابع دانلود میکنه؟
    • استثناها چیا هستن؟
  • سه روش بگو که بشه لود صفحه رو کم کرد (لود دیداری یا زمان لود واقعی)
  • اگه یهو وارد یه پروژه بشی و ببینی که از تَب استفاده کردن و تو از اسپس استفاده کردی، چیکار میکنی؟
  • توضیح بده که چطوری یه صفحه‌ی اسلایدشوی ساده می‌سازی.
  • اگه میتونستی یک تکنولوژی رو امسال استاد بشی، دنبال چی می‌رفتی؟
  • اهمیت استاندارد‌ها و سازمان‌های مشخص کردن استاندارد رو توضیح بده.
  • فلش محتوی بدون استایل (FOUC) چیه؟ چطوری میشه ازش پرهیز کرد؟
  • توضیح بده که AIRA و صفحه‌خوان‌ها چین و چطوری میشه یک وبسایت رو در دسترس قرار داد؟
  • مزایا و معایب انیمیشن‌های سی‌اس‌اس در مقایسه با جاوااسکریپت رو توضیح بده.
  • CORS مخفف چیه و به چه مسئله‌ای اشاره داره؟

سوال‌های اچ‌تی‌ام‌ال:

  • doctype چیکار میکنه؟
  • فرق بین حالت‌های کاملا استاندارد، تقریبا استاندارد و قدیمی (quirks) چیه؟
  • تفاوت بین اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال چیه؟
  • مشکلی برای سرو کردن صفحه‌ای به صورت application/xhtml+xml هست؟
  • چطور یه صفحه‌ای رو با محتوای چندزبانه سرو میکنی؟
  • وقتی که داری سایت چندزبانه طراحی میکنی یا توسعه میدی، به چه چیزهایی باید حواست باشه؟
  • اتریبیوت‌های data- به چه دردی میخورن؟
  • اچ‌تی‌ام‌ال۵ رو یک پلتفرم وب آزاد در نظر بگیر. بلوک‌های سازنده‌ی اچ‌تی‌ام‌ال۵ چیا هستن؟
  • فرق بین یک <script>، <script async> و <script defer> رو شرح بده.
  • چرا به طور کلی فکر خوبیه که <link>های سی‌اس‌اس رو داخل <head></head> و <script>های جی‌اس رو قبل از </body> قرار داد؟ هیچ استثنایی میشناسی؟
  • رندر شدن تصاعدی چیه؟
  • قبلا زبان‌های تمپلیت‌سازی اچ‌تی‌ام‌ال استفاده کردی؟

سوال‌های سی‌اس‌اس:

  • توی سی‌اس‌اس فرق بین کلاس و آی‌دی چیه؟
  • توی سی‌اس‌اس فرق بین «normalizing» و «resetting» چیه؟ خودت کدومشون رو انتخاب میکردی، و چرا؟
  • فلوت رو توضیح بده و بگو چطوری کار میکنن.
  • زد-ایندکس رو توضیح بده و بگو روی هم چینی زمینه چطوری ایجاد میشه.
  • BFC‌ (Block Formatting Context) چیه و چطوری کار میکنه؟
  • روش‌های مختلف برای پاک کردن چیه و هر کدوم به درد چه موقعیتی می‌خوره؟
  • اسپریت‌های سی‌اس‌اس رو توضیح بده و بگو چطوری اون‌ها رو روی صفحه یا سایت پیاده‌سازی می‌کنی؟
  • روش‌های جایگزینی تصویر مورد علاقه‌ات چیا هستن و از هر کدوم کی استفاده می‌کنی؟
  • برای حل کردن مشکلات استایل‌های مختص به مرورگر، چطوری عمل می‌کنی؟
    • از چه تکنیک/پروسه‌ای استفاده می‌کنی؟
  • راه‌های مختلف برای مخفی کردن بصری محتوی (و قابل خوندن کردنشون فقط برای صفحه‌خوان‌ها) چیا هستن؟
  • تا حالا از یک گرید سیستم استفاده کردی، اگه آره، کدومشون رو ترجیح میدی؟
  • تاحالا از مدیا کوئری‌ها یا لی‌اوت/سی‌اس‌اس مخصوص موبایل استفاده یا پیاده‌سازی کردی؟
  • با استایل دادن به SVG آشنا هستی؟
  • یک صفحه‌ی وب رو چطوری برای چاپ بهینه می‌کنی؟
  • چنتا از «مچ‌گیری»‌های لازم برای نوشتن سی‌اس‌اس کارآمد چیا هستن؟
  • مزایا و معایب استفاده از پیش‌پردازنده‌های سی‌اس‌اس چیا هستن؟
    • توضیح بده چه چیزایی از پیش‌پردازنده‌های سی‌اس‌اس که قبلا استفاده کردی رو دوست داشتی و دوست نداشتی.
  • یه دیزاین کلی که فونت‌های غیراستاندارد داره رو چطوری پیاده سازی می‌کنی؟
  • توضیح بده که یک مرورگر چطوری مشخص میکنه کدوم المنت با کدوم سلکتور سی‌اس‌اس مچ میشه.
  • سودو المنت‌ها رو توصیف کن و بحث کن که برای چی ازشون استفاده می‌کنن.
  • چیزی رو که از باکس مدل فهمیدی توضیح بده و بگو چطوری توی سی‌اس‌اس به مرورگر میفهمونی تا لی‌اوتت رو توی باکس مدل‌های متفاوتی رندر کنه.
  • * { box-sizing: border-box; } چیکار میکنه؟ فوایدش چیه؟
  • هر چی مقدار برای پراپرتی دیسپلی یادت میاد رو لیست کن.
  • فرق بین اینلاین و اینلاین-بلاک چیه؟
  • فرق بین یک المنت با پوزیشن ریلیتیو، فیکسد، ابسولوت و استایتک چیه؟
  • «C» داخل سی‌اس‌اس برای Casacading یا آبشاری هست. اولویت توی اختصاص استایل چطوری مشخص می‌شه (چنتا مثال)؟
  • از چه فریم‌ورک‌های سی‌اس‌اس به صورت لوکال یا توی پروداکشن استفاده کردی؟
  • تا حالا با فلکس‌باک یا ویژگی‌های جدید گرید توی سی‌اس‌اس بازی بازی کردی؟
  • طراحی ریسپانسیو با طراحی آداپتیو چه تفاوتی داره؟
  • تاحالا با گرافیک رتینا کار کردی؟ اگه آره، کی و از چه تکنیک‌هایی استفاده کردی؟
  • دلیل هست که از translate() به جای جاگذاری ابسولوت یا برعکس استفاده کنی؟ و چرا؟

سوال‌های جی‌اس:

  • ایونت دلیگیشن رو توضیح بده.
  • توضیح بده this توی جاوااسکریپت چطوری کار میکنه.
  • توضیح بده ارث‌بری پروتوتایپی چطوری کار میکنه.
  • نظرت در مورد AMD در برابر CommonJS چیه؟
  • توضیح بده چرا قطعه‌ی روبرو به عنوان یک IIFE کار نمیکنه: function foo(){ }();.
    • چه چیزی احتیاج داره تا به شیوه‌ی صحیح IIFE بشه؟
  • فرق بین یک متغییر که null، undefined یا اعلام نشده هست چیه؟
    • چطوری وضعیت هر کدوم از این‌ها رو چک می‌کنی؟
  • کلوژر چیه و چطور/چرا ازش استفاده می‌کنی؟
  • استفاده‌ی معمول از فانکشن‌های انانیموس چیه؟
  • چطوری کدهات رو مرتب میکنی؟ (ماژول پترن، ارث‌بری کلاسیک)
  • فرق بین آبجکت‌های هاست و آبجکت‌های نیتیو چیه؟
  • فرق بین: function Person(){}، var person = Person()، و var person = new Person()؟
  • فرق بین .call و .apply چیه؟
  • Function.prototype.bind رو توضیح بده.
  • چه موقع از document.write() استفاده میکنی؟
  • فرق بین تشخیص ویژگی، استنتاج ویژگی و استفاده از استرینگ UA چیه؟
  • ایجکس رو تا تمام جزئیاتی که می‌تونی توضیح بده.
  • مزایا و معایب استفاده از ایجکس چیا هستن؟
  • توضیح بده که JSONP چطوری کار میکنه (و چطوری واقعا ایجکس نیست؟)
  • تاحالا از تمپلیت‌سازی جاوااسکریپتی استفاده کردی؟
    • اگه آره، از چه کتابخونه‌هایی استفاده کردی؟
  • «هویستینگ» رو توضیح بده.
  • ایونت بابلینگ رو توضیح بده.
  • فرق بین یک «اتریبیوت» و یک «پراپرتی» چیه؟
  • چرا اکستند کردن یه آبجکت جاوااسکریپتی بیلت-این فکر خوبی نیست؟
  • فرق بین ایونت load داکیومنت و DOMContentLoaded چیه؟
  • فرق بین == و === چیه؟
  • سیاستگذاری سیم-اوریجین رو از دید جاوااسکریپت توضیح بده.
  • کاری کن این کار کنه:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • چرا میگن اکسپرشن Ternary، کلمه‌ی «Ternary» چه چیزی رو میگه؟
  • "use strict"; چیه؟ مزایا و معایب استفاده ازش چیه؟
  • یه حلقه بساز که تا 100 تکرار بشه در حالی که برای مضارب 3 "fizz"، برای مضارب 5 "buzz" و برای مضارب 3 و 5 "fizzbuzz" رو خروجی بده.
  • چرا به طور کلی، فکر خوبیه تا اسکوپ جنرال یک وبسایت رو همینطوری که هست بزاریم بمونه و هیچوقت بهش دست نزنیم؟
  • چرا از چیزهایی مثل ایونت load استفاده میکنی؟ این ایونت معایبی هم داره؟ جایگزینی میشناسی، و چرا از اونها استفاده میکنی؟
  • توضیح بده که یک اپ سینگل پیج چیه و چطوری میشه سئوی یکیشون رو درست کرد؟
  • نهایت تجربه‌ات توی کار کردن ب پرامیس‌ها و/یا پروفیل‌هاش چیه؟
  • مزایا و معایب استفاده از پرامیس‌ها به جای کال‌بک‌ها چیه؟
  • چنتا از مزایا/معایب نوشتن کدهای جاوااسکریپت به زبانی که به جاوااسکریپت کامپایل میشه چیا هست؟
  • از چه ابزارها و تکنیک‌هایی برای دیباگ کردن کدهای جاوااسکریپت استفاده می‌کنی؟
  • از چه ساختار زبانی برای طی کردن پراپرتی‌های یک آبجکت یا آیتم‌های آرایه استفاده میکنی؟
  • تفاوت بین آبجکت‌های تغییرپذیر و تغییرناپذیر رو توی جاوااسکریپت توضیح بده.
    • یه مثال از آبجکت تغییرناپذیر توی جاوااسکریپت بزن.
    • مزایا و معایب تغییرناپذیری چیه؟
    • چطوری میتونی توی کدهای خودت به تغییرناپذیری رو اجرا کنی؟
  • فرق بین فانکشن‌های همگام و غیرهمگام رو توضیح بده.
  • ایونت لوپ چیه؟
    • فرق بین استک کال و صف تسک چیه؟
  • فرق بین استفاده از foo توی function foo() {} و var foo = function() {} رو توضیح بده.

سوال‌های تستینگ:

  • مزایا/معایب تست کردن کدهات چیا هستن؟
  • از چه ابزارهایی برای تست کردن فانکشنالیتی کدهات استفاده می‌کنی؟
  • فرق بین تست یونیت و فانکشنال/اینتگریشن تست چیه؟
  • هدف ابزارهای لینت کردن کد چی هست؟

سوال‌های پرفورمنس:

  • از چه ابزاری استفاده میکنی تا یه باگ مربوط به پرفورمنس رو توی کدهات پیدا کنی؟
  • چه راه‌هایی وجود داره تا پرفورمنس اسکرول کردن سایتت بهبود پیدا کنه؟
  • فرق بین لی‌اوت، پینتینگ و کامپوزیتینگ رو توضیح بده.

سوال‌های شبکه:

  • از قدیم، چرا همیشه بهتر بوده تا اَسِت‌های سایت رو از دامین‌های مختلف سرو کرد؟
  • بهترین تعریفی رو که از پردازشی وقتی که یوآرال یک وبسایتی رو تایپ میکنی تا وقتی که لود شدنش روی صفحه‌ی نمایشت تموم بشه انجام میشه، ارائه بده.
  • فرق بین ایونت‌های Long-Polling، Websocketها و Server-Sent چیه؟
  • هدرهای ریکوئست و ریسپانس‌های زیر رو توضیح بده:
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • متدهای اچ‌تی‌تی‌پی چی هستن؟ تمام متدهای اچ‌تی‌تی‌پی که میشناسی لیست کن و توضیحشون بده.

سوال‌های کدینگ:

سوال: مقدار foo چیست؟

var foo = 10 + '20';

سوال: چیکار میکنی تا این کار کنه؟

add(2, 5); // 7
add(2)(5); // 7

سوال: مقدار برگشته از عبارت زیر چیست؟

"i'm a lasagna hog".split("").reverse().join("");

سوال: مقدار window.foo چیست؟

( window.foo || ( window.foo = "bar" ) );

سوال: خروجی دو آلرت زیر چیست؟

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

سوال: مقدار foo.length چیست؟

var foo = [];
foo.push(1);
foo.push(2);

سوال: مقدار foo.x چیست؟

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

سوال: کد زیر چه چیزی رو پرینت می‌کند؟

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

سوال‌های فان:

  • پروژه‌ی باحالی که جدیدا روش کار کردی چی بود؟
  • از چه چیزهایی از ابزارهای توسعه‌دهنده‌ای که استفاده می‌کنی خوشت میاد؟
  • چه کسی الهام بخش تو توی کامیونیتی فرانت-اند کارها هست؟
  • پروژه‌ی خونگی داری؟ چجور پروژه‌ایه؟
  • فیچر مورد علاقه‌ات توی اینترنت اکسپلورر چیه؟
  • قهوه‌ات رو چطوری دوست داری؟

مشارکت کنندگان:

این نوشته با همکاری @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed و @iansym از سال ۲۰۰۹ آغاز شده است.

از آن موقع تا کنون بیش از ۱۰۰ دولوپر در آن مشارکت کرده‌اند.

این سند توسط @JavidIzadfar به فارسی برگردانده شده است.

Edit this page