کد کند را پیدا کن، درستش کن، اندازه بگیر
چالشها حالا دو شکل دارند: آزمایشگاهی که در آن مشکلهای واقعی پرفورمنس را در یک اپ زنده حل میکنی، و سؤالهای کوتاه برای محک زدن دانش JavaScript و React.
تیکتهای واقعی یک فروشگاه، روی میز تو
«کالاستان» یک فروشگاه آنلاین است که کند شده. هر تیکت گزارش یک کاربر است: مشکل را در اپ زنده میبینی، علتش را در نمودارها پیدا میکنی و با تغییر کد، عددها را واقعاً پایین میآوری.
- #01
صفحهی محصولات دیر بالا میاد
Request waterfall · Promise.all · مسیر بحرانی
زمان نمایش محصولات۲٬۸۶۰ms۱٬۱۶۰ms - #04
سرچ موقع تایپ گیر میکنه
Memoization · useMemo
تأخیر تایپ۹۱ms۱۱ms - #09
دکمهی «افزودن به سبد» کنده
React.memo · ثبات ارجاع · useCallback · بهروزرسانی تابعی
تأخیر کلیک۷۵ms۶ms
۷ تیکت دیگر بهزودی باز میشود.
هر تیکت چطور حل میشود
جواب را حفظ نمیکنی؛ مثل یک دیباگ واقعی، از علامت به علت میرسی. اگر گیر کردی، راهنماییها دقیقاً جایی را که باید نگاه کنی نشان میدهند.
- ۱
بازتولید
اول مشکل را خودت در اپ ببین: صفحهای که دیر بالا میآید یا تایپی که گیر میکند.
- ۲
تحلیل
نمودار شبکه، main thread یا رندرها نشان میدهند وقت دقیقاً کجا میرود.
- ۳
تغییر و پیشبینی
روی خط مشکوک بزن، راهحلت را انتخاب کن و قبل از اجرا حدس بزن چه میشود.
- ۴
نتیجه
قبل و بعد، درصد بهینگی و بررسی درستی رفتار؛ سریعتر شدن به قیمت خراب شدن قبول نیست.
سؤالهای کوتاه
سؤالهای چندگزینهای JavaScript و React با پاسخ تشریحی و رتبهبندی ماهانه.