تاريخ النشر: 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 عادية تحتوي على نص وصورة واحدة. كيف يعالج المتصفّح هذه الصفحة؟
- التحويل: يقرأ المتصفّح البايتات الأوّلية لملف HTML من القرص أو الشبكة، ويحوّلها إلى أحرف فردية استنادًا إلى ترميز ملف محدّد (مثل UTF-8).
- إنشاء رموز مميّزة: يحوّل المتصفّح سلاسل الأحرف إلى رموز مميزة
على النحو المحدَّد في معيار W3C HTML5
مثل
<html>و<body>وسلاسل أخرى داخل أقواس معقوفة. ولكل رمز مميّز معنى خاص ومجموعة خاصة من القواعد. - التجميع: يتم تحويل الرموز المميزة المنبعثة إلى "كائنات" تحدد خصائصها وقواعدها.
- إنشاء DOM: أخيرًا، نظرًا لأنّ ترميز HTML يحدّد العلاقات بين العلامات المختلفة (بعض العلامات مضمّنة ضمن علامات أخرى)، يتم ربط الكائنات التي تم إنشاؤها في بنية بيانات متفرعة تلتقط أيضًا العلاقات الرئيسية والفرعية المحدّدة في الترميز الأصلي: كائن HTML هو أصل كائن body، يكون النص الأصل لكائن الفقرة، إلى أن يتم إنشاء التمثيل الكامل للمستند.
النتيجة النهائية لهذه العملية بأكملها هي نموذج تمثيل المستندات (DOM) لصفحتنا البسيطة، والذي يستخدمه المتصفّح لإجراء جميع عمليات المعالجة الأخرى للصفحة.
في كل مرة يعالج فيها المتصفح ترميز HTML، يمر عبر جميع الخطوات المحددة مسبقًا: تحويل وحدات البايت إلى أحرف وتحديد الرموز المميزة وتحويل الرموز المميزة إلى عُقد وإنشاء شجرة عناصر DOM. يمكن أن تستغرق هذه العملية بأكملها بعض الوقت، خاصةً إذا كانت لدينا كمية كبيرة من علامات HTML لمعالجتها.
إذا فتحت "أدوات مطوري البرامج في 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:
يتم تحويل وحدات البايت في CSS إلى أحرف، ثم إلى وحدات ترميز، ثم إلى عقد، وأخيرًا يتم ربطها في بنية شجرة تُعرف باسم "نموذج الكيانات في CSS" (CSSOM):
لماذا تتّبع CSSOM بنية شجرة؟ عند احتساب المجموعة النهائية من أنماط أي عنصر على الصفحة، يبدأ المتصفّح بالقاعدة الأكثر عمومية التي تنطبق على هذه العقدة (على سبيل المثال، إذا كان عنصرًا ثانويًا لعنصر النص، يتم تطبيق جميع أنماط النص)، ثم يُعيد المتصفّح تحسين الأنماط المحسوبة بتطبيق قواعد أكثر تحديدًا، أي أنّ القواعد "تنزل بشكل متسلسل".
لجعل المسألة أكثر واقعية، فكِّر في شجرة CSSOM الموضّحة سابقًا. أي نص
مضمّن في علامة <span> التي تم وضعها داخل عنصر النص الأساسي، يكون حجم خطه
16 بكسل ولونه أحمر. يتم تطبيق توجيه font-size
بشكل تسلسلي من body إلى span. ومع ذلك، إذا كان span عنصرًا فرعيًا لعلامة
فقرة (p)، لن يتم عرض محتوياته.
يُرجى العلم أيضًا أنّ الشجرة الموضّحة سابقًا ليست شجرة CSSOM الكاملة، وتفترض فقط الأنماط التي قرّرنا إلغاءها في جدول الأنماط. يقدّم كل متصفّح مجموعة تلقائية من الأنماط تُعرف أيضًا باسم "أنماط وكيل المستخدم"، وهي ما يظهر لنا عندما لا نقدّم أيًا من الأنماط الخاصة بنا، وتتجاهل أنماطنا هذه الأنماط التلقائية.
لمعرفة الوقت الذي تستغرقه معالجة CSS، يمكنك تسجيل مخطط زمني في DevTools والبحث عن الحدث "إعادة احتساب الأسلوب": على عكس تحليل DOM، لا يعرض المخطط الزمني إدخالًا منفصلاً بعنوان "تحليل CSS"، بل يسجّل بدلاً من ذلك تحليل CSSOM وإنشاء شجرة CSSOM، بالإضافة إلى الحساب المتكرّر للتصاميم المحسوبة ضمن هذا الحدث الواحد.
تستغرق معالجة ملف الأنماط البسيطة 0.6 ملي ثانية تقريبًا، ويؤثر في ثمانية عناصر على الصفحة، وهي ليست كثيرة، ولكنّها ليست مجانية. ومع ذلك، من أين جاءت العناصر الثمانية؟ CSSOM وDOM هما بنيتا بيانات مستقلتان! تبيّن أنّ المتصفّح يخفي خطوة مهمة. بعد ذلك، سيتم التطرق إلى شجرة العرض التي تربط DOM وCSSOM معًا.