بناء الشجرة والتصميم والطلاء

Ilya Grigorik

تاريخ النشر: 31 آذار/مارس 2014

يتم دمج شجرتَي CSSOM وDOM في شجرة عرض، ثم يتم استخدامها لحساب تخطيط كل عنصر مرئي، كما أنّها تُستخدَم كمدخل لعملية الطلاء التي تعرض وحدات البكسل على الشاشة. ويُعدّ تحسين كل خطوة من هذه الخطوات أمرًا بالغ الأهمية لتحقيق أفضل أداء ممكن في العرض.

في القسم السابق حول إنشاء نموذج الكائن، أنشأنا شجرتَي DOM وCSSOM استنادًا إلى إدخال HTML وCSS. ومع ذلك، فإنّ كليهما عبارة عن عنصرين مستقلين يسجلان جوانب مختلفة من المستند: يصف أحدهما المحتوى، بينما يصف الآخر قواعد الأنماط التي يجب تطبيقها على المستند. كيف يمكننا دمج الاثنين معًا وجعل المتصفّح يعرض وحدات البكسل على الشاشة؟

ملخّص

  • يتم دمج شجرتَي DOM وCSSOM لتكوين شجرة العرض.
  • لا تحتوي شجرة العرض إلا على العُقد المطلوبة لعرض الصفحة.
  • يحسب التخطيط الموضع والحجم الدقيقَين لكل عنصر.
  • الخطوة الأخيرة هي الطلاء، وهي تستخدم شجرة العرض النهائية وتعرض وحدات البكسل على الشاشة.

أولاً، يجمع المتصفّح بين DOM وCSSOM في "شجرة عرض"، والتي تتضمّن كل محتوى DOM المرئي على الصفحة وكل معلومات أنماط CSSOM لكل عقدة.

يتم دمج DOM وCSSOM لإنشاء شجرة العرض

لإنشاء شجرة العرض، ينفّذ المتصفّح الخطوات التالية تقريبًا:

  1. ابدأ من جذر شجرة نموذج العناصر في المستند، وتنقّل بين كل عقدة مرئية.

    • بعض العُقد غير مرئية (مثل علامات البرامج النصية وعلامات meta وما إلى ذلك)، ويتم حذفها لأنّها لا تظهر في الناتج المعروض.
    • يتم إخفاء بعض العُقد باستخدام CSS، كما يتم حذفها من شجرة العرض. على سبيل المثال، عقدة span في المثال أعلاه غير موجودة في شجرة العرض لأنّ لدينا قاعدة صريحة تضبط السمة "display: none" عليها.

  2. لكل عقدة مرئية، ابحث عن قواعد CSSOM المطابقة المناسبة وطبِّقها.

  3. إصدار عُقد مرئية تتضمّن المحتوى والأنماط المحسوبة

الناتج النهائي هو شجرة عرض تحتوي على كل من المحتوى ومعلومات الأنماط لجميع المحتوى المرئي على الشاشة. بعد إنشاء شجرة العرض، يمكننا الانتقال إلى مرحلة "التصميم".

حتى هذه المرحلة، نكون قد حسبنا العُقد التي يجب أن تكون مرئية وأنماطها المحسوبة، ولكننا لم نحسب موضعها وحجمها الدقيقَين ضمن إطار العرض للجهاز، وهذه هي مرحلة "التصميم"، المعروفة أيضًا باسم "إعادة التدفق".

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

جرِّبه

يحتوي <body> في المثال السابق على عنصرَين متداخلَين من النوع <div>: يضبط العنصر الأول (العنصر الرئيسي) حجم العرض للعقدة على 50% من عرض إطار العرض، ويضبط العنصر الثاني <div>، الذي يحتوي عليه العنصر الرئيسي، قيمة width على 50% من العنصر الرئيسي، أي% 25 من عرض إطار العرض.<div>

احتساب معلومات التصميم

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

أخيرًا، بعد أن عرفنا العُقد المرئية وأنماطها المحسوبة وأشكالها الهندسية، يمكننا تمرير هذه المعلومات إلى المرحلة النهائية التي تحوّل كل عقدة في شجرة العرض إلى وحدات بكسل فعلية على الشاشة. يُشار إلى هذه الخطوة غالبًا باسم "الرسم" أو "التحويل إلى صورة نقطية".

قد يستغرق ذلك بعض الوقت لأنّ المتصفّح عليه تنفيذ الكثير من العمليات. ومع ذلك، يمكن أن تقدّم "أدوات مطوّري البرامج في Chrome" بعض المعلومات عن جميع المراحل الثلاث الموضّحة سابقًا. لنتفحّص مرحلة التنسيق في مثال "hello world" الأصلي:

قياس التنسيق في &quot;أدوات مطوّري البرامج&quot;

  • يسجّل الحدث "التصميم" إنشاء شجرة العرض والموضع وحساب الحجم في "المخطّط الزمني".
  • عند اكتمال التنسيق، يصدر المتصفّح الحدثَين "إعداد العرض" و "العرض"، ما يؤدي إلى تحويل شجرة العرض إلى وحدات بكسل على الشاشة.

يختلف الوقت المطلوب لإنشاء شجرة العرض والتنسيق والرسم استنادًا إلى حجم المستند والأنماط المطبّقة والجهاز الذي يتم تشغيله عليه: كلما كان المستند أكبر، زاد العمل الذي يجب أن يقوم به المتصفّح، وكلما كانت الأنماط أكثر تعقيدًا، زاد الوقت المستغرَق في الرسم أيضًا (على سبيل المثال، يكون رسم لون ثابت "رخيصًا"، بينما يكون احتساب الظل المسقط وعرضه "مكلفًا").

أصبحت الصفحة مرئية أخيرًا في إطار العرض:

صفحة &quot;Hello World&quot; المعروضة

في ما يلي ملخّص سريع لخطوات المتصفّح:

  1. معالجة ترميز HTML وإنشاء شجرة نموذج العناصر في المستند
  2. معالجة ترميز CSS وإنشاء شجرة CSSOM
  3. دمج DOM وCSSOM في شجرة عرض
  4. يتم تنفيذ التنسيق على شجرة العرض لاحتساب شكل كل عقدة.
  5. رسم العُقد الفردية على الشاشة

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

تحسين مسار العرض الحرج هو عملية تقليل إجمالي الوقت المستغرَق في تنفيذ الخطوات من 1 إلى 5 في التسلسل أعلاه. يؤدي ذلك إلى عرض المحتوى على الشاشة بأسرع ما يمكن، كما يقلّل من الوقت بين تحديثات الشاشة بعد العرض الأوّلي، أي تحقيق معدّلات تحديث أعلى للمحتوى التفاعلي.

الملاحظات