शुरुआती गाइड सीएसएस ऑब्जेक्ट मॉडल (CSSOM) के लिए

के बीच बहुत कुछ होता है पहले HTTP अनुरोध और यह अंतिम वितरण एक वेब पेज की। डेटा ट्रांसमिशन और ब्राउज़र के रेंडरिंग पाइपलाइन के लिए बहुत सी विभिन्न तकनीकों की आवश्यकता होती है, उनमें से एक है सीएसएस ऑब्जेक्ट मॉडल, या CSSOM.

CSS Object Model CSS कोड लेता है, और हर चयनकर्ता को प्रस्तुत करता है एक पेड़ की संरचना में आसान पार्सिंग के लिए। शायद डेवलपर्स के लिए इस अवधारणा को पूरी तरह से समझना महत्वपूर्ण नहीं है, लेकिन यदि आप इसके बारे में अधिक जानना चाहते हैं तो यह अध्ययन करने के लिए एक मूल्यवान विषय है ब्राउज़र एक कार्यशील वेबसाइट में कोड कैसे प्रस्तुत करते हैं.

इस पोस्ट में, मैं CSS ऑब्जेक्ट मॉडल की मूल बातें कवर करने जा रहा हूं, और आपको दिखाता हूं कि यह कैसे काम करता है.

CSSOM क्या है?

सीएसएस ऑब्जेक्ट मॉडल शब्द एक का वर्णन करता है सभी सीएसएस चयनकर्ताओं और प्रत्येक चयनकर्ता के लिए प्रासंगिक गुणों का मानचित्र. ये शैलियाँ मूल तत्व हो सकती हैं या बच्चों के लिए निहित हैं.

CSSOM बहुत समान है HTML में DOM करें, जो डॉक्यूमेंट ऑब्जेक्ट मॉडल के लिए है। दोनों का हिस्सा हैं महत्वपूर्ण प्रतिपादन पथ जो चरणों की एक श्रृंखला है जो अवश्य होनी चाहिए ठीक से एक वेबसाइट प्रस्तुत करना. ये सारी प्रक्रियाएं होती हैं खुद ब खुद, परदे के पीछे.

तो CSSOM क्यों महत्वपूर्ण है? यह ब्राउज़र द्वारा उपयोग किया जाने वाला मानचित्र है सीएसएस शैलियों को ठीक से प्रस्तुत करना एक वेब पेज पर। कंप्यूटर को यह बताने का कोई आसान तरीका नहीं है कि सभी पैराग्राफ में .मुख्य सामग्री div में अतिरिक्त लाइन-ऊंचाई होनी चाहिए.

इसका समाधान CSS Object Model है सभी तत्वों और गुणों के नक्शे अपने सीएसएस कोड से.

CSSOM ब्राउज़र के लिए इसे आसान बनाता है पृष्ठ पर शैलियों को प्रस्तुत करना. पूरी बात बहुत ही तकनीकी है लेकिन यह प्रक्रिया के बारे में थोड़ा समझने लायक है, खासकर यदि आप वेबसाइट बनाते हैं.

यह काम किस प्रकार करता है

DOM और CSSOM दोनों हैं सभी वेब ब्राउज़रों द्वारा बड़े पैमाने पर उपयोग किया जाता है वेब पृष्ठों की व्याख्या और प्रस्तुत करना। नीचे दिए गए आरेख Google डेवलपर्स वेब फंडामेंटल गाइड से हैं, और बताते हैं कि कैसे DOM को वेब ब्राउजर में रेंडर किया गया है.

DOM और CSSOM दोनों में, सभी जानकारी है बाइट्स से डिजिटल मैप्स में परिवर्तित जो वेब दस्तावेज़ में हर तत्व को प्रस्तुत करता है। प्रक्रिया निम्नानुसार काम करती है:

1. ब्राउज़र HTML डाउनलोड करता है एक वेब पेज के लिए.
2. HTML को संसाधित करते समय, पार्सर लिंक तत्व में टकरा सकता है एक बाहरी स्टाइलशीट का संदर्भ देना.
3. यह CSS स्टाइलशीट तब है एक नक्शे में पार्स किया गया CSS Object Model स्पेक्स का उपयोग करना.
4. परिणामी कोड तब हो सकता है DOM में तत्वों के लिए लागू.

यह सब बहुत जल्दी होता है, और होता है हर एक पेज अनुरोध के साथ. नीचे यह अन्य आरेख showcases a CSSOM का उदाहरण पेड़ संरचना.

ध्यान दें कि आरेख के कुछ गुणों में हल्के भूरे रंग के फ़ॉन्ट रंग हैं। ये गुण हैं माता-पिता से विरासत में मिला. चूंकि शरीर में एक विशिष्ट फ़ॉन्ट आकार होता है, इसलिए शरीर के भीतर के सभी तत्वों को भी उस फ़ॉन्ट का आकार मिलता है जब तक कि यह ओवरराइड नहीं होता.

HTML और CSS स्ट्रिंग्स हैं टोकन में परिवर्तित जो तब हो सकता है नोड्स के रूप में समझा ब्राउज़र द्वारा। ये नोड्स जैसे हैं पेड़ की संरचना के भीतर वस्तुएं यह परिभाषित करता है कि पूरे पृष्ठ का निर्माण कैसे किया जाना चाहिए.

CSSOM और DOM पूरी तरह से हैं अलग-अलग डेटा मॉडल, इसलिए वे हैं एक दूसरे के अलग अलग पार्स. लेकिन वे दोनों है इसी तरह की पेड़ संरचनाएं, और दोनों एक ही उद्देश्य पर काम करते हैं: ब्राउज़र को पृष्ठ पर विभिन्न तत्वों को प्रस्तुत करने और पहचानने के लिए एक संरचना प्रदान करता है.

क्यों वेब डेवलपर्स की देखभाल करनी चाहिए

सभी प्रतिपादन के बाद से बैकएंड पर होता है, आपको वास्तव में CSSOM के पेड़ के बारे में ज्यादा चिंता करने की आवश्यकता नहीं है। लेकिन यह समझने के लिए उपयोगी हो सकता है कि यह कैसे काम करता है.

एक बात याद रखें कि CSSOM पूरी तरह से भरी होनी चाहिए वेब पेज प्रदर्शित होने से पहले, क्योंकि यह परिभाषित करेगा कि पृष्ठ के प्रत्येक तत्व को कैसा दिखना चाहिए। यदि पृष्ठ CSSOM से पहले लोड किया गया है, तो यह पहले सादे HTML के रूप में दिखाई देगा, कुछ सेकंड बाद शैलियों द्वारा.

ब्राउज़र विशेष रूप से इससे बचते हैं क्योंकि यह उपयोगकर्ताओं को समाप्त करने के लिए भ्रामक होगा। और यह ध्यान देने योग्य है कि CSSOM कैश नहीं किया जा सकता; यह होना चाहिए प्रत्येक पृष्ठ पर पुनः निर्मित.

एसेट्स को जल्दी लोड करने के लिए वास्तविक सीएसएस फाइलों को कैश किया जा सकता है लेकिन ब्राउजर में पेज को रेंडर करना हमेशा CSSOM पार्सर को चलाने की आवश्यकता होती है. इसका मतलब यह भी है कि जावास्क्रिप्ट प्रतिपादन और प्रदर्शन पर नकारात्मक प्रभाव डाल सकता है.

मैं बाहरी सीएसएस / जेएस संसाधनों और उनके लोड समय के बारे में अधिक जानने के लिए इस लेख को पढ़ने की अत्यधिक अनुशंसा करूंगा.

अपनी साइट को अनुकूलित करने का सबसे अच्छा तरीका है क्राफ्टिंग ए प्राकृतिक झरना संसाधनों का जो अग्रानुक्रम में लोड किया जाता है.

जावास्क्रिप्ट का उपयोग करके CSSOM में हेरफेर करना संभव है क्योंकि यह तकनीकी रूप से JS API है। लेकिन यह JavaScript DOM मैनिपुलेशन की तुलना में किसी उद्देश्य के लिए ज्यादा काम नहीं करता है.

CSSOM के बारे में जानने का बड़ा कारण यह है कि वेबसाइटें वास्तव में कैसे काम करती हैं, इसके बारे में खुद को शिक्षित करना है.

ऐसी बहुत सी चीजें हैं जिन्हें हम अपनाते हैं जो इंटरनेट को सुचारू रूप से चलाती हैं। जब आप पूरी प्रक्रिया के बारे में थोड़ा और समझ लेते हैं तो आप कल्पना कर सकते हैं कि पूरी चीज़ एक साथ कैसे आती है, और उम्मीद है कि वर्ल्ड वाइड वेब के अस्तित्व के लिए कुछ प्रशंसा प्राप्त होगी.

आगे की पढाई

मुझे उम्मीद है कि यह परिचय आपको एक ठोस विचार दे सकता है कि सीएसएस ऑब्जेक्ट मॉडल क्या है, और यह वेब पृष्ठों को कैसे प्रभावित करता है। क्या आप वहां मौजूद हैं CSSOM में हेरफेर करने के लिए बहुत कुछ नहीं है, इसलिए यह DOM से थोड़ा अलग है.

हालाँकि यह अभी भी वेब विकास में एक महत्वपूर्ण तकनीक है, और इसे ब्राउज़र रेंडरिंग के प्रमुख पहलुओं को स्पष्ट करना चाहिए.

CSSOM पर चर्चा करने वाले कई अन्य संसाधन हैं, और यह कैसे काम करता है। यदि आप अधिक जानने के लिए देख रहे हैं, तो यहां कुछ पोस्ट हैं जो मैं सुझाता हूं:

• सीएसएस ऑब्जेक्ट मॉडल अवलोकन
• CSSOM की खोज: एक CSS वस्तु विश्लेषक बनाना
• वेबपेज रेंडरिंग के बारे में हर फ्रंटेंड डेवलपर को क्या पता होना चाहिए