تكرار السؤال: …
الإجابة المختصرة
تحدث عندما يتعاقب قراءة قياسات الـ DOM (مثل offsetHeight) مع تعديل أنماط الـ DOM في حلقة سريعة، مما يجبر المتصفح على إعادة حساب التخطيط (Reflow) بشكل متكرر ومكلف.
الشرح
يجمع المتصفح تعديلات الـ DOM ويطبقها دفعة واحدة. لكن إذا قمت بقراءة خصائص التخطيط الهندسي فور إجراء تعديل، يضطر المتصفح لإيقاف التنفيذ فوراً وحساب التخطيط الجديد قسرياً (Forced Synchronous Layout). في ريأكت يتم تجنب هذا بقراءة كافة القياسات دفعة واحدة أولاً، ثم تطبيق تعديلات الحالة في خطوة موحدة.
مثال بالكود
// نمط سيء: قراءة وكتابة متناوبة تجبر Reflow متكرر
// elements.forEach(el => { const h = el.offsetHeight; el.style.height = (h + 10) + 'px'; });
// نمط سليم: تجميع القراءات ثم تجميع التعديلات
const heights = elements.map(el => el.offsetHeight);
elements.forEach((el, i) => {
el.style.height = `${heights[i] + 10}px`;
});أخطاء شائعة
- تنفيذ قياسات مستمرة للعناصر داخل معالج حدث onScroll دون استخدام requestAnimationFrame.