دليل المبتدئين لنموذج كائن CSS (CSSOM)

الكثير يحدث بين طلب HTTP الأول و ال تسليم نهائي من صفحة الويب. يتطلب نقل البيانات وخط أنابيب عرض المتصفح الكثير من التقنيات المختلفة ، أحدهما هو طراز كائن CSS, أو ال CSSOM.

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

في هذا المنشور ، سأغطي أساسيات نموذج كائن CSS ، وأريكم كيف يعمل.

ما هو CSSOM?

يصف المصطلح CSS Object Model أ خريطة لجميع محددات CSS والخصائص ذات الصلة لكل محدد. يمكن أن تكون هذه الأنماط عناصر جذرية أو يكون لها أطفال متداخلون.

CSSOM يشبه إلى حد كبير دوم في HTML, الذي يمثل نموذج كائن المستند. كلاهما جزء من مسار التقديم الحرج وهي سلسلة من الخطوات التي يجب أن يحدث ل تقديم موقع الويب بشكل صحيح. كل هذه العمليات تحدث تلقائيا, خلف الكواليس.

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

الحل هو CSS Object Model الذي يرسم جميع العناصر والخصائص من كود CSS الخاص بك.

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

كيف تعمل

كلا DOM و CSSOM هما تستخدم على نطاق واسع من قبل جميع متصفحات الويب لتفسير وتقديم صفحات الويب. الرسم البياني أدناه هو من دليل Google Developers Web Fundamentals ، ويشرح كيف يتم تقديم DOM في متصفح الويب.

في كل من DOM & CSSOM ، جميع المعلومات تحويلها من بايت إلى خرائط رقمية التي تجعل كل عنصر في وثيقة الويب. تعمل العملية على النحو التالي:

1. المتصفح يقوم بتنزيل HTML لصفحة ويب.
2. أثناء معالجة HTML ، قد يصطدم المحلل اللغوي بعنصر ارتباط الرجوع إلى ورقة أنماط خارجية.
3. ورقة أنماط CSS هذه هي إذن تحليل في الخريطة باستخدام المواصفات CSS Object Model.
4. الرمز الناتج يمكن أن يكون بعد ذلك تطبق على العناصر في DOM.

كل هذا يحدث بسرعة كبيرة ، ويحدث مع كل طلب صفحة واحدة. هذا المخطط الآخر أدناه يعرض هيكل شجرة المثال من CSSOM.

لاحظ كيف أن بعض الخصائص في الرسم البياني لها ألوان خطوط رمادية أفتح. هذه الخصائص هي ورثت من الوالد. نظرًا لأن النص الأساسي يحتوي على حجم خط معين ، فإن جميع العناصر داخل النص تحصل أيضًا على حجم الخط هذا إلا إذا تم تجاوزه.

سلاسل HTML و CSS هي تحويلها إلى الرموز والتي يمكن أن تكون بعد ذلك يفهم العقد بواسطة المتصفح. هذه العقد هي مثل كائنات داخل هيكل الشجرة يحدد كيفية بناء الصفحة بأكملها.

و CSSOM و DOM تماما نماذج البيانات منفصلة, لذلك هم تحليل بشكل منفصل عن بعضها البعض. لكن كلاهما يملك هياكل شجرة مماثلة, ويخدم كلاهما نفس الغرض: إعطاء المستعرض بنية لعرض العناصر المختلفة على الصفحة وتحديدها.

لماذا يجب أن مطوري الويب الرعاية

منذ كل التقديم يحدث على الخلفية, أنت حقا لا داعي للقلق كثيرا حول شجرة CSSOM. ولكن يمكن أن يكون من المفيد أن نفهم كيف يعمل.

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

تتجنب المتصفحات ذلك على وجه التحديد لأنه سيكون مربكًا للمستخدمين النهائيين. والجدير بالذكر أن CSSOM لا يمكن أن يكون مؤقتا. يجب ان يكون صوغه في كل صفحة.

يمكن تخزين ملفات CSS الفعلية من أجل تحميل الأصول بشكل أسرع ولكن تقديم صفحة في المتصفح يتطلب دائمًا تشغيل المحلل اللغوي CSSOM. هذا يعني أيضًا أن JavaScript يمكن أن يكون له تأثير سلبي على العرض والأداء.

أوصي بشدة قراءة هذه المقالة لمعرفة المزيد حول موارد CSS / JS الخارجية وأوقات تحميلها.

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

من الممكن معالجة CSSOM باستخدام JavaScript لأنها تقنية JS API تقنيًا. لكنه لا يخدم الكثير من الأغراض مقارنة بمعالج JavaScript DOM.

السبب الأكبر للتعرف على CSSOM هو زيادة تثقيف نفسك فيما يتعلق بكيفية عمل المواقع فعليًا.

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

قراءة متعمقة

آمل أن توفر لك هذه المقدمة فكرة قوية عن ماهية نموذج كائن CSS ، وكيف تؤثر على صفحات الويب. هناك ليس الكثير للتلاعب به في CSSOM, لذلك يختلف قليلا عن DOM.

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

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

• نظرة عامة على طراز كائن CSS
• استكشاف CSSOM: عمل محلل كائنات CSS
• ما يجب أن يعرفه كل مطور Frontend حول تقديم صفحة ويب