CSS Academy · درس

التخطيط والرسم والتركيب: مسار التصيير

افهم مسار التخطيط والرسم والتركيب في المتصفح لتتنبأ بتكلفة تغييرات الأنماط.

التخطيط والرسم والتركيب: مسار التصيير درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

مراحل العرض الثلاث

بعد إنشاء شجرة العرض، ينفّذ المتصفح ثلاث مراحل: التخطيط، أي حساب أحجام العناصر ومواضعها؛ والرسم، أي ملء وحدات البكسل بالألوان والنصوص والصور؛ والتركيب، أي دمج الطبقات المرسومة وعرضها على الشاشة.

التخطيط (إعادة التدفق)

يحسب التخطيط هندسة كل عنصر، أي width وheight وموضع x/y. ويؤدي تغيير الخصائص المؤثرة في الهندسة، مثل width وmargin وpadding وfont-size وposition، إلى تشغيل التخطيط للعنصر وربما لشجرته الفرعية بأكملها، ما يجعله المرحلة الأعلى كلفة.

الرسم

يملأ الرسم وحدات البكسل لكل طبقة، بما في ذلك الخلفيات والحدود والنصوص والظلال. ويؤدي تغيير color أو background-color أو visibility أو border-radius إلى إعادة الرسم من دون إعادة التخطيط، وهي عملية أقل كلفة من التخطيط، لكنها تظل مكلفة إذا أُعيد رسم مساحة كبيرة.

التركيب

يدمج المُركِّب الطبقات باستخدام GPU. ويمكن تحريك خصائص CSS التي تؤثر في التركيب فقط، وهي transform وopacity، من دون تشغيل التخطيط أو الرسم. ويتولى GPU معالجتها بمعدل 60fps مع اعتماد محدود على CPU.

مرجع CSS Triggers

يوثّق csstriggers.com، الموجود حاليًا ضمن مستندات المتصفح، خصائص CSS التي تشغّل التخطيط أو الرسم أو التركيب لكل محرك متصفح. استخدمه لمراجعة خصائص التحريك، وفضّل transform وopacity للخصائص المتحركة.

تكرار التخطيط

يحدث تكرار التخطيط عندما تتناوب JavaScript بين قراءة خصائص التخطيط، مثل offsetWidth، وكتابة خصائص الأنماط داخل حلقة. فكل كتابة تبطل التخطيط، وكل قراءة تفرض إعادة تدفق متزامنة. اجمع جميع القراءات قبل جميع الكتابات لتجنب تكرار التخطيط.

  <pre class="snippet">// BAD: read-write-read-write loop
elements.forEach(el => { const w = el.offsetWidth; el.style.width = w + 10 + "px"; });
// GOOD: batch reads then writes</pre>

الخصائص التي يعالجها المُركِّب فقط

لا يعالج المُركِّب بالكامل سوى transform وopacity عندما يكون العنصر على طبقته الخاصة. ويؤدي تحريك أي خاصية أخرى، حتى left/top، إلى تشغيل التخطيط أو الرسم على الخيط الرئيسي، وقد يتسبب في التقطّع.

إنشاء طبقات GPU

ترفع المتصفحات العناصر إلى طبقة GPU خاصة بها عندما تحتوي على will-change: transform، أو على تحريك CSS لـ transform/opacity، أو على موضع ثابت مع عناصر مجاورة تستخدم التركيب، أو على تحويل ثلاثي الأبعاد. وتستخدم كل طبقة ذاكرة GPU، لذا يؤدي إنشاء عدد كبير جدًا من الطبقات إلى ضغط على الذاكرة.

تجنّب عواصف إعادة الرسم

تحدث عاصفة إعادة الرسم عندما يُعاد رسم جزء كبير من الصفحة في كل إطار. استخدم Chrome DevTools ← Rendering ← Paint flashing لتحديد المناطق التي يُعاد رسمها. اعزل العناصر التي تُحرّك بشكل متكرر في طبقات مستقلة لحصر منطقة إعادة الرسم.

لوحة Performance في DevTools

سجّل ملفًا لتحليل الأداء في Chrome DevTools. يعرض مخطط اللهب أحداث Layout وUpdate Layer Tree وPaint وComposite. تشير أشرطة التخطيط أو الرسم الطويلة إلى وجود اختناقات. استهدف أزمنة إطارات أقل من 16ms للحفاظ على 60fps.

إرشادات عملية للرسوم المتحركة

استخدم transform وopacity للتحريك كلما أمكن. استخدم clip-path بدلًا من width/height في رسوم الكشف المتحركة، إذ إن clip-path ملائم للـ compositor في المتصفحات الحديثة. تجنّب تحريك box-shadow؛ واستخدم بدلًا منه opacity مع pseudo-element يحتوي على ظل مُصيّر مسبقًا.

اختبار المعرفة

ما خاصيتا CSS اللتان يمكن تحريكهما دون التسبب في التخطيط أو إعادة الرسم؟

الملخص

يحدد مسار التصيير — Layout وPaint وComposite — أداء الرسوم المتحركة. يُعد Layout الأكثر تكلفة، بينما تكون تكلفة Paint متوسطة، أما الخصائص التي تقتصر على Composite مثل transform وopacity فتتولاها وحدة GPU. يتيح فهم المحفزات إنشاء رسوم متحركة سلسة بمعدل 60fps دون التسبب في تكرار التخطيط أو عواصف إعادة الرسم.

الأسئلة الشائعة

هل درس «التخطيط والرسم والتركيب: مسار التصيير» مجاني؟

نعم — نص درس «التخطيط والرسم والتركيب: مسار التصيير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «التخطيط والرسم والتركيب: مسار التصيير»؟

افهم مسار التخطيط والرسم والتركيب في المتصفح لتتنبأ بتكلفة تغييرات الأنماط. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «التخطيط والرسم والتركيب: مسار التصيير»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy