Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

إنشاء نموذج الهدف

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

TL;DR

  • وحدات بايت → الأحرف → الرموز المميزة → العقد → نموذج الهدف.
  • يتم تحويل ترميز HTML إلى نموذج هدف مستند (DOM)، ويتم تحويل ترميز CSS إلى نموذج هدف CSS المعروف اختصارًا باسم CSSOM.
  • يعد كل من DOM وCSSOM تركيبة بيانات مستقلة.
  • يتيح لنا المخطط الزمني لـ Chrome DevTools تحديد وفحص تكاليف الإنشاء والمعالجة في 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 بسيطة تتضمن نصوصًا وصورة واحدة. ما الذي يحتاج إليه المتصفح لمعالجة هذه الصفحة البسيطة؟

عملية إنشاء DOM

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

شجرة DOM

يكون الناتج النهائي لهذه العملية بالكامل عبارة عن نموذج هدف مستند، أو DOM لنموذج الصفحة يستخدمه المتصفح مع جميع العمليات الأخرى للصفحة.

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

تتبع إنشاء DOM في DevTools

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

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

نموذج هدف CSS المعروف اختصارًا باسم (CSSOM)

على الرغم من أن المتصفح كان ينشئ DOM للصفحة البسيطة، فقد واجه علامة رابط في القسم الأساسي للمستند يشير إلى ورقة أنماط 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:

خطوات إنشاء CSSOM

يتم تحويل وحدات بايت في CSS إلى أحرف، ثم إلى رموز مميزة وعقد، وفي النهاية يتم ربطها في بنية شجرة تُعرف باسم نموذج هدف CSS أو ما يُعرف اختصارًا باسم CSSOM:

شجرة CSSOM

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

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

لاحظ كذلك أن الشجرة الواردة أعلاه ليست شجرة CSSOM الكاملة ولن تعرض سوى الأنماط التي قررنا استبدالها في ورقة الأنماط. يقدم كل متصفح مجموعة افتراضية من الأنماط تُعرف أيضًا باسم أنماط وكيل المستخدم -- وهي التي تظهر عندما لا نقدم أيًا من أنماطنا الخاصة -- بينما تحل أنماطنا محل هذه الإعدادات الافتراضية (على سبيل المثال أنماط IE الافتراضية). إذا سبق لك فحص الأنماط المحسوبة في Chrome DevTools وتساءلت من أين تأتي جميع الأنماط، فالآن أصبح الأمر واضحًا.

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

تتبع إنشاء CSSOM في DevTools

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