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

Ilya Grigorik

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

يتم دمج شجرتَي بيانات 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>

التجربة

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

حساب معلومات التخطيط

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظات