👨🏿‍🔧 👨🏼‍🔧 🔔 आप क्या हैं, रेंडरिंग इंजन? या ब्राउज़र डिस्प्ले मॉड्यूल कैसे काम करता है 🤟🏾 👨🏼‍⚕️ 🛑

फ्रंटेंड डेवलपर के लिए सबसे महत्वपूर्ण बात ब्राउज़र डिस्प्ले मॉड्यूल है, जो रेंडरिंग इंजन (इसके बाद आरईआर के रूप में संदर्भित) भी है।

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

सबसे पहले, आइए देखें कि आरई के साथ क्या बातचीत करता है, यह समझने के लिए कि ब्राउज़र में कौन से अन्य मॉड्यूल शामिल हैं।

योजना पर विचार करें:

चित्र 1

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

ब्राउज़र तंत्र, ब्राउज़र इंजन (इसके बाद BE), यूजर इंटरफेस और डिस्प्ले मॉड्यूल के बीच एक परत है।

रेंडरिंग इंजन डिस्प्ले मॉड्यूल । हम बाद में इसका और अधिक विस्तार से विश्लेषण करेंगे।

नेटवर्क घटक, नेटवर्क नेटवर्क अनुरोधों के लिए जिम्मेदार हैं। आरई नेटवर्क से डेटा प्राप्त करता है। डेटा 8 केबी भागों में प्राप्त होता है और आरई तब तक इंतजार नहीं करता है जब तक कि सभी डेटा नहीं आते हैं, यह आते ही इसे संसाधित करना शुरू कर देता है।

JS दुभाषिया मॉड्यूल स्क्रिप्ट की व्याख्या करने और इसे निष्पादित करने के लिए जिम्मेदार है।

यूआई बैकएंड का उपयोग बुनियादी ग्राफिक तत्वों और विगेट्स को प्रस्तुत करने के लिए किया जाता है, जैसे कि विंडोज़ और कॉम्बो बॉक्स। अलर्ट या प्रॉम्प्ट विंडो का एक सरल उदाहरण।

एक डेटा स्टोर एक कुकी, इंडेक्सडीबी और अन्य ब्राउज़र स्टोर है।

अब जब हम एक बुनियादी स्तर पर जानते हैं कि ब्राउज़र में क्या है, तो हम उस घटक पर आगे बढ़ सकते हैं जिसमें हम रुचि रखते हैं - रेंडरिंग इंजन।

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./style.css"></link> <title>Document</title> </head> <body> <div>Hello Habr!</div> <div>I'am Rendering Engine</div> <script async src="./script.js"></script> </body> </html>

 (function() { window.addEventListener('load', () => { console.log('all resources were loaded'); }); })();

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Helvetica, sans-serif; line-height: 1.5; background-color: #9BD4F4; padding: 16px; }

ऐसा करने के लिए, Chrome DevTools पर जाएं, perfomance टैब खोलें और प्रक्रिया शुरू करें। पृष्ठ को फिर से लोड करने और क्या हुआ इसका विश्लेषण करने के बाद, हम निम्नलिखित चित्र का निरीक्षण करते हैं:

चित्र 2

नेटवर्क टैब में - नेटवर्क पर डेटा डाउनलोड करने का क्रम (ब्लू बॉक्स - index.html)।

टाइमिंग टैब में, डीसीएल इवेंट होने पर ऐसे निशान होते हैं (DOM कंटेंट लोडेड, FP - पहला कंटेंटफुल पेंट, FMP - पहला अर्थपूर्ण पेंट, L - लोड)। आइए देखें कि ये घटनाएँ क्या हैं।

DOMContentLoaded - ब्राउज़र ने HTML लोड किया, उसे पार्स किया और DOM ट्री बनाया। यह घटना दस्तावेज़ पर आग लगाती है, आप इसे आसानी से सदस्यता ले सकते हैं और जावास्क्रिप्ट के माध्यम से डोम के साथ काम कर सकते हैं (हमारी स्क्रिप्ट में, हम DOMContentLoaded घटना की सदस्यता नहीं ले पाएंगे, क्योंकि यह स्क्रिप्ट के पार्स होने से पहले हुआ था, चित्र देखें)।
इसके अलावा, DOMContentLoaded की कई बारीकियाँ हैं:

यदि स्क्रिप्ट async / defer टैग (सिंक्रोनाइज़) के बिना कनेक्ट है, तो यह HTML पार्सिंग को ब्लॉक कर देगा। हालाँकि, ब्राउज़र ने हाल ही में सट्टा पार्सिंग का उपयोग किया है, और ऐसे मामलों में, वे अभी भी इस स्क्रिप्ट को पहले से डाउनलोड करते हैं और इसकी पार्सिंग करते हैं। यह डोम ट्री की संरचना को प्रभावित नहीं करता है, लेकिन यह आपको आरई के काम के समय को कम करने की अनुमति देता है। नीचे दिया गया आंकड़ा दिखाता है कि सिंक्रोनस स्क्रिप्ट कनेक्शन के साथ डीसीएल और अन्य सभी रेंडर घटनाओं का समय कैसे बढ़ता है
पार्सिंग लॉक (आपने यह अनुमान लगाया है) को async / defer विशेषताओं के साथ दरकिनार किया जा सकता है, जो आपको स्क्रिप्ट डाउनलोड करने और निष्पादित करने के लिए प्रतीक्षा किए बिना HTML जारी रखने की अनुमति देता है
इसके अलावा, लोडिंग स्टाइल के कारण DCL इवेंट में देरी हो सकती है। स्क्रिप्ट के निष्पादन के दौरान, ब्राउज़र देख सकता है कि हम जावास्क्रिप्ट के माध्यम से तत्व की शैली का उपयोग करना चाहते हैं। और इस स्क्रिप्ट को अवरुद्ध किया जाएगा, बशर्ते कि इस तत्व की शैलियों को वर्तमान में पार्स या लोड किया गया हो
क्रोम में भी, उदाहरण के लिए, डीसीएल पर, फॉर्म स्वतः पूर्ण हैं।

चित्र 3

पहला पेंट - ब्राउज़र ने पृष्ठ पर पहला पिक्सेल प्रदान किया।

पहला कंटेंटफुल पेंट - ब्राउजर ने पेज पर पहला कंटेंट पेश किया।

पहले सार्थक पेंट - आरई के बाद घटना आग हो जाती है यह निर्धारित करती है कि प्रदान की गई सामग्री उपयोगकर्ता के लिए उपयोगी हो सकती है।

पूरे पृष्ठ को लोड करें और उस पर संसाधन लोड किए गए हैं, जिसमें iframe भी शामिल है।

FP, FCP, FMP के बारे में डेवलपर्स के लिए Google के आधिकारिक दस्तावेज में अच्छी तरह से लिखा गया है ।

अब जब हमने यह पता लगा लिया है कि क्या घटनाएँ घटित हुई हैं, हम कॉल ट्री ( चित्र 1 देखें) पर जा सकते हैं और इन घटनाओं के होने पर और अधिक विस्तार से विश्लेषण कर सकते हैं।

पार्स HTML - HTML पार्सिंग। आप इस बारे में एक अलग लेख लिख सकते हैं। बेहतर अभी तक, कल्पना पढ़ें । हमें बस यह समझने की आवश्यकता है कि HTML- आधारित ब्राउज़र दस्तावेज़ का ऑब्जेक्ट मॉडल बनाता है - DOM। और, जब यह तैयार हो जाता है और अब इसे प्रभावित नहीं कर सकता है, तो यह DOMContentLoaded घटना को आग लगा देता है।

कंपोजिट लेयर अलग-अलग स्रोतों से दृश्य तत्वों के संयोजन को एकल छवियों में भ्रम पैदा करने के लिए करते हैं कि ये सभी तत्व एक ही दृश्य के हिस्से हैं।

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

पार्स स्टाइल शीट। यदि, पार्स करने के बाद, आरई देखता है कि एचटीएमएल सीएसएस सक्षम है, तो यह पहले से डाउनलोड और पार्स करना शुरू कर देता है। पार्सिन के बाद, आरई सीएसएस ऑब्जेक्ट मॉडल, सीएसएस ऑब्जेक्ट मॉडल बनाता है।

इसके बाद अटैचमेंट स्टेज आता है, जिसमें आरई सीएसएस को ओम और डोम में मैप करता है, और हमें एक रेंडर ट्री मिलता है।

लेयर ट्री (लेआउट) को अपडेट करें - लेयर ट्री का लेआउट या सिर्फ एक लेआउट। सीएसएस ओम और डोम से मिलान करने के बाद, हम तत्वों और उनके आकारों के स्थान का पता लगा सकते हैं।

अक्सर, धारा में कम जाने वाले तत्व ऊपर के तत्वों की स्थिति को प्रभावित नहीं कर सकते हैं, इसलिए लेआउट को अक्सर क्रमिक रूप से किया जाता है - ऊपर से नीचे और बाएं से दाएं। इसलिए, HTML मानक दस्तावेज़ लेआउट का एक स्ट्रीम मॉडल प्रदान करता है।

पेंट - सामग्री को स्क्रीन पर रेंडर करना। और इन सभी चरणों के बाद ही हम स्क्रीन पर साइट की सामग्री देखते हैं: डी

यहाँ आरई में सभी चरणों की संक्षिप्त रूपरेखा दी गई है:

चित्र 4

हम संक्षेप में बताते हैं:

आरई में डेटा बैचों में नेटवर्क मॉड्यूल से आता है। इस डेटा को प्राप्त करने के बाद, आरई इसके साथ काम करना शुरू कर देता है, अर्थात्, HTML पार्सिंग।

जब आरई देखता है कि HTML में एक बाहरी संसाधन है, तो वह इसके बारे में नेटवर्क से बात करता है, और वह इसे डाउनलोड करना शुरू कर देता है और फिर इसे आरई को फिर से देता है।

आरई मानक के अनुसार <स्क्रिप्ट> टैग को मिलना पार्स करना बंद कर देता है और इस स्क्रिप्ट को डाउनलोड करने और निष्पादित करने के लिए इंतजार करता है, और उसके बाद ही डोम ट्री को पार्स करना और बनाना जारी रखता है। यह async / defer विशेषताएँ द्वारा हल किया जाता है। आप यहां उनके मतभेदों के बारे में अधिक पढ़ सकते हैं । मुख्य बात यह समझना है कि वे स्क्रिप्ट प्रसंस्करण के लिए इंतजार किए बिना HTML को पार्स करना जारी रखना संभव बनाते हैं।
इसके अलावा, ब्राउज़र (हमारे मामले में, Chrome) स्क्रिप्ट के निष्पादन को अवरुद्ध कर सकता है यदि वह उस तत्व के सीएसएस के साथ काम करने की कोशिश करता है, जिसकी शैलियों को वर्तमान में संसाधित किया जा रहा है।

आरई समझता है कि सभी तुल्यकालिक स्क्रिप्ट डाउनलोड और काम करने के बाद, HTML पूरी तरह से पार्स हो गया है और अब हमें कुछ भी परेशान नहीं करता है, यह DOMContentLoaded घटना उठाता है, और हमें उस ब्राउज़र में एक #document ऑब्जेक्ट मिलता है जिसके साथ हम काम कर सकते हैं।

इसके बाद, सीएसएस पार्सिंग को पूरा करने और सीएसएस ऑब्जेक्ट मॉडल के निर्माण के बाद, अटैचमेंट चरण होता है, जहां रेंडर ट्री बनाया जाता है और लेआउट (ब्लॉक के आकार और स्थिति का लेआउट) होता है। खैर, लेआउट के बाद स्क्रीन पर एक ड्राइंग है - पेंट। रेंडरिंग इंजन इतना लंबा रास्ता तय करता है कि आप और मैं इसे देखें:

चित्र 5

वह सब है!

मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी था और अब आप समझते हैं कि रेंडरिंग इंजन कैसे काम करता है।

अलविदा :) और जल्द ही मिलते हैं। अगर आपको यह पसंद आया, तो मेरे चैनल को लाइक और सबस्क्राइब करें :)

आप क्या हैं, रेंडरिंग इंजन? या ब्राउज़र डिस्प्ले मॉड्यूल कैसे काम करता है

More articles: