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

 (howbrowserswork.com)
67 पॉइंट द्वारा GN⁺ 2026-01-06 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • वेब इंजीनियरों और सामान्य उपयोगकर्ताओं को ब्राउज़र के आंतरिक काम करने के सिद्धांत सहज रूप से समझाने के लिए बनाया गया इंटरैक्टिव लर्निंग गाइड
  • 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 के रूप में बदली जाती है
  • इनपुट के बाद 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 दर्ज करने पर , जैसे tags के DOM nodes में बदलने की प्रक्रिया को विज़ुअली देखा जा सकता है
  • parsing streaming तरीके से होती है, इसलिए पूरा document आने से पहले भी node बनाए जा सकते हैं
  • `` 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 के माध्यम से सुधार सुझाव दिए जा सकते हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2026-01-06
Hacker News की राय

  • सभी browsers में शुरू से DOM नहीं था
    शुरुआती दौर में WorldWideWeb(Nexus, 1990), Erwise(1992), ViolaWWW(1992), Lynx(1992), NCSA Mosaic(1993), Netscape 1.0(1994), IE 1.0(1995) आदि थे
    Lynx आज भी जानबूझकर non-DOM browser बना हुआ है
    AOL 1.0–2.0 ने बिना programmable objects वाले static engine (AOLPress) का उपयोग किया
    DOM के साथ interact कर पाना Netscape 2.0(1995), IE 3.0(1996), AOL 3.0(1996), Opera 3.0(1997) से शुरू हुआ
    इसके बाद Netscape 4.0(document.layers) और IE 4.0(document.all) ने अपने-अपने अलग मॉडल इस्तेमाल किए
    पहला standard DOM W3C DOM Level 1(1998) था, जिसे IE 5.0(1999) ने आंशिक रूप से support किया, और Konqueror 2.0(2000) व Netscape 6.0(2000) ने पूरा support शुरू किया
    Safari 1.0(2003), Firefox 1.0(2004), Chrome 1.0(2008) ने शुरुआत से standard DOM support किया, और आज WHATWG DOM Living Standard का पालन करते हैं

    • Dillo browser भी अब तक DOM के बिना संरचना पर है
      यह HTML text को सीधे interpret करके render करता है, इसलिए RAM usage बहुत कम है
    • शायद “modern browsers में DOM” कहना ज्यादा सटीक होगा

  • यह शानदार project है
    HN पाठकों के लिए High-Performance Browser Networking और Every Layout भी साथ में देखना अच्छा रहेगा
    दोनों web performance और CSS structure को गहराई से कवर करने वाले बेहतरीन संसाधन हैं

    • HPBN वाकई बहुत अच्छी तरह लिखी गई किताब है
      अध्याय 4 में TLS frame structure समझ आया, और उसी से पिछली नौकरी में latency issue debug कर पाया
      TLS frame size को tune करने वाले trade-off वाला हिस्सा भी दिलचस्प था
      शायद रोजमर्रा में इसका उपयोग कम हो, लेकिन इससे पता चला कि network level पर fine-tuning संभव है
    • HPBN लिंक के लिए धन्यवाद, यह सच में बहुत दिलचस्प resource है

  • बिना install किए browser.engineering का अनुभव लेने जैसा दिलचस्प approach है
    browser और server के उदाहरण दिखाते समय visual icons (जैसे desktop/server) जोड़ दिए जाएँ तो समझना और आसान हो सकता है

    • आगे और sections और details जोड़ने की योजना है
      फिलहाल feedback इकट्ठा कर रहा हूँ, और icon वाला सुझाव अच्छा है इसलिए उसे देखूँगा

  • यह इतना पसंद आया कि bookmark कर लिया
    लेकिन HTML/DOM के आधार पर image, stylesheet, script जैसे resource loading process का न होना थोड़ा खलता है
    पेज का style टूटने या image missing होने की वजह समझने में यह हिस्सा महत्वपूर्ण है

    • सादगी बनाए रखने के लिए इसे जानबूझकर छोड़ा था
      अब सोच रहा हूँ कि इन blocks को बिना ज्यादा जटिलता के कैसे जोड़ा जाए

  • जब browser window संकरी होती है (1170px से कम), तब table of contents section मुख्य text के ऊपर overlap होता दिखता है

    • इसे ठीक कर रहा हूँ

  • URL parsing logic को थोड़ा और निखारना अच्छा होगा
    ज्यादातर users को शायद दिक्कत नहीं होगी, लेकिन जब https:// या http:// के अलावा कोई और protocol scheme डाली जाती है, तब भी browser उसे खास तरीके से handle करता है
    ऐसे cases को पकड़ना अच्छा रहेगा
    संदर्भ: List of URI schemes

  • शानदार project है
    क्या अगले चरण में reflow process की details जोड़ने की योजना है?

  • थोड़ा अफसोस है कि पेज का आधे से ज्यादा हिस्सा network requests को दिया गया है
    असल में browser का जटिल हिस्सा parsing और rendering pipeline में होता है

    • rendering engine वाले हिस्से को और विस्तार से कवर करने की योजना है
      किस section में ज्यादा गहराई में जाना चाहिए, यह स्पष्ट नहीं था, इसलिए पहले publish करके feedback ले रहा हूँ
    • DOM को भी rendering pipeline का हिस्सा माना जा सकता है

  • शायद यह बेवकूफी वाला सवाल हो, लेकिन सोचता हूँ कि DNS lookup को पूरी तरह हटाकर क्या इसे सिर्फ human-readable domain names से चलाया जा सकता है?

    • उससे भी अजीब विचार यह है कि IP addresses की जगह Ethernet addresses से routing की जाए
      मतलब पूरे internet को एक बहुत बड़े switch की तरह बना दिया जाए
      मुझे याद है कि Tailscale के founder ने इसी तरह के विचार पर कुछ लिखा था

  • शानदार काम है