نموذج الطبقة
مقدمة
النموذج الأساسي لصفحة الويب في معظم مطوري الويب هو DOM. العرض هو العملية الغامضة غالبًا لتحويل تمثيل الصفحة هذا إلى صورة على الشاشة. غيرت المتصفحات الحديثة طريقة العرض في السنوات الأخيرة للاستفادة من بطاقات الرسومات: غالبًا ما يشار إلى ذلك بشكل غامض باسم "تسريع الأجهزة". عند التحدث عن صفحة ويب عادية (أي لا تتيح Canvas2D أو WebGL)، ما الذي يعنيه هذا المصطلح في الواقع؟ توضّح هذه المقالة النموذج الأساسي الذي يعتمد على العرض المسرَّع للأجهزة لمحتوى الويب في Chrome.
محاذير كبيرة ودهنية
نتحدث هنا عن WebKit، وبشكل أكثر تحديدًا، نتحدث عن منفذ Chromium في WebKit. تتناول هذه المقالة تفاصيل تنفيذ Chrome، وليس ميزات النظام الأساسي للويب. لا ينظّم النظام الأساسي للويب والمعايير هذا المستوى من تفاصيل التنفيذ، لذا ما مِن ما يضمن تطبيق أي شيء في هذه المقالة على المتصفّحات الأخرى، ولكن مع ذلك يمكن أن تكون معرفة العناصر الداخلية مفيدة في تصحيح الأخطاء وضبط الأداء المتقدّم.
تجدر الإشارة أيضًا إلى أن هذه المقالة بأكملها تناقش جزءًا أساسيًا من بنية العرض في Chrome التي تتغير بسرعة كبيرة. تحاول هذه المقالة أن تتحدث فقط عن الأمور التي من غير المحتمل أن تتغير، ولكن لا توجد ضمانات أنها ستظل سارية خلال ستة أشهر.
من المهم أن نفهم منذ فترة أن Chrome يستخدم مسارين مختلفين للعرض: المسار المسرّع بالأجهزة ومسار البرنامج القديم. وبدءًا من ذلك، تنتقل جميع الصفحات إلى المسار المسرّع بالأجهزة على أنظمة التشغيل Windows وChromeOS وChrome لنظام Android. في نظامي التشغيل Mac وLinux فقط الصفحات التي تحتاج إلى إنشاء لبعض المحتوى تدخل ضمن المسار المسرّع (انظر أدناه لمعرفة المزيد عما قد يتطلب الإنشاء)، ولكن سرعان ما ستتحرك جميع الصفحات في المسار المسرّع أيضًا.
وأخيرًا، سنلقي نظرة سريعة على جزء من محرّك العرض ونلقي نظرة على ميزاته التي لها تأثير كبير في الأداء. عند محاولة تحسين أداء موقعك الإلكتروني، قد يكون من المفيد فهم نموذج الطبقات، ولكن من السهل أيضًا التقاط صور جانبية لك: تعتبر الطبقات تركيبات مفيدة، ولكن إنشاء الكثير منها قد يرفع من النفقات العامة في مكدس الرسومات. انتبِه لنفسك.
من نموذج العناصر في المستند (DOM) إلى الشاشة
لمحة عن الطبقات
بعد تحميل الصفحة وتحليلها، يتم تمثيلها في المتصفح كبنية مألوفة لدى العديد من مطوري الويب وهي: DOM. ومع ذلك، عند عرض صفحة، يشتمل المتصفح على سلسلة من التمثيلات الوسيطة التي لا تظهر مباشرة للمطورين. الطبقة الأكثر أهمية من هذه الهياكل هي الطبقة.
يوجد في Chrome عدة أنواع مختلفة من الطبقات: RenderLayers، وهي المسؤولة عن الأشجار الفرعية لـ DOM وGraphicsLayers، وهي المسؤولة عن الأشجار الفرعية لطبقة RenderLayers. الأمر الثاني هو الأكثر إثارة للاهتمام بالنسبة إلينا هنا، لأن GraphicsLayers هي التي يتم تحميلها إلى وحدة معالجة الرسومات على هيئة زخارف. سأقول "طبقة" من الآن فصاعدًا لأعني GraphicsLayer
لنعرض سريعًا مصطلحات وحدة معالجة الرسومات: ما المقصود بالزخرفة؟ يمكنك اعتبارها صورة نقطية تم نقلها من الذاكرة الرئيسية (أي ذاكرة الوصول العشوائي) إلى ذاكرة الفيديو (أي ذاكرة الفيديو بتنسيق VRAM على وحدة معالجة الرسومات لديك). وبعد تثبيت وحدة معالجة الرسومات، يمكنك تعيينها إلى هندسة متداخلة، وفي ألعاب الفيديو أو برامج التصميم بمساعدة الكمبيوتر (CAD)، يتم استخدام هذه التقنية لمنح التصاميم الثلاثية الأبعاد للهيكل "الخلفية". ويستخدم Chrome الزخارف للحصول على أجزاء من محتوى صفحة الويب في وحدة معالجة الرسومات. يمكن تعيين الزخارف بتكلفة زهيدة إلى مواضع وتحويلات مختلفة من خلال تطبيقها على شبكة مستطيلة بسيطة حقًا. هذه هي الطريقة التي تعمل بها 3D CSS وهي رائعة أيضًا للتمرير السريع، مع التركيز على كليهما لاحقًا.
لنلقِ نظرة على مثالين لتوضيح مفهوم الطبقات.
أداة مفيدة جدًا عند دراسة الطبقات في Chrome هي علامة "إظهار حدود الطبقات المركّبة" في الإعدادات (أي رمز الترس الصغير) في "أدوات مطوري البرامج" تحت عنوان "العرض". وهي تُبرز بسهولة أماكن ظهور الطبقات على الشاشة. لنفعِّل هذا الوضع. تم أخذ لقطات الشاشة والأمثلة هذه كلها من أحدث إصدار من Chrome Canary، وهو Chrome 27 في وقت كتابة هذا التقرير.
الشكل 1: صفحة أحادية الطبقة
<!doctype html>
<html>
<body>
<div>I am a strange root.</div>
</body>
</html>
هذه الصفحة تحتوي على طبقة واحدة فقط. تمثّل الشبكة الزرقاء المربّعات التي يمكنك اعتبارها وحدات فرعية لطبقة يستخدمها Chrome لتحميل أجزاء من طبقة كبيرة مرة واحدة إلى وحدة معالجة الرسومات. إنها ليست مهمة حقًا هنا.
الشكل 2: عنصر في الطبقة الخاصة به
<!doctype html>
<html>
<body>
<div style="transform: rotateY(30deg) rotateX(-30deg); width: 200px;">
I am a strange root.
</div>
</body>
</html>
من خلال وضع خاصية CSS ثلاثية الأبعاد على <div> تؤدي إلى تدويرها، يمكننا معرفة الشكل الذي تظهر به عندما يحصل العنصر على طبقته الخاصة: اطّلِع على الحد البرتقالي الذي يحدّد الطبقة في هذا العرض.
معايير إنشاء الطبقات
ماذا أيضًا يحصل على طبقته الخاصة؟ لقد تطورت إرشادات Chrome هنا بمرور الوقت، وما زالت تعمل، ولكن في الوقت الحالي يتم إنشاء أي من التالي في إنشاء طبقة المشغِّل:
- تحويل خصائص CSS ثلاثي الأبعاد أو المنظور
- عناصر
<video>تستخدم فك ترميز فيديو مسرَّع - عناصر
<canvas>ذات سياق ثلاثي الأبعاد (WebGL) أو سياق ثنائي الأبعاد مسرَّع - مكونات إضافية مركبة (مثل Flash)
- العناصر التي تحتوي على رسم متحرك من CSS لمستوى تعتيمها أو استخدام تحويل متحرك
- عناصر تتضمن فلاتر CSS المسرّعة
- العنصر يحتوي على عنصر تابع له طبقة مركّبة (بمعنى آخر إذا كان العنصر يحتوي على عنصر ثانوي في طبقته الخاصة)
- العنصر له شقة ذات مؤشر z منخفض وبه طبقة تركيب (بمعنى آخر، يتم عرضه فوق طبقة مركّبة)
الآثار العملية: الصور المتحركة
يمكننا تحريك الطبقات أيضًا، مما يجعلها مفيدة جدًا للصور المتحركة.
الشكل 3: الطبقات المتحركة
<!doctype html>
<html>
<head>
<style>
div {
animation-duration: 5s;
animation-name: slide;
animation-iteration-count: infinite;
animation-direction: alternate;
width: 200px;
height: 200px;
margin: 100px;
background-color: gray;
}
@keyframes slide {
from {
transform: rotate(0deg);
}
to {
transform: rotate(120deg);
}
}
</style>
</head>
<body>
<div>I am a strange root.</div>
</body>
</html>
كما ذكرنا سابقًا، تُعد الطبقات مفيدة حقًا للتنقل بين محتوى الويب الثابت. في الحالة الأساسية، يرسم Chrome محتويات الطبقة في صورة نقطية برمجية قبل تحميلها إلى وحدة معالجة الرسومات كزخرفة. وإذا لم يتغيّر المحتوى في المستقبل، ليس عليك إعادة عرضه. هذا أمر جيد: تستغرق إعادة الرسم وقتًا يمكن قضاؤه في أشياء أخرى، مثل تشغيل JavaScript، وإذا كانت مدة الرسم طويلة، فإنها تتسبب في حدوث عوائق أو تأخير في الرسوم المتحركة.
على سبيل المثال، انظر إلى طريقة العرض هذه للمخطط الزمني لأدوات مطوّري البرامج: ما مِن عمليات طلاء أثناء تدوير هذه الطبقة ذهابًا وإيابًا.
غير صالح. إعادة طلاء
ولكن إذا تغير محتوى الطبقة، فيجب إعادة طلاءها.
الشكل 4: إعادة طلاء الطبقات
<!doctype html>
<html>
<head>
<style>
div {
animation-duration: 5s;
animation-name: slide;
animation-iteration-count: infinite;
animation-direction: alternate;
width: 200px;
height: 200px;
margin: 100px;
background-color: gray;
}
@keyframes slide {
from {
transform: rotate(0deg);
}
to {
transform: rotate(120deg);
}
}
</style>
</head>
<body>
<div id="foo">I am a strange root.</div>
<input id="paint" type="button" value="repaint">
<script>
var w = 200;
document.getElementById('paint').onclick = function() {
document.getElementById('foo').style.width = (w++) + 'px';
}
</script>
</body>
</html>
في كل مرة يتم فيها النقر على عنصر الإدخال، يزداد عرض العنصر الدوّار بمقدار 1 بكسل. يتسبب هذا في إعادة تخطيط العنصر بالكامل وإعادة عرضه، والذي يكون في هذه الحالة طبقة كاملة.
من الطرق الجيدة لمعرفة ما يتم رسمه هي استخدام أداة "إظهار أشكال الشكل" في أدوات مطوّري البرامج ضمن عنوان "العرض" ضِمن إعدادات أدوات مطوّري البرامج. بعد تشغيله، لاحظ أن العنصر المتحركة والزر يومضان باللون الأحمر عند النقر على الزر.
تظهر أحداث الرسم في المخطط الزمني لأدوات مطوّري البرامج أيضًا. قد يلاحظ القرّاء ذوو العيون الحادة حدثين للطلاء: أحدهما للطبقة والآخر للزر نفسه، وتتم إعادة صياغته عند تغيّر حالته للاكتئاب أو عند تغييره.
وتجدر الإشارة إلى أن Chrome لا يحتاج دائمًا إلى إعادة طلاء الطبقة بأكملها، فهو يحاول أن يتسم بالذكاء والسرعة في إعادة طلاء جزء DOM الذي تم إبطاله فقط. في هذه الحالة، يكون عنصر DOM الذي عدّلناه هو حجم الطبقة بالكامل. ولكن في العديد من الحالات الأخرى، سيكون هناك الكثير من عناصر DOM في الطبقة.
السؤال التالي الواضح هو ما الذي يسبب الإبطال وفرض إعادة العرض. ومن الصعب الإجابة عن هذا السؤال بشكل شامل لأنّ هناك الكثير من الحالات الحدّية التي قد تفرض إبطالًا. يُعد السبب الأكثر شيوعًا هو إتلاف DOM عن طريق معالجة أنماط CSS أو التسبب في إعادة التنسيق. لدى "توني جينتيلكور" مشاركة مدونة رائعة حول أسباب إعادة التنسيق، ولدى "ستويان ستيفانوف" مقالة تتناول الرسم بالألوان بمزيد من التفصيل (إلا أنّ المحتوى ينتهي بالرسم فقط، وليس بالأعمال الفنية الرائعة).
أفضل طريقة لمعرفة ما إذا كانت تؤثر في شيء ما تعمل عليه هي استخدام أدوات المخطط الزمني لأدوات مطوّري البرامج وإظهار أدوات الطلاء لمعرفة ما إذا كنت تريد إعادة الرسم في حال لم تتم إعادته، ثم حاول تحديد موضع إزالة DOM قبل إعادة التنسيق/إعادة الرسم مباشرةً. إذا كان الرسم أمر لا مفر منه، ولكنه يستغرق وقتًا طويلاً بشكل غير معقول، يمكنك الاطّلاع على مقالة "إيبرهارد غراذر" حول وضع "الرسم المستمر" في أدوات مطوّري البرامج.
خلاصة البيانات: نموذج العناصر في المستند (DOM) على الشاشة
إذًا، كيف يحوّل Chrome نموذج كائن المستند (DOM) إلى صورة شاشة؟ ومن الناحية النظرية، إنها:
- يأخذ DOM ويقسمه إلى طبقات
- ترسم كل طبقة من هذه الطبقات بشكل مستقل في صور نقطية للبرنامج
- لتحميلها إلى وحدة معالجة الرسومات كزخارف
- يدمج الطبقات المختلفة معًا في صورة الشاشة النهائية.
ويجب أن يحدث كل ذلك في المرّة الأولى التي يُنتج فيها Chrome إطارًا لصفحة ويب. ولكن بعد ذلك، يمكن أن يستغرق الأمر بعض الاختصارات للإطارات المستقبلية:
- في حال تغيير بعض خصائص CSS، ليس من الضروري إعادة عرض أي عنصر. يستطيع Chrome إعادة تركيب الطبقات الحالية الموجودة بالفعل في وحدة معالجة الرسومات كزخارف ولكن بخصائص تركيب مختلفة (على سبيل المثال، في مواضع مختلفة، وبدرجات تعتيم مختلفة، وما إلى ذلك).
- إذا تم إبطال صلاحية جزء من طبقة، تتم إعادة عرضه وإعادة تحميله. وفي حال بقي المحتوى كما هو ولكن تغيّرت سماته المركّبة (على سبيل المثال، عندما تتم ترجمته أو تغيّر تعتيمه)، يمكن لمتصفِّح Chrome تركه على وحدة معالجة الرسومات وإعادة تركيبه لإنشاء إطار جديد.
كما يجب أن يكون واضحًا الآن، فإن نموذج التركيب المستند إلى الطبقات له آثار عميقة على أداء العرض. يعتبر التركيب منخفض التكلفة إلى حد كبير عندما لا تحتاج إلى طلاء أي طبقات، لذا من المفيد تجنّب إعادة طلاء الطبقات بشكل عام عند محاولة تصحيح أخطاء العرض. سيلقي مطوّرو البرامج المتمرسون نظرة على قائمة إنشاء المشغلات أعلاه ويدركون أنه من الممكن فرض إنشاء طبقات بسهولة. ولكن احذر من إنشائها بشكل عشوائي، لأنّها ليست مجانية، فهي تستهلك ذاكرة في ذاكرة الوصول العشوائي للنظام وفي وحدة معالجة الرسومات (محدودة بشكل خاص على الأجهزة الجوّالة)، وقد يؤدي استخدام الكثير منها إلى زيادة مقدار النفقات العامة الأخرى التي تظهر في المنطق. يمكن للعديد من الطبقات أيضًا زيادة الوقت المُستغرَق في إجراء الصور النقطية إذا كانت الطبقات كبيرة ومتداخلة كثيرًا حيث لم تكن موجودة من قبل، ما يؤدي إلى ما يُشار إليه أحيانًا باسم "تجاوز"، لذا استخدِم معلوماتك بحكمة.
هذا كل ما لدينا الآن. ننصحك بمتابعتنا للحصول على مزيد من المقالات حول الآثار العملية لنموذج الطبقات.