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

• वेब इंजीनियरों और सामान्य उपयोगकर्ताओं को ब्राउज़र के आंतरिक काम करने के सिद्धांत सहज रूप से समझाने के लिए बनाया गया इंटरैक्टिव लर्निंग गाइड
• address bar में इनपुट से लेकर HTTP request बनना, DNS resolution, TCP connection, HTML parsing, DOM बनना, rendering pipeline तक की प्रक्रिया को चरण-दर-चरण विज़ुअलाइज़ करता है
• हर चरण ऐसे उदाहरणों से बना है जिनमें आप सीधे इनपुट दे सकते हैं या उन्हें manipulate कर सकते हैं, जिससे नेटवर्क कम्युनिकेशन और rendering प्रक्रिया को प्रयोग करके समझा जा सकता है
• DOM की भूमिका और Layout–Paint–Composite चरणों के अंतर को स्पष्ट रूप से दिखाता है, और performance को प्रभावित करने वाले तत्वों को विज़ुअल तरीके से देखा जा सकता है
• ब्राउज़र आर्किटेक्चर सीखने या web performance optimization को समझने वाले डेवलपर्स के लिए मुख्य अवधारणाओं को व्यवस्थित रूप से सीखने योग्य संसाधन

---

परिचय

• यह गाइड उन लोगों के लिए बनाई गई है जो रोज़ वेब का उपयोग करते हैं, लेकिन ब्राउज़र कैसे काम करता है इसे स्पष्ट रूप से नहीं समझते
  • यह मौजूदा सामग्री की उस सीमा को पूरा करती है, जो या तो बहुत ज़्यादा तकनीकी होती है या बहुत सतही
  • छोटे इंटरैक्टिव उदाहरणों के माध्यम से तकनीकी विवरणों को सहज रूप से सीखने के लिए डिज़ाइन की गई है
• HTTP versions, SSL/TLS, DNS के विस्तृत आंतरिक व्यवहार जैसी चीज़ें छोड़ी गई हैं, और सामग्री को मुख्य अवधारणाओं पर केंद्रित रखते हुए संक्षेप में व्यवस्थित किया गया है
• प्रोजेक्ट open source के रूप में उपलब्ध है, और GitHub के ज़रिए सुधार सुझाव दिए जा सकते हैं

ब्राउज़र और URL

• उपयोगकर्ता address bar में जो भी string दर्ज करता है, वह अंदरूनी तौर पर URL के रूप में बदली जाती है
  • उदाहरण: “pizza” → https://google.com/search?q=pizza
  • उदाहरण: “example.com” → https://example.com
• इनपुट के बाद Enter दबाने पर इस conversion प्रक्रिया को सीधे देखने के लिए hands-on interface दिया गया है

URL को HTTP request में बदलना

• ब्राउज़र पहले यह सुनिश्चित करता है कि किस सटीक URL पर जाना है, फिर सर्वर को HTTP request भेजता है
• request header का उदाहरण इस प्रकार है

  Host: example.com
  Accept: text/html
  

• Host header उस सर्वर की पहचान करने का काम करता है, जिसे request भेजी जाएगी

सर्वर पता निकालना (DNS)

• ब्राउज़र example.com जैसे domain name को सीधे उपयोग नहीं कर सकता
  • सर्वर से संवाद करने के लिए DNS सिस्टम के ज़रिए इसे IP address में बदलना पड़ता है
• इनपुट बॉक्स में domain डालने पर DNS resolution का परिणाम (IP address) देखा जा सकता है

TCP connection स्थापित करना

• DNS से IP मिलने के बाद, ब्राउज़र TCP protocol का उपयोग करके सर्वर के साथ एक भरोसेमंद connection स्थापित करता है
• connection 3-step handshake प्रक्रिया से बनता है
  1. SYN: client connection request भेजता है
  2. SYN-ACK: server जवाब देता है और पुष्टि करता है
  3. ACK: client अंतिम पुष्टि करता है
• TCP डेटा के क्रम की गारंटी और retransmission की मदद से स्थिर कम्युनिकेशन बनाए रखता है
• नेटवर्क डिस्कनेक्ट करके या packets को manipulate करके transmission reliability का प्रयोग किया जा सकता है

HTTP request और response

• TCP connection के बाद ब्राउज़र HTTP request भेजता है, और सर्वर HTTP response लौटाता है
• request और response के आने-जाने की प्रक्रिया को विज़ुअली दिखाया जाता है, जिससे packet flow को देखा जा सकता है
• response पहुँचने पर ब्राउज़र header और body को अलग करता है और HTML render करना शुरू करता है

HTML parsing और DOM tree बनना

• ब्राउज़र HTML bytes को parser के पास भेजकर DOM tree बनाता है
• उदाहरण HTML दर्ज करने पर <h1>, <p> जैसे tags के DOM nodes में बदलने की प्रक्रिया को विज़ुअली देखा जा सकता है
• parsing streaming तरीके से होती है, इसलिए पूरा document आने से पहले भी node बनाए जा सकते हैं
• <script> tag आने पर parsing अस्थायी रूप से रुकती है और script चलती है
• तैयार DOM, CSS के साथ मिलकर render tree बनाता है

DOM का महत्व

• DOM(Document Object Model) ब्राउज़र मेमोरी के भीतर दस्तावेज़ का मॉडल है, और
  HTML parser, CSS selector engine, और JavaScript runtime द्वारा साझा की जाने वाली मुख्य संरचना है
• DOM में बदलाव तुरंत layout, style, और user interaction में दिखाई देते हैं
• JavaScript code बदलने पर DOM changes को real time में दिखाने वाला preview feature उपलब्ध है

Layout, Paint, Composite

• जब DOM और CSS तैयार हो जाते हैं, तो ब्राउज़र rendering pipeline चलाता है
  • Layout(Reflow) : elements के size और position की गणना
  • Paint: pixels भरना
  • Composite: GPU पर layers को जोड़ना
• रंग बदलने पर सिर्फ Paint फिर से चलता है, लेकिन size बदलने पर Layout और Paint दोनों फिर से चलते हैं
• क्लिक करके यह देखा जा सकता है कि कौन-सा चरण दोबारा चला
• जिन pages में Layout computation ज़्यादा होती है, वे धीरे render होते हैं — इसे विज़ुअली दिखाया गया है

सारांश

• address input से rendering तक की पूरी प्रक्रिया को सीधे अनुभव करते हुए सीखने योग्य गाइड
• सभी चरण पूरे करने पर ब्राउज़र के काम करने के तरीके का एक स्पष्ट mental model बनाया जा सकता है
• प्रोजेक्ट open source है, और GitHub पर issue या Pull Request के माध्यम से सुधार सुझाव दिए जा सकते हैं