Frontend Challenges

کد کند را پیدا کن، درستش کن، اندازه بگیر

چالش‌ها حالا دو شکل دارند: آزمایشگاهی که در آن مشکل‌های واقعی پرفورمنس را در یک اپ زنده حل می‌کنی، و سؤال‌های کوتاه برای محک زدن دانش JavaScript و React.

جدید · آزمایشگاه پرفورمنس

تیکت‌های واقعی یک فروشگاه، روی میز تو

«کالاستان» یک فروشگاه آنلاین است که کند شده. هر تیکت گزارش یک کاربر است: مشکل را در اپ زنده می‌بینی، علتش را در نمودارها پیدا می‌کنی و با تغییر کد، عددها را واقعاً پایین می‌آوری.

ورود به آزمایشگاهرایگان، بدون ثبت‌نام
تیکت‌های بازاز وضعیت فعلی تا بهترین راه‌حل
  • #01

    صفحه‌ی محصولات دیر بالا میاد

    Request waterfall · Promise.all · مسیر بحرانی

    زمان نمایش محصولات
    ۲٬۸۶۰ms۱٬۱۶۰ms
  • #04

    سرچ موقع تایپ گیر می‌کنه

    Memoization · useMemo

    تأخیر تایپ
    ۹۱ms۱۱ms
  • #09

    دکمه‌ی «افزودن به سبد» کنده

    React.memo · ثبات ارجاع · useCallback · به‌روزرسانی تابعی

    تأخیر کلیک
    ۷۵ms۶ms

۷ تیکت دیگر به‌زودی باز می‌شود.

هر تیکت چطور حل می‌شود

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

  1. ۱

    بازتولید

    اول مشکل را خودت در اپ ببین: صفحه‌ای که دیر بالا می‌آید یا تایپی که گیر می‌کند.

  2. ۲

    تحلیل

    نمودار شبکه، main thread یا رندرها نشان می‌دهند وقت دقیقاً کجا می‌رود.

  3. ۳

    تغییر و پیش‌بینی

    روی خط مشکوک بزن، راه‌حلت را انتخاب کن و قبل از اجرا حدس بزن چه می‌شود.

  4. ۴

    نتیجه

    قبل و بعد، درصد بهینگی و بررسی درستی رفتار؛ سریع‌تر شدن به قیمت خراب شدن قبول نیست.

چالش‌های قبلی

سؤال‌های کوتاه

سؤال‌های چندگزینه‌ای JavaScript و React با پاسخ تشریحی و رتبه‌بندی ماهانه.

۳ سؤال