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

Ilya Grigorik

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

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

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

ملخّص

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

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

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

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

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

    • لا تكون بعض العقد مرئية (مثل علامات النصوص البرمجية والعلامات الوصفية وما إلى ذلك)، ويتم حذفها لأنّها لا تظهر في الإخراج المعروض.
    • يتم إخفاء بعض العقد باستخدام 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> متداخلَين: يضبط <div> الأول (الرئيسي) حجم عرض العقدة على 50% من عرض إطار العرض، ويضبط <div> الثاني الذي يحتويه العنصر الرئيسي width على 50% من العنصر الرئيسي، أي ‎25% من عرض إطار العرض.

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظات