will-change وترقية الطبقات
وجّه المتصفح لترقية العناصر إلى طبقات GPU باستخدام will-change لتحريك أكثر سلاسة.
will-change وترقية الطبقات درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما المقصود بـ will-change؟
تُلمّح will-change إلى المتصفح بأن عنصرًا ما سيتحرك، مما يتيح له إعداد التحسينات مسبقًا، مثل ترقية العنصر إلى طبقة تركيب GPU مستقلة قبل بدء الحركة.
الصياغة
حدّد الخاصية التي ستتغير: will-change: transform وwill-change: opacity وwill-change: transform, opacity. استخدم will-change: auto لإزالة التلميحات عند انتهاء الحركة.
متى تُستخدم
طبّق will-change على العناصر التي ستتحرك فعلًا فقط، ولمدة الحركة وحدها. وتُعد إضافتها وإزالتها باستخدام JavaScript (عبر class) أكثر كفاءة من تركها مفعّلة باستمرار على العناصر الثابتة.
تكلفة ترقية الطبقة
تستهلك كل طبقة تمت ترقيتها ذاكرة من GPU. وتتسبب ترقية عناصر كثيرة في الوقت نفسه في ضغط على الذاكرة، مما قد يقلل الأداء، ولا سيما على الأجهزة المحمولة ذات ذاكرة GPU المحدودة. أجرِ الترقيات باعتدال وبشكل مدروس.
تجنّب التطبيق الشامل
لا تطبّق will-change مطلقًا على * أو على أعداد كبيرة من العناصر. فعندما تُنشأ طبقات كثيرة، تتجاوز تكلفة التحسين فائدته. حلّل الأداء أولًا، ثم أضف will-change فقط عند التأكد من وجود مشكلة تقطّع محددة.
will-change مقابل خدعة translateZ
قبل ظهور will-change، كان المطورون يستخدمون transform: translateZ(0) أو translate3d(0,0,0) لفرض ترقية GPU. ويُعد will-change النهج الصحيح والدلالي. لا تزال خدعة translateZ تعمل، لكنها تفصيل تنفيذي لا يعبّر عن القصد.
أثر جانبي لسياق التراص
تنشئ الطبقات التي تمت ترقيتها سياقات تراص جديدة. ويؤثر ذلك في سلوك z-index، إذ تُرتّب العناصر الفرعية للعنصر الذي تمت ترقيته بالنسبة إلى ذلك العنصر، لا إلى جذر المستند. انتبه إلى تغيّر سياق التراص عند ترقية العناصر.
نمط التطبيق الديناميكي
أضف will-change عند mouseenter أو عند بدء الحركة، وأزله عند mouseleave أو انتهاء الحركة. يمنح ذلك المتصفح وقتًا للاستعداد، من دون استهلاك ذاكرة GPU بشكل دائم للعناصر غير النشطة.
<pre class="snippet">el.addEventListener("mouseenter", () => el.style.willChange = "transform");
el.addEventListener("mouseleave", () => el.style.willChange = "auto");</pre>تحليل عدد الطبقات
تعرض لوحة Layers في Chrome DevTools الطبقات التي تمت ترقيتها بصريًا. وتشير الأعداد الكبيرة للطبقات (بالمئات) إلى ترقية مفرطة. يعرض قسم Memory استخدام ذاكرة GPU. حافظ على أقل عدد ممكن من الطبقات التي تمت ترقيتها، وراقب ذلك باستخدام ملفات تعريف الأجهزة منخفضة الإمكانات.
بديل الخاصية contain
تقيّد contain: layout paint في CSS حسابات التخطيط وإعادة الرسم بشجرة فرعية، على نحو مشابه للعزل. وتحسّن أداء الأدوات المصغّرة المستقلة دون إنشاء طبقات GPU، مما يجعلها تحسينًا أقل تكلفة من will-change للعناصر غير المتحركة.
دعم المتصفحات وسلوكها
تحظى will-change بدعم كامل في جميع المتصفحات الحديثة. وتتعامل المتصفحات معها كتلميح لا كأمر، وقد تتجاهلها إذا كانت الموارد محدودة. لا تعتمد عليها كضمان، بل استخدمها كتلميح إرشادي لتحسين الأداء فقط.
اختبار المعرفة
ما الخطر الأساسي من تطبيق will-change على عناصر كثيرة في الوقت نفسه؟
الملخص
ترقّي will-change العناصر مسبقًا إلى طبقات تركيب GPU قبل بدء الرسوم المتحركة، مما يلغي تكلفة الترقية عند بدء الحركة. طبّقها بشكل ديناميكي وباعتدال، وفقط عندما يُظهر تحليل الأداء وجود تقطّع، لتجنب الاستهلاك المفرط لذاكرة GPU الناتج عن الترقية الزائدة.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «will-change وترقية الطبقات» مجاني؟
نعم — نص درس «will-change وترقية الطبقات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «will-change وترقية الطبقات»؟
وجّه المتصفح لترقية العناصر إلى طبقات GPU باستخدام will-change لتحريك أكثر سلاسة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «will-change وترقية الطبقات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- CSS الحرج وحجب العرض
- التخطيط والرسم والتركيب: مسار التصيير
- will-change وترقية الطبقات
- تغطية CSS والأنماط غير المستخدمة