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

Ilya Grigorik

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

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

ملخّص

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

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

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

لإنشاء شجرة العرض، يُجري المتصفّح ما يلي:

  1. بدءًا من جذر شجرة DOM، اجتَز كل عقدة مرئية.

    • بعض العُقد غير مرئية (على سبيل المثال، علامات النص البرمجي والعلامات الوصفية وما إلى ذلك)، ويتم حذفها لأنّها لا تظهر في الإخراج المعروض.
    • يتم إخفاء بعض العُقد عبر CSS ويتم حذفها أيضًا من شجرة العرض؛ على سبيل المثال، عقدة الامتداد -- في المثال أعلاه-- غير موجودة في شجرة العرض لأن لدينا قاعدة صريحة تحدد السمة "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>

التجربة الآن

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

جارٍ احتساب معلومات التصميم

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

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

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

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

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

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

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

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

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

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

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

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

إضافة ملاحظات