👧🏿 🙎🏿 🕌 वेबसाइट रेंडरिंग 101 👨🏼‍🚀 🍆 🧒🏿

आप ब्राउज़र के एड्रेस बार में साइट का नाम दर्ज करें, एंटर दबाएं, और आदत से बाहर आप अनुरोधित पृष्ठ देखें। यह सरल है: मैंने साइट का नाम दर्ज किया - साइट प्रदर्शित की गई। हालांकि, अधिक जिज्ञासु के लिए, मैं आपको बताना चाहता हूं कि क्या होता है जबकि ब्राउज़र साइट के टुकड़ों को प्राप्त करना शुरू कर देता है (हां, साइट टुकड़ों में आती है, दूसरे शब्दों में, विखंडू) और पूरी तरह से खींचा गया पृष्ठ प्रदर्शित करता है।

ब्राउज़र कैसे काम करता है?

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

उपयोगकर्ता इंटरफ़ेस वह सब है जो उपयोगकर्ता देखता है: पता बार, आगे / पीछे बटन, मेनू, बुकमार्क - उस क्षेत्र को छोड़कर जहां साइट प्रदर्शित होती है।

ब्राउजर इंजन यूजर इंटरफेस और रेंडरिंग इंजन के बीच की बातचीत के लिए जिम्मेदार है। उदाहरण के लिए, बैक बटन पर क्लिक करके आरई घटक को बताना चाहिए कि पिछली स्थिति को आकर्षित करना आवश्यक है।

वेब पेज प्रदर्शित करने के लिए रेंडरिंग इंजन जिम्मेदार है। फ़ाइल के प्रकार के आधार पर, यह घटक HTML / XML और CSS दोनों के साथ-साथ पीडीएफ को पार्स और रेंडर कर सकता है।

नेटवर्क संसाधनों के लिए xhr अनुरोध करता है, और सामान्य तौर पर, ब्राउज़र इस घटक के माध्यम से बाकी इंटरनेट के साथ संचार करता है, जिसमें समीपवर्ती, कैशिंग, और इसी तरह शामिल है।

JS Engine वह स्थान है जहाँ js कोड को पार्स और निष्पादित किया जाता है।

यूआई बैकेंड का उपयोग मानक घटकों जैसे चेकबॉक्स, इनपुट, बटन को खींचने के लिए किया जाता है।

डेटा की दृढ़ता स्थानीय डेटा को संग्रहीत करने के लिए ज़िम्मेदार है, जैसे कि कुकीज़, सेशनस्टोर, इंडेक्सडीबी, और इसी तरह।

अगला, हम सीखते हैं कि कैसे माना जाता है कि ब्राउज़र के घटक एक-दूसरे के साथ बातचीत करते हैं और अधिक विस्तार से विश्लेषण करते हैं कि रेंडरिंग इंजन के अंदर क्या हो रहा है। दूसरे शब्दों में ...

ब्राउज़र स्क्रीन पर HTML को पिक्सेल में कैसे अनुवाद करता है?

तो, नेटवर्क घटक की मदद से, ब्राउज़र को चंक्स के साथ HTML-फाइल प्राप्त करना शुरू हो गया, आमतौर पर 8kb, आगे क्या है? और फिर घटक में इस फ़ाइल के पार्सिंग (प्रक्रिया विनिर्देश ) और इस प्रक्रिया का प्रतिपादन आता है, जैसा कि आपने अनुमान लगाया होगा - रेंडरिंग इंजन।

महत्वपूर्ण! प्रयोज्य बढ़ाने के लिए, ब्राउज़र तब तक इंतजार नहीं करता है जब तक कि सभी HTML लोड और पार्स न हो जाए। इसके बजाय, ब्राउज़र तुरंत उपयोगकर्ता को पृष्ठ प्रदर्शित करने की कोशिश करता है (इसके बाद, हम विचार करेंगे कि कैसे)।

पार्सिंग प्रक्रिया स्वयं इस तरह दिखती है:

पार्सिंग का परिणाम एक डोम ट्री है । उदाहरण के लिए निम्न HTML लें:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Rendering</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>Hey</h1> </div> <div class="content"> <p> Lorem <span>ipsum</span>. </p> </div> <footer> Contact me </footer> </div> <script src="./code.js"></script> </body> </html>

ऐसी html फ़ाइल का DOM ट्री इस तरह दिखेगा:

जैसे ही ब्राउज़र HTML फ़ाइल को पार्स करता है, यह तीसरे पक्ष के संसाधनों के लिंक वाले टैग का सामना करता है ( <लिंक>, <स्क्रिप्ट>, <img> और इसी तरह) - जैसा कि उन्हें पता चला है, इन संसाधनों के लिए एक अनुरोध होता है।

इस प्रकार, टैग के href विशेषता में निर्धारित पते पर एक अनुरोध भेजकर <लिंक rel = "स्टाइलशीट"> और css स्टाइल फ़ाइल प्राप्त करने के बाद, ब्राउज़र इस फ़ाइल को पार्स करता है और तथाकथित CSS ऑब्जेक्ट मॉडल - CSSOM बनाता है ।

कल्पना कीजिए कि हमारे पास ऐसी स्टाइलशीट है:

 body { font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .wrapper .header h1 { font-size: 26px; } .wrapper p { color: red; } footer { padding: 20px 0; }

जिससे हमें यह CSSOM मिलता है:

ध्यान दें: यहाँ एक पेड़ हमारी css फ़ाइल की शैलियों से बनाया गया है। इसके अलावा, उपयोगकर्ता एजेंट्स की शैलियाँ भी हैं - डिफ़ॉल्ट ब्राउज़र शैलियाँ और इनलाइन शैलियाँ - जो html टैग्स में निर्धारित हैं।

आप विनिर्देश में सीएसएस शैलियों पार्सिंग एल्गोरिथ्म के बारे में अधिक पढ़ सकते हैं।

अब हमारे पास DOM और CSSOM है - पहला प्रश्न "क्या?" का उत्तर देता है, दूसरा प्रश्न "कैसे?" का उत्तर देता है। अगर आपको लगता है कि अगला कदम DOM और CSSOM को मिलाना है, तो आप बिल्कुल सही हैं! DOM + CSSOM = रेंडर ट्री।

रेंडर ट्री दृश्यमान (!) तत्वों का एक पेड़ है, जिसे उस क्रम में बनाया गया है, जिसमें उन्हें पृष्ठ पर प्रस्तुत किया जाना चाहिए। कृपया ध्यान दें कि जिन तत्वों में css नियम प्रदर्शन है: कोई भी या अन्य जो प्रदर्शन को प्रतिकूल रूप से प्रभावित करते हैं, रेंडर ट्री में नहीं होंगे।

ब्राउज़र रेंडर ट्री का निर्माण यह निर्धारित करने के लिए करता है कि उसे वास्तव में क्या और किस क्रम में प्रस्तुत करना है। रेंडर ट्री का निर्माण कुछ इस तरह से है: मूल तत्व (html) से शुरू होकर, पार्सर सभी दृश्य तत्वों (स्किपिंग लिंक, स्क्रिप्ट, मेटा, सीएसएस तत्वों के माध्यम से छिपा हुआ) से गुजरता है और प्रत्येक दृश्य तत्व के लिए यह CSSOM के अनुरूप सीएसएस नियम पाता है।

फ़ायरफ़ॉक्स इंजन में, रेंडर ट्री तत्वों को फ़्रेम कहा जाता है। वेबकिट शब्द रेंडरर या ऑब्जेक्ट रेंडर करता है। रेंडर ऑब्जेक्ट जानता है कि पेज पर खुद को कैसे रखा जाए, और इसके बच्चों के बारे में भी जानकारी शामिल है। और सबसे जिज्ञासु के लिए, यदि आप वेबकिट के स्रोत कोड को देखते हैं, तो आप रेंडरऑब्जेक्ट नामक एक वर्ग पा सकते हैं।

हमारे उदाहरण को जारी रखते हुए, हमें ऐसा एक रेंडर ट्री मिलता है:

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

लेआउट एक रेंडर ट्री से तत्वों की स्थिति और आकार का निर्धारण करने के लिए एक पुनरावर्ती प्रक्रिया है। यह रूट रेंडर ऑब्जेक्ट से शुरू होता है, जो यह है, और पुनरावर्ती भाग या पेड़ के सभी पदानुक्रम से गुजरता है, बच्चे के ज्यामितीय आयामों की गणना वस्तुओं को प्रस्तुत करता है। मूल तत्व की एक स्थिति (0,0) है और इसका आकार खिड़की के दृश्य भाग के आकार के बराबर है, अर्थात व्यूपोर्ट का आकार।

Html एक प्रवाह आधारित लेआउट मॉडल का उपयोग करता है, दूसरे शब्दों में, कुछ मामलों में तत्वों के ज्यामितीय आयामों की गणना एक पास में की जा सकती है (यदि बाद में स्ट्रीम में दिखाई देने वाले तत्व पहले से पारित तत्वों की स्थिति और आकार को प्रभावित नहीं करते हैं)।

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

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

लेआउट प्रक्रिया के अंत में, प्रत्येक रेंडर वस्तु की अपनी स्थिति और आकार होता है।

संक्षेप में: ब्राउज़र जानता है कि क्या, कैसे और कहाँ आकर्षित करना है। इसलिए - यह केवल आकर्षित करने के लिए बनी हुई है। विचित्र रूप से पर्याप्त इस प्रक्रिया को पेंट कहा जाता है।

पेंट - वह चरण जहां मॉनिटर पिक्सेल रेंडर ऑब्जेक्ट के गुणों में निर्दिष्ट रंग से भरा होता है और सफेद स्क्रीन लेखक (डेवलपर) द्वारा कल्पना की गई तस्वीर में बदल जाती है। रेंडरिंग पथ के दौरान, यह सबसे महंगी प्रक्रिया है (यह नहीं कि पिछला वाला सस्ता है)।

साथ ही लेआउट प्रक्रिया, पेंट वैश्विक हो सकता है - पेड़ पूरी तरह से लाल रंग का होता है, और वृद्धिशील - पेड़ आंशिक रूप से लाल होता है। आंशिक पुनर्वितरण के लिए, एक रेंडर ऑब्जेक्ट अपनी आयत को अमान्य के रूप में चिह्नित करता है। ऑपरेटिंग सिस्टम इस क्षेत्र को पुनर्विकास की आवश्यकता के रूप में मानता है और पेंट घटना को बढ़ाता है। एक ही समय में, ब्राउज़र सभी स्थानों पर एक बार फिर से प्रदर्शन करने के लिए क्षेत्रों को संयोजित करने में सक्षम है जहां यह आवश्यक है।

साइज़िंग और पोजिशनिंग ट्री एलिमेंट्स (लेआउट) और रिड्राइविंग (पेंट) महंगी प्रक्रियाएं हैं। वे सीपीयू स्तर पर चलते हैं। डायनामिक वेब एप्लिकेशन विकसित करके, जिसमें ये प्रक्रियाएँ बहुत बार शुरू की जाएंगी, हम कभी भी सहज एनिमेशन प्राप्त नहीं करेंगे।

इसलिए, ऐसा कुछ होना चाहिए जो सीपीयू को लोड न करते हुए और 16.6ms (60 एफपीएस) से कम में प्रत्येक फ्रेम को ड्राइंग करते समय समृद्ध एनीमेशन के साथ साइट बनाने में मदद करे। दरअसल, ब्राउज़र एक और कदम उठाता है जो साइटों की गतिशीलता को अनुकूलित करने में मदद करता है - समग्र (रचना)।

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

उपरोक्त संक्षेप में, हमें एक वेब पेज को प्रस्तुत करने की निम्नलिखित प्रक्रिया मिलती है:

TLDR;
ब्राउज़र HTML फ़ाइल प्राप्त करता है, इसे पार्स करता है और DOM बनाता है। सीएसएस शैलियों को पूरा करते हुए, ब्राउज़र उन्हें लोड करता है, उन्हें पार्स करता है, CSSOM बनाता है और उन्हें DOM के साथ मिलाता है, हमें रेंडर ट्री मिलता है। यह पता लगाना बाकी है कि रेंडर ट्री से तत्वों को कहां व्यवस्थित करना है - यह लेआउट का कार्य है। तत्वों की व्यवस्था करने के बाद, आप उन्हें चित्रित करना शुरू कर सकते हैं - यह पेंट कार्य है, वह चरण जिस पर स्क्रीन के पिक्सेल भरे हुए हैं।

गतिकी

क्या होता है जब css प्रॉपर्टी बदलती है? या, उदाहरण के लिए, एक नया डोम नोड जोड़ा गया है? सीएसएस गुणों को बदलने के मामले में यह सब संपत्ति के बदले जाने पर निर्भर करता है। केवल दो गुण हैं जो समग्र कार्य को ट्रिगर करते हैं - अस्पष्टता और परिवर्तन । एनीमेशन के लिए केवल यही दो गुण सबसे सस्ते हैं। उदाहरण के लिए, पृष्ठभूमि को बदलने से पेंट कार्य (तब समग्र) का कारण होगा, और प्रदर्शन को बदलने से पहले लेआउट होगा, फिर पेंट, फिर समग्र। कार्य परिवर्तनों की एक सूची csstriggers.com पर देखी जा सकती है।

डोम ट्री में एक नया नोड जोड़ते समय - जाहिर है कि ब्राउज़र को पेड़ में एक नई वस्तु जोड़ने की जरूरत है, पृष्ठ पर इसकी स्थिति की गणना करें, पृष्ठ पर अन्य तत्वों की स्थिति की गणना करें (यदि वे एक नए तत्व से प्रभावित थे), और अंत में सभी ध्वनियों को आकर्षित करने के लिए महंगा लगता है। इसलिए, ऐसे ऑपरेशन करते समय, आपको प्रदर्शन को ध्यान में रखने की आवश्यकता होती है, क्योंकि हर इंटरनेट उपयोगकर्ता नवीनतम डिवाइस मॉडल पर आपके वेब एप्लिकेशन को लॉन्च नहीं करता है।

संक्षेप में, हमने जांच की कि ब्राउज़र में कौन से घटक हैं, वे एक-दूसरे के साथ कैसे बातचीत करते हैं, और रेंडरिंग इंजन उपयोगकर्ता को पृष्ठ कैसे खींचता है।

आप क्रोम देवटूल में ऊपर देख सकते हैं, लेकिन लेख के शीर्षक से आगे नहीं जाने के लिए, यह सब अभी के लिए है।

सूत्रों का कहना है

वेबसाइट रेंडरिंग 101

ब्राउज़र कैसे काम करता है?

ब्राउज़र स्क्रीन पर HTML को पिक्सेल में कैसे अनुवाद करता है?

गतिकी

More articles: