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

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 المطوّرين بعض الإحصاءات حول المراحل الثلاث الموضّحة سابقًا. راجِع مرحلة التنسيق لمثال "مرحبًا بك في العالم" الأصلي:

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

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

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

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

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

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

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

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

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

ملاحظات