Skip to content
This page has been auto-translated and may contain errors.View in English

वेब कैसे काम करता है

docs.scrimba.com

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

क्लाइंट और सर्वर

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

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

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

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

क्लाइंट और सर्वर भूमिकाएं हैं, निश्चित मशीनें नहीं। एक क्लाइंट वह कुछ भी है जो अनुरोध शुरू करता है; एक सर्वर वह कुछ भी है जो अनुरोधों के लिए सुनता है और प्रतिक्रियाएं लौटाता है। एक ही भौतिक कंप्यूटर एक कनेक्शन के लिए सर्वर हो सकता है और दूसरे के लिए क्लाइंट, उदाहरण के लिए एक वेब सर्वर जो स्वयं एक डेटाबेस को कॉल करता है।

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

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

URL और डोमेन

जो पता आप टाइप करते हैं वह एक URL है: एक Uniform Resource Locator। यह वेब पर एक चीज़ का पूरा पता है, जिस तरह एक डाक पता एक घर को इंगित करता है।

https://scrimba.com/learn को देखें। https भाग यह है कि ब्राउज़र को सर्वर से कैसे बात करनी चाहिए। scrimba.com भाग डोमेन है, वेबसाइट का नाम, सड़क और शहर की तरह। /learn भाग एक विशेष पृष्ठ का पथ है, घर संख्या की तरह। एक साथ वे बिल्कुल एक पृष्ठ को इंगित करते हैं, और उन्हें टाइप करना ब्राउज़र को बताता है कि कहाँ जाना है।

एक URL भागों से बना है, और उन्हें नाम देना पूरी चीज़ को पढ़ना आसान बनाता है। https://scrimba.com/learn/html लें:

  • https स्कीम है: वह प्रोटोकॉल जो ब्राउज़र पृष्ठ लाने के लिए उपयोग करता है।
  • scrimba.com डोमेन है: साइट का मानव पठनीय नाम।
  • /learn/html पथ है: उस साइट पर कौन सा पृष्ठ।

डोमेन एक संख्या के लिए एक सहज विकल्प है। हर सर्वर एक IP पता पर पहुंचा जा सकता है, एक स्ट्रिंग जैसे 192.0.2.10, और डोमेन नाम यह है जो आपको इसे याद करने से बचाता है। जब आप एक डोमेन टाइप करते हैं, ब्राउज़र DNS के माध्यम से इसका IP पता लुकअप करता है, Domain Name System, जो एक फोन बुक की तरह काम करता है जो नाम को संख्याओं में बदल देता है।

एक URL सब कुछ एन्कोड करता है जो ब्राउज़र को एक संसाधन स्थित करने के लिए चाहिए, और प्रत्येक खंड का एक काम है। https://shop.example.com:443/products?id=42#reviews में: स्कीम https है, shop एक सबडोमेन है, example.com पंजीकृत डोमेन है, 443 पोर्ट है, /products पथ है, ?id=42 क्वेरी स्ट्रिंग है, और #reviews फ्रैगमेंट है।

पोर्ट सर्वर पर एक संख्यात्मक द्वार है (443 HTTPS के लिए डिफ़ॉल्ट है, इसलिए यह आमतौर पर छोड़ दिया जाता है)। क्वेरी स्ट्रिंग सर्वर को पैरामीटर पास करती है, जो यह बदल सकती है कि यह क्या लौटाता है। # के बाद फ्रैगमेंट केवल ब्राउज़र द्वारा संभाला जाता है और कभी सर्वर को नहीं भेजा जाता; यह पृष्ठ के भीतर एक स्थान को इंगित करता है। डोमेन को IP पता में हल करना DNS (Domain Name System, नामों से संख्याओं के लिए वेब की निर्देशिका) के माध्यम से जाता है, और वह लुकअप स्वयं एक नेटवर्क राउंड ट्रिप है, इसलिए एक कोल्ड DNS रिजॉल्यूशन विलंब है जो उपयोगकर्ता पृष्ठ के पहले बाइट आने से पहले भुगतान करता है। शारीरिक रचना को जानना व्यावहारिक है: यह बताता है कि सर्वर क्या देख सकता है (पथ और क्वेरी), क्या नहीं कर सकता (फ्रैगमेंट), और एक धीमे पहले लोड को कहाँ छिपाया जा सकता है।

JunoURL और डोमेन एक URL एक पृष्ठ का पूरा पता है। https यह कहता है कि सर्वर से कैसे बात करें, डोमेन scrimba.com जैसे साइट का नाम है, और पथ /learn जैसे पृष्ठ पर एक पृष्ठ को इंगित करता है। इसे बाएं से दाएं पढ़ें और यह आपको बिल्कुल बताता है कि ब्राउज़र कहाँ जा रहा है।
JunoURL और डोमेन एक URL स्कीम, डोमेन और पथ में विभाजित होता है, और एक बार जब आप उन भागों को देखते हैं तो आप किसी भी पता को एक नज़र में पढ़ सकते हैं। डोमेन एक संख्या के लिए एक सहज नाम है: DNS फोन बुक है जो scrimba.com को एक IP पता में बदल देता है जो ब्राउज़र वास्तव में पहुंच सकता है। वह लुकअप शांति से पृष्ठ लोड होने से पहले होता है।
JunoURL और डोमेन एक URL का हर भाग अपनी जगह अर्जित करता है: स्कीम, सबडोमेन, डोमेन, पोर्ट, पथ, क्वेरी, फ्रैगमेंट। सर्वर पथ और क्वेरी देखता है लेकिन कभी फ्रैगमेंट नहीं, क्योंकि # के बाद का भाग ब्राउज़र में रहता है। और DNS रिजॉल्यूशन एक वास्तविक राउंड ट्रिप है, इसलिए एक कोल्ड लुकअप विलंब है जो उपयोगकर्ता पहले बाइट से पहले भुगतान करता है, जो याद रखने योग्य है जब पहला लोड धीमा लगता है।

अनुरोध और प्रतिक्रिया चक्र

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

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

एक पृष्ठ लोड एक अनुरोध और एक प्रतिक्रिया है। ब्राउज़र एक अनुरोध भेजता है जो पृष्ठ का नाम देता है जो यह चाहता है और यह इसे कैसे चाहता है; सर्वर एक प्रतिक्रिया भेजता है जिसमें पृष्ठ, साथ ही एक स्टेटस कोड है जो कहता है कि अनुरोध कैसे गया।

आप लगातार तीन स्टेटस कोड देखेंगे, इसलिए पहले इन्हें सीखें:

  • 200 OK: यह काम किया, यहाँ वह है जो आपने पूछा था।
  • 404 Not Found: सर्वर ठीक है, लेकिन उस पते पर कुछ नहीं है।
  • 301 Moved Permanently: यह पृष्ठ अब कहीं और रहता है, और ब्राउज़र को नए पते पर जाना चाहिए।

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

अनुरोध और प्रतिक्रिया चक्र HTTP द्वारा परिभाषित किया गया है, HyperText Transfer Protocol: नियमों का सहमत सेट कि कैसे एक क्लाइंट और सर्वर अपने संदेश तैयार करते हैं। एक अनुरोध एक विधि (क्रिया: GET लाने के लिए, POST डेटा भेजने के लिए), एक पथ, और हेडर (नाम और मान मेटाडेटा के जोड़े, उदाहरण के लिए जो प्रारूप क्लाइंट स्वीकार करता है) ले जाता है। प्रतिक्रिया एक स्टेटस कोड, अपने स्वयं के हेडर, और आमतौर पर एक बॉडी, वास्तविक सामग्री ले जाती है।

स्टेटस कोड श्रेणियों में आते हैं, और श्रेणी आपको बताती है कि किसे देखना है। 2xx सफलता है (200 OK)। 3xx रीडायरेक्ट है (301 Moved Permanently ब्राउज़र और सर्च इंजन को बताता है कि संसाधन का एक नया canonical पता है, इसलिए SEO के लिए इसे सही करना लायक है)। 4xx एक क्लाइंट त्रुटि है, जिसका अर्थ है अनुरोध गलत था (404 Not Found, 403 Forbidden)। 5xx एक सर्वर त्रुटि है, जिसका अर्थ है अनुरोध ठीक था लेकिन सर्वर विफल हो गया (500 Internal Server Error)। अंतर व्यावहारिक है: एक 4xx आपको अनुरोध की ओर इंगित करता है, एक 5xx आपको सर्वर की ओर इंगित करता है। एक दस्तावेज़ के लिए प्रतिक्रिया बॉडी HTML पाठ है, और Content-Type हेडर यह है जो ब्राउज़र को इसे सादे पाठ या छवि के बजाय HTML के रूप में मानने के लिए बताता है। याद रखने के लिए एक और लाइन: HTTP सब कुछ तार पर पठनीय भेजता है, जबकि HTTPS प्रोटोकॉल को एन्क्रिप्शन में लपेटता है ताकि कोई भी बीच में इसे पढ़ नहीं सकता या इससे छेड़छाड़ नहीं कर सकता, जिससे आज हर वास्तविक साइट HTTPS का उपयोग करती है।

Junoअनुरोध और प्रतिक्रिया चक्र हर पृष्ठ आगे और पीछे है: आपका ब्राउज़र एक अनुरोध भेजता है जो कहता है कृपया मुझे यह भेजें, और सर्वर एक प्रतिक्रिया भेजता है जिसमें पृष्ठ है। एक लाइब्रेरियन से किताब मांगने और इसे सौंप दिए जाने की तरह, या बताया जा रहा है कि यह यहाँ नहीं है। वह राउंड ट्रिप हर बार होता है जब आप एक पृष्ठ खोलते हैं, शांति से और तेजी से।
Junoअनुरोध और प्रतिक्रिया चक्र एक अनुरोध बाहर, एक प्रतिक्रिया वापस, स्टेटस कोड के साथ संलग्न। 200 (काम किया), 404 (उस पते पर कुछ नहीं), और 301 (चला गया, मेरे पीछे आओ) पहले सीखें, वे अधिकांश कवर करते हैं जो आप देखेंगे। और याद रखें कि पृष्ठ के लिए जो वास्तव में वापस आता है वह सादा HTML पाठ है, एक तस्वीर नहीं, जो ब्राउज़र तब दृश्य में बनाता है।
Junoअनुरोध और प्रतिक्रिया चक्र HTTP यात्रा की व्याकरण है: एक अनुरोध के पास एक विधि, पथ, और हेडर हैं, एक प्रतिक्रिया के पास एक स्टेटस कोड, हेडर, और एक बॉडी है। स्टेटस कोड को श्रेणी द्वारा पढ़ें, एक 4xx का मतलब अनुरोध को ठीक करें, एक 5xx का मतलब सर्वर गिर गया, और वह विभाजन आपको बताता है कि कहाँ देखना है। बॉडी HTML पाठ है Content-Type द्वारा चिह्नित, और HTTPS इसके चारों ओर लपेटा गया एन्क्रिप्शन के साथ HTTP है, जिससे आज हर वास्तविक साइट इसका उपयोग करती है।

ब्राउज़र जो HTML प्राप्त करता है उसके साथ क्या करता है

प्रतिक्रिया एक पृष्ठ के बराबर HTML पाठ है। आपका ब्राउज़र उस पाठ को ऊपर से नीचे तक पढ़ता है और इसे स्क्रीन पर खींचता है: यह एक शीर्षक टैग देखता है और बड़ा बोल्ड पाठ दिखाता है, यह एक पैराग्राफ टैग देखता है और पाठ की एक पंक्ति दिखाता है, यह एक छवि टैग देखता है और तस्वीर लाता है।

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

ब्राउज़र HTML पाठ नहीं दिखाता, यह इससे एक पृष्ठ बनाता है। जैसे ही यह दस्तावेज़ को ऊपर से नीचे तक पढ़ता है, यह टैग को DOM में बदल देता है, Document Object Model: पृष्ठ के तत्वों का एक लाइव ट्री जो मेमोरी में आयोजित है। DOM यह है जो वास्तव में प्रदर्शित होता है और CSS और JavaScript बाद में पढ़ते और बदलते हैं।

आदेश यहाँ महत्वपूर्ण है। ब्राउज़र दस्तावेज़ को उसी क्रम में पढ़ता है जिसमें आपने इसे लिखा है, इसलिए शीर्ष के पास एक <script> या स्टाइलशीट इसके नीचे की सामग्री से पहले निपटाई जाती है। यह व्यावहारिक कारण है कि पृष्ठ <head> में पृष्ठ के बारे में जानकारी और <body> में दृश्य सामग्री रखते हैं, और क्यों एक टैग रखने से इसका प्रभाव कब पड़ता है। आप बस तत्वों को सूचीबद्ध नहीं कर रहे हैं, आप ब्राउज़र को पढ़ने का आदेश दे रहे हैं।

HTML को पिक्सल में बदलना एक पाइपलाइन है, और इसके आकार को जानना बताता है कि कुछ पृष्ठ दूसरों की तुलना में क्यों धीमे हैं। ब्राउज़र HTML पाठ को पार्स करता है (इसे पढ़ता है और संरचना बनाता है) DOM में (Document Object Model: हर तत्व का इन-मेमोरी ट्री)। यह CSS को एक समानांतर ट्री में पार्स करता है, दोनों को जोड़ता है, ज्यामिति (लेआउट: प्रत्येक बॉक्स कहाँ बैठता है) काम करता है, और अंत में स्क्रीन पर पिक्सल पेंट करता है।

क्योंकि पार्सर ऊपर से नीचे तक पढ़ता है, प्लेसमेंट समय बदलता है। एक संसाधन रेंडर ब्लॉकिंग होता है जब ब्राउज़र उस संसाधन के साथ खत्म होने तक सामग्री को पेंट नहीं करेगा। <head> में एक स्टाइलशीट डिजाइन द्वारा रेंडर ब्लॉकिंग है, इसलिए पृष्ठ अस्टाइल नहीं चमकता, लेकिन एक धीमा सामग्री पूरे पहले पेंट को पकड़ता है। <head> में एक क्लासिक <script> बदतर है: पार्सर रुकता है, स्क्रिप्ट डाउनलोड करता है और चलाता है, फिर फिर से शुरू करता है, इसलिए दस्तावेज़ के शीर्ष पर एक स्क्रिप्ट इसके नीचे हर तत्व में देरी करती है (defer और async विशेषताएं उस ब्लॉक को तोड़ने के लिए मौजूद हैं)। यह वह है जो दस्तावेज़ क्रम और <head> प्लेसमेंट को तय करता है कि क्या पहले पेंट होता है: ब्लॉकिंग संसाधन के ऊपर सब कुछ इसका इंतजार करता है।

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

Junoब्राउज़र जो HTML प्राप्त करता है उसके साथ क्या करता है जो HTML वापस आता है वह पृष्ठ का विवरण है, और ब्राउज़र वह कुक है जो इसे वास्तविक चीज में बदल देता है। यह ऊपर से नीचे तक पढ़ता है: शीर्षक टैग, बड़ा बोल्ड पाठ, पैराग्राफ टैग, बॉडी पाठ, छवि टैग, तस्वीर लाओ। समान HTML में, समान पृष्ठ बाहर, हर बार।
Junoब्राउज़र जो HTML प्राप्त करता है उसके साथ क्या करता है ब्राउज़र आपके HTML को ऊपर से नीचे तक पढ़ता है और DOM बनाता है, एक लाइव ट्री तत्वों का जो वास्तव में दिखाया जाता है। क्योंकि यह क्रम में पढ़ता है, जहाँ आप एक टैग रखते हैं यह तय करता है कि यह कब प्रभाव लेता है, जो सिर और शरीर विभाजन का वास्तविक कारण है। आप बस तत्वों का ढेर नहीं दे रहे हैं, आप ब्राउज़र को पढ़ने का आदेश दे रहे हैं।
Junoब्राउज़र जो HTML प्राप्त करता है उसके साथ क्या करता है DOM में पार्स करें, CSS के साथ संयोजित करें, लेआउट करें, पेंट करें: वह पाइपलाइन है कि प्लेसमेंट समय क्यों बदलता है। रेंडर ब्लॉकिंग संसाधन के ऊपर कुछ भी इसका इंतजार करता है, इसलिए एक धीमी स्टाइलशीट या <head> में एक सादा <script> पहले पेंट को पकड़ता है, जो defer और async किस लिए हैं। विलंब जोड़ें जिसे आप दूर नहीं कर सकते, और चाल हमेशा वही है, कम और पहले के बाइट, जो मायने रखता है दस्तावेज़ में उच्च।