إنشاء نموذج الكائن

Ilya Grigorik

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

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

ملخّص

  • البايتات → الأحرف → الرموز المميزة → العقد → نموذج العنصر
  • يتم تحويل ترميز HTML إلى نموذج تمثيل المستندات (DOM)، ويتم تحويل ترميز CSS إلى نموذج تمثيل عناصر CSS (CSSOM).
  • DOM وCSSOM هما هيكلان مستقلان للبيانات.
  • تتيح لنا لوحة "الأداء" في "أدوات مطوّري البرامج في Chrome" تسجيل تكاليف إنشاء DOM وCSSOM وفحصها.

نموذج كائن المستند (DOM)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

التجربة الآن

ابدأ بأبسط حالة ممكنة: صفحة HTML عادية تتضمّن نصًا وصورة واحدة. كيف يعالج المتصفّح هذه الصفحة؟

عملية إنشاء نموذج عناصر المستند

  1. التحويل: يقرأ المتصفّح البايتات الأوّلية لملف HTML من القرص أو الشبكة، ويحوّلها إلى أحرف فردية استنادًا إلى ترميز ملف محدّد (مثل UTF-8).
  2. إنشاء رموز مميّزة: يحوّل المتصفّح سلاسل الأحرف إلى رموز مميّزة. الرموز المميزة: كما هو محدد في معيار HTML5 لـ W3C على سبيل المثال، <html> و<body> وسلاسل أخرى ضمن أقواس زاوية. ولكل رمز مميّز معنى خاص به ومجموعة من القواعد الخاصة به.
  3. التجميع: يتم تحويل الرموز المميزة المنبعثة إلى "كائنات"، التي تحدد وخصائصها وقواعدها.
  4. إنشاء DOM: أخيرًا، بما أنّ ترميز HTML يحدّد العلاقات بين العلامات المختلفة (تتضمّن بعض العلامات علامات أخرى)، يتم ربط العناصر التي تم إنشاؤها في بنية بيانات شجرة تُسجِّل أيضًا العلاقات بين العناصر الرئيسية والعناصر الفرعية المحدّدة في الترميز الأصلي: عنصر HTML هو عنصر رئيسي لعنصر body، وعنصر body هو عنصر رئيسي لعنصر paragraph، إلى أن يتم إنشاء التمثيل الكامل للمستند.

شجرة نموذج العناصر في المستند

النتيجة النهائية لهذه العملية بالكامل هي نموذج كائن المستند (DOM) لصفحتنا البسيطة، التي يستخدمها المتصفح لإجراء جميع عمليات المعالجة الإضافية .

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

تتبُّع إنشاء نموذج العناصر في المستند (DOM) في &quot;أدوات مطوّري البرامج&quot;

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

تلتقط شجرة نموذج العناصر في المستند خصائص وعلاقات ترميز المستند، لكنه لا يخبرنا كيف سيبدو العنصر عند عرضه. تلك هي مسئولية CSSOM.

نموذج عنصر CSS (CSSOM)

أثناء إنشاء المتصفّح لـ DOM للصفحة الأساسية، صادفه عنصر <link> في <head> من المستند يشير إلى جدول style.css ملفّ style.css. ولأنّه يتوقع أنّه يحتاج إلى هذا المورد لعرض الصفحة، يُرسِل طلبًا على الفور للحصول على هذا المورد، والذي يعود بالمحتوى التالي:

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

span {
  color: red;
}

p span {
  display: none;
}

img {
  float: right;
}

كان بإمكاننا الإعلان عن أنماطنا مباشرةً ضمن ترميز HTML (مضمّن)، ولكن كما أن إبقاء CSS مستقلاً عن HTML يتيح لنا التعامل مع المحتوى والتصميم اهتمامات منفصلة: يمكن للمصممين العمل على CSS، ويستطيع المطورون التركيز على HTML، بالإضافة إلى المخاوف الأخرى.

كما هو الحال مع HTML، نحتاج إلى تحويل قواعد CSS التي تم استلامها إلى محتوى يمكن للمتصفح فهمها والعمل عليها. وبالتالي، نكرر عملية HTML، ولكن بالنسبة لـ CSS بدلاً من HTML:

خطوات إنشاء CSSOM

يتم تحويل وحدات بايت CSS إلى أحرف، ثم رموز مميزة، ثم عُقد، يتم ربطها في النهاية ببنية شجرة تُعرف باسم "نموذج كائن CSS" (CSSOM):

شجرة CSSOM

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

لجعل الأمر أكثر واقعية، فكِّر في شجرة CSSOM الموضّحة سابقًا. أي نص مضمّن في علامة <span> التي تم وضعها داخل عنصر النص الأساسي، يكون حجم خطه 16 بكسل ولونه أحمر. وينطبق توجيه font-size بشكل تسلسلي من body إلى span. ومع ذلك، إذا كانت span عنصرًا فرعيًا من الفقرة (p)، فلن يتم عرض محتواها.

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

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

تتبُّع إنشاء CSSOM في أدوات مطوّري البرامج

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

ملاحظات