आज हम रोज़ाना इंटरनेट का उपयोग करते हैं सर्च करते हैं, वीडियो देखते हैं, वेबसाइट खोलते हैं लेकिन क्या आपने कभी सोचा है कि ब्राउज़र वास्तव में कैसे काम करता है?
जब आप address bar में कोई URL टाइप करके Enter दबाते हैं, तो कुछ ही सेकंड में पूरा वेबपेज आपकी स्क्रीन पर दिखाई देने लगता है।
यह प्रक्रिया जितनी आसान दिखती है, उतनी ही अंदर से जटिल और रोचक होती है। एक वेब ब्राउज़र, जैसे Google Chrome या Mozilla Firefox, सिर्फ वेबसाइट खोलने का साधन नहीं है, बल्कि यह कई घटकों (components) का एक समूह है जो मिलकर काम करते हैं। यह सर्वर से डेटा लाता है, HTML और CSS को समझता है, DOM और CSSOM बनाता है, फिर उन्हें मिलाकर स्क्रीन पर एक सुंदर वेबपेज के रूप में प्रस्तुत करता है।
इस ब्लॉग में हम आसान भाषा और सरल उदाहरणों की मदद से समझेंगे कि ब्राउज़र के अंदर क्या-क्या होता है और URL से पिक्सेल तक की पूरी यात्रा कैसे पूरी होती है।
What a browser actually is (beyond “it opens websites”)
ब्राउज़र एक सॉफ्टवेयर है जो इंटरनेट से डेटा लाता है उस डेटा को समझता है उसे एक सुंदर वेब पेज में बदलता है और उसके बाद हमारी स्क्रीन पर दिखाता है |
उदाहरण के लिए :
- Google Chrome,
- Mozilla Firefox,
- Microsoft Edge
Main parts of a browser (high-level overview)
ब्राउज़र कई भागों में विभाजित है जो एक साथ मिलकर काम करते है जो निम्नलिखित है |
- User Interface (UI)
- Browser Engine
- Rendering Engine
- Networking
- JavaScript Engine
- Storage
जैसे एक कार इंजन, पहिए, स्टीयरिंग सब मिलकर एक साथ काम करते हैं। उसी तरह से ब्राउज़र भी जो इन सब से मिलकर बना है |
User Interface: address bar, tabs, buttons
यह ब्राउज़र का वह भाग है जिसे हमलोग अपने स्क्रीन पर देखते है |
Address bar : जहाँ हम कुछ टाइप करके कुछ सर्च करते है |
Tabs : टैब्स हमें एक साथ कई चीजों के अलग -अलग सर्च करने का सुविधा प्रदान करता है |
Back/Forward button : इस बटन के सहायता से हम वेब पेज को आगे और पीछे नेविगेट कर सकते है :
Refresh button : इस बटन का इस्तेमाल हम तब करते जब किसी वेब पेज का कंटेंट सही से लोड नहीं हो पता है |
ये सारें फंक्शन हमें ब्राउज़र को कंट्रोल करने के लिए दिया गया है |
Browser Engine vs Rendering Engine (simple distinction)
Browser Engine
यह UI और Rendering Engine के बीच कनेक्शन स्थापित करने का कार्य करता है |
Rendering Engine
यह HTML और CSS को समझकर स्क्रीन पर वेब पेज को प्रदर्शित करने का कार्य करता है |
सरल शब्दों में:
Browser Engine = मैनेजर
Rendering Engine = वेब पेज बनाने वाला कलाकार
Networking : how a browser fetches HTML, CSS, JS
जब हम ब्राउज़र (Google Chrome, Mozilla Firefox) में किसी वेबसाइट का URL डालते हैं तो सबसे पहले ब्राउज़र DNS (Domain Name System) के माध्यम से डोमेन नाम को IP एड्रेस में बदलता है |
फिर उस सर्वर से TCP कनेक्शन स्थापित करता है और यदि साइट सुरक्षित है तो TLS हैंडशेक के जरिए एन्क्रिप्टेड कनेक्शन बनाता है ।
इसके बाद ब्राउज़र HTTP/HTTPS प्रोटोकॉल रिक्वेस्ट सर्वर तक जाता है |और सर्वर HTTP रिस्पॉन्स में HTML फाइल वापस भेजता है।
ब्राउज़र HTML को पार्स करके DOM (Document Object Model) बनाना शुरू करता है और जब उसे <link> टैग से CSS फाइल या <script> टैग से JavaScript फाइल का मिलता है
तो वह उनके लिए अलग-अलग HTTP रिक्वेस्ट भेजता है। CSS फाइल डाउनलोड होकर CSSOM (CSS Object Model) बनाती है
और JavaScript फाइल डाउनलोड होकर ब्राउज़र के JavaScript इंजन द्वारा एक्सीक्यूट की जाती है जो DOM में बदलाव भी कर सकती है। अंत में ब्राउज़र DOM और CSSOM को मिलाकर Render Tree बनाता है फिर layout (reflow) प्रक्रिया में हर एलिमेंट की पोज़िशन और साइज तय करता है और पेंटिंग प्रक्रिया में स्क्रीन पर कंटेंट दिखाता है।
HTML parsing and DOM creation
जब ब्राउज़र को HTML फाइल मिलती है, तो वह उसे ऊपर से नीचे तक पढ़ता है और हर टैग (जैसे <html>, <body>, <div>) को समझकर एक ट्री जैसी संरचना बनाता है, जिसे DOM (Document Object Model) कहते हैं।
इस DOM में हर HTML एलिमेंट एक “नोड” बन जाता है और उनके बीच parent-child संबंध बनते हैं। अगर बीच में <script> टैग मिलता है, तो ब्राउज़र पहले उसे चलाता है क्योंकि वह DOM में बदलाव कर सकता है। जब पूरा HTML पढ़ लिया जाता है, तब पूरा DOM तैयार हो जाता है और फिर उसी के आधार पर वेबपेज स्क्रीन पर दिखाया जाता है।
CSS parsing and CSSOM creation
जब ब्राउज़र को CSS फाइल मिलती है तो वह उसे पढ़कर समझना शुरू करता है इस प्रक्रिया को CSS parsing कहते हैं।
ब्राउज़र CSS के हर rule (जैसे h1 { color: blue; }) को तोड़कर यह समझता है कि कौन-सा स्टाइल किस HTML एलिमेंट पर लागू होगा । इन सभी rules को मिलाकर वह एक ट्री जैसी संरचना बनाता है जिसे CSSOM (CSS Object Model) कहते हैं। CSSOM में हर selector और उसकी properties (जैसे color, margin, font-size) संग्रहीत रहती हैं।
बाद में ब्राउज़र DOM और CSSOM को मिलाकर Render Tree बनाता है, जिससे यह तय होता है कि पेज पर कौन-सा एलिमेंट किस स्टाइल में दिखाई देगा।
How DOM and CSSOM come together
जब DOM (जो HTML से बनता है) और CSSOM (जो CSS से बनता है) दोनों तैयार हो जाते हैं, तो ब्राउज़र इन्हें मिलाकर Render Tree बनाता है।
DOM बताता है कि पेज पर कौन-कौन से एलिमेंट हैं और CSSOM बताता है कि उन एलिमेंट्स पर कौन-सा स्टाइल लागू होगा।
ब्राउज़र पहले हर DOM एलिमेंट के लिए उसके लागू होने वाले CSS नियम ढूँढता है फिर उसी आधार पर एक नया ट्री बनाता है जिसमें सिर्फ वे एलिमेंट शामिल होते हैं जो स्क्रीन पर दिखाई देंगे
Layout (reflow), painting, and display
जब Render Tree तैयार हो जाता है, तो ब्राउज़र Layout प्रक्रिया शुरू करता है। इसमें हर एलिमेंट की सही जगह (position), चौड़ाई, ऊँचाई और आपसी दूरी तय की जाती है, यानी पेज का पूरा ढांचा (structure) गणना करके बनाया जाता है।
यदि बाद में किसी एलिमेंट का साइज, टेक्स्ट या स्टाइल बदलता है, तो ब्राउज़र फिर से layout करता है, जिसे reflow कहते हैं।
इसके बाद Painting चरण आता है, जहाँ ब्राउज़र हर एलिमेंट को रंग, बॉर्डर, टेक्स्ट, इमेज आदि के साथ पिक्सेल में बदलकर ड्रॉ करता है। अंत में Display (Compositing) प्रक्रिया में अलग-अलग लेयर्स को जोड़कर स्क्रीन पर अंतिम वेबपेज दिखाया जाता है।
Very basic idea of parsing (using a simple math example)
Parsing को बहुत आसान भाषा में समझें तो इसका मतलब है किसी टेक्स्ट को पढ़कर उसका सही अर्थ निकालना।
मान लीजिए आपके पास एक साधारण गणित का एक्सप्रेशन है : 2 + 3 × 4 जब कंप्यूटर इसे पढ़ता है तो वह पहले इसे छोटे-छोटे हिस्सों में तोड़ता है कुछ इस तरह 2, +, 3, ×, 4। फिर वह नियमों (जैसे BODMAS) के अनुसार समझता है कि पहले 3 × 4 होगा, फिर उसमें 2 जोड़ा जाएगा। यानी वह सिर्फ पढ़ता नहीं है, बल्कि सही क्रम और संरचना समझकर उसका मतलब निकालता है। इसी प्रक्रिया को parsing कहते हैं |
निष्कर्ष :
Web browser कैसे काम करता है यह जानना हर वेब डेवलपर और शुरुआती विद्यार्थी के लिए महत्वपूर्ण है । जब हम समझते हैं कि URL से वेबपेज तक की प्रक्रिया, HTML parsing, DOM और CSSOM निर्माण तथा rendering engine द्वारा layout और painting कैसे होती है, तब हम बेहतर और तेज़ वेबसाइट बना सकते हैं।
ब्राउज़र की पूरी webpage rendering process कई चरणों में होती है, लेकिन इसका मूल सिद्धांत सरल है—डेटा को समझना और उसे स्क्रीन पर सही रूप में दिखाना। यदि आप browser internals, browser working process, और DOM क्या है जैसे विषयों को समझ लेते हैं, तो आपकी web development की नींव मजबूत हो जाती है।
