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

Ilya Grigorik

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

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

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

ملخّص

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

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

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

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

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

    • بعض العُقد غير مرئية (مثل علامات script وعلامات 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>

ألقِ نظرة على مثال HTML هذا المعروض كصفحة ويب.

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

حساب معلومات التنسيق استنادًا إلى الوصف السابق

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

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

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

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

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

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

أخيرًا، تظهر الصفحة في إطار العرض:

صفحة معروضة مكتوب عليها &quot;مرحبًا بكم في صفحة أداء الويب&quot;، وتظهر فيها صورة مضحكة لكلب لطيف يخبرك بأنّك رائع.

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

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

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

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