كيف تشخّص التلعثم وقت التشغيل (runtime jank)، والمهام الطويلة (long tasks)، وضعف INP؟

Question

IT Interview Practice · Accepted Answer

ينشأ التلعثم وقت التشغيل من **مهام طويلة تحجب الخيط الرئيسي** — الخيط الوحيد الذي يعالج JS والتخطيط والرسم والإدخال. وعندما تعمل مهمة لوقت أطول من اللازم، لا يمكن معالجة الإدخال، فتبدو التفاعلات متجمّدة وترتفع **INP**.

## النموذج الأساسي: الخيط الرئيسي

```text
Main thread: [ event handler 180ms ]  input queued... rendered ─▶ INP = time until next paint
             └── a "long task" (>50ms) blocks everything, including responding to the click
```

تقيس INP التأخير من تفاعل المستخدم إلى الرسم التالي. ولها ثلاثة أجزاء: **تأخر الإدخال (input delay)** (الخيط الرئيسي مشغول عند النقر)، و**وقت المعالجة (processing time)** (معالجك)، و**تأخر العرض (presentation delay)** (الأنماط/التخطيط/الرسم بعده).

## التشخيص

- **لوحة الأداء (Performance panel)** (Chrome DevTools): سجّل تفاعلًا، وابحث عن **المهام الطويلة (Long Tasks)** المميّزة بالأحمر (>50ms) وأُطُر المعالجات العريضة.
- **PerformanceObserver** لالتقاط المهام الطويلة في الميدان:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // find real-user blockers
  }
}).observe({ type: "longtask", buffered: true });
```

## الإصلاحات

- **قسّم المهام الطويلة** — جزّئ العمل وتنازل (yield) بحيث يستطيع الإدخال المقاطعة:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // let clicks through
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **انقل الحساب الثقيل إلى Web Worker** — أبقِ التحليل/المعالجة بعيدًا عن الخيط الرئيسي.
- **خمّد/اخنق (Debounce/throttle)** المعالجات الباهظة؛ و**افترض (virtualize)** القوائم الطويلة؛ وخزّن الحسابات (memoize) لقطع عمليات إعادة العرض.
- **أجّل العمل غير العاجل** بـ `requestIdleCallback` أو أولويات `scheduler.postTask`.

## لماذا يهم

INP هي أحدث Core Web Vital وأصعبها إصلاحًا لأنها تتعلق بـ*وقت التشغيل* لا بالتحميل. يُتوقَّع من كبار المهندسين التفكير انطلاقًا من نموذج الخيط الوحيد — المهام الطويلة تحجب الإدخال — واللجوء إلى التنازل والعمّال والجدولة بدلًا من مجرد «حسّن الشيفرة».

النموذج الأساسي: الخيط الرئيسي

التشخيص

الإصلاحات

لماذا يهم

أسئلة ذات صلة