क्या है एक वेबसाइट लोड हो रहा है?
एक वेब पेज लोड हो रहा है है कमोबेश किसी फाइल को डाउनलोड करना। सर्वर द्वारा आपको क्या मिलता है - ज्यादातर मामलों में - बस एक HTML फ़ाइल HTTP पर स्थानांतरित की जाती है। सबसे पहले, आप साइट के URL के लिए एक HTTP अनुरोध करते हैं, जैसे GET http://superuser.com।
विलियम जैक्सन ने कहा, HTTP का उपयोग करता है Content-Length हेडर फ़ील्ड आपको पहले से उस फ़ाइल का आकार दिखाने के लिए। यह कुछ ऐसा है जो ब्राउज़र यह अनुमान लगाने के लिए मूल्यांकन कर सकता है कि उसने पूरी साइट को डाउनलोड करने में कितनी प्रगति की है।
हालाँकि, यह उन सभी संसाधनों को कवर करने में विफल रहता है जिन्हें HTML फ़ाइल संदर्भित करके लोड कर सकती है। इनमें शामिल हो सकते हैं:
- बाहरी चित्र
- बाहरी स्टाइलशीट
- बाहरी लिपियाँ
- फ्रेम्स
- AJAX लोड करता है
ब्राउज़र को कैसे पता चलता है कि कितना लोड करना है?
अब इन संदर्भों को ढूंढना और उन्हें भी अनुरोध करना ब्राउज़र का कार्य है। इसलिए, प्रत्येक बाहरी संदर्भ के लिए, ब्राउज़र या तो अपने कैश से परामर्श करेगा, या एक नया HTTP अनुरोध भेजेगा। सुपर उपयोगकर्ता के लिए, यह तेज़ प्रदर्शन के लिए सामग्री वितरण नेटवर्क पर होस्ट की गई निम्न फ़ाइलें होंगी:
GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js - मुख्य jQuery फ़ाइल GET http://cdn.sstatic.net/js/stub.js - कुछ जेएस फ़ंक्शन GET http://cdn.sstatic.net/superuser/all.css - स्टाइलशीट - ...
जब आप समयरेखा ट्रैकिंग सक्षम करते हैं तो आप वास्तव में फायरबग या क्रोम के डीबगर का उपयोग करके इसे देख सकते हैं। यह सुपर उपयोगकर्ता को लोड करने की समय सीमा है, फ़िल्टर किया गया है ताकि केवल अनुरोध दिखाए जाएं। बड़ा करने के लिए क्लिक करें:
जैसा कि हम देख सकते हैं, मुख्य सुपर उपयोगकर्ता साइट को लोड होने में सबसे लंबा समय लगेगा, लेकिन इसमें से कैस्केडिंग, अन्य पेज लोड (यानी HTTP अनुरोध या कैश अनुरोध) शामिल हैं। उन सभी को भी बेनकाब किया Content-Length, इसलिए ब्राउज़र इन सभी फाइलों को लोड करने में कितना समय लेगा, इसका अच्छा अनुमान लगा सकते हैं।
और चूंकि यह सब बहुत कम समय सीमा के भीतर हो रहा है, आप प्रगति पट्टी में छोटी अनियमितताओं को नोटिस नहीं करेंगे। कभी-कभी आप प्रगति पट्टी को दो तिहाई पर लटका देखेंगे - ऐसा तब हो सकता है जब ब्राउज़र बाहरी संसाधन को दूसरों के रूप में तेजी से लोड करने में विफल रहता है।
ब्राउज़र इसे कैसे लागू करते हैं?
गूगल क्रोम
मैंने Google Chrome (a.k.a. Chromium) के स्रोतों पर ध्यान दिया है और इस वर्ग को बुलाया ProgressTracker.cpp । दरअसल, यह Apple द्वारा लिखा गया है, इसलिए यह संभवतः सबसे उपजी है वेबकिट रेंडरिंग इंजन। इसमें निम्नलिखित फ़ील्ड शामिल हैं:
ProgressTracker::ProgressTracker()
: m_totalPageAndResourceBytesToLoad(0)
, m_totalBytesReceived(0)
इस प्रकार, जैसा कि मैंने कहा, संसाधन बाइट्स की कुल संख्या की पहचान की जाएगी, और प्रगति को तदनुसार बदला जाएगा। एक दिलचस्प टिप्पणी है जो आपको बताती है कि पहले लोड किए गए पृष्ठ का वास्तविक महत्व कैसे बढ़ा है:
// वेबकोर लेआउट सिस्टम का उपयोग करने वाले दस्तावेज़ों के लिए, पहले लेआउट को आधे रास्ते के बिंदु के रूप में समझें।
इसलिए, यदि पहला पृष्ठ लोड किया गया है (और इसके बाहरी संसाधनों को अभी भी लोड करना है), प्रगति 50% होगी।
फ़ायरफ़ॉक्स (विखंडन ऐड-ऑन)
अब, वहाँ भी थोड़ा आसान मीट्रिक है। में देखा है विखंडन फ़ायरफ़ॉक्स के लिए प्रगति बार विस्तार। अगर मैं इसे गलत तरीके से नहीं पढ़ रहा हूं, तो यह कुछ ऐसा करता है जो आसानी से सोच सकता है।
हर वेब साइट में कई की संख्या होती है डोम तत्व । पहली HTML साइट को पार्स करके, लोड किए जाने वाले DOM तत्वों की कुल संख्या का अनुमान लगाया जा सकता है।
प्रत्येक लोड किए गए DOM तत्व के लिए, काउंटर बढ़ाएँ, और बस उसके अनुसार एक प्रगति बार प्रदर्शित करें।