Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

إنشاء شجرة العرض، والتنسيق والطباعة

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

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

TL;DR

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

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

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

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

  1. بداية من الجذر في شجرة DOM، يتم اجتياز كل عقدة مرئية.
  2. بعض العقد لا تكون مرئية تمامًا (مثل علامات النص البرمجي والعلامات الوصفية وهكذا)، ويتم إسقاطها نظرًا لأنها لا تظهر في النتيجة المعروضة.
  3. يتم إخفاء بعض العقد باستخدام CSS، كما يتم إسقاطها من شجرة العرض - على سبيل المثال، تعد العقدة الواردة في المثال أعلاه مفقودة من شجرة العرض نظرًا لأن لدينا قاعدة واضحة تعين الخاصية display: none عليها.
  4. بالنسبة إلى كل عقدة مرئية، ابحث عن قواعد CSSOM المطابقة والمناسبة واستخدمها.
  5. أرسل العقد المرئية التي تتضمن المحتوى والأنماط المحسوبة.

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

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

ولحساب الحجم والموضع الدقيق لكل هدف يبدأ المتصفح من جذر شجرة العرض ويجتازها لحساب هندسة كل هدف على الصفحة. وفي ما يلي مثال عملي على ذلك:

<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 مضمَّنين: الأول (الأساسي) يعين حجم الشاشة للعقدة على 50% من عرض الإطار، بينما الثاني الذي يتضمنه الأساسي يعين العرض على 50% من الأساسي - أي 25% من عرض الإطار.

حساب معلومات التنسيق

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

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

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

قياس التنسيق في DevTools

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

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

وبعد أن يتم كل ذلك، تظهر الصفحة في النهاية ضمن إطار العرض. إنجاز كبير، أليس كذلك؟!

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

الآن دعونا نلخص جميع الخطوات التي يمر بها المتصفح:

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

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

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