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