7

मैं Google क्रोम के साथ भेजे गए प्रदर्शन टूल में डाइविंग कर रहा हूं क्योंकि मैं प्रदर्शन सुधार तकनीकों के आसपास अपना सिर प्राप्त करने की कोशिश कर रहा हूं। मैं टाइमलाइन टैब के साथ खेल रहा हूं, और मैंने पाया कि मेरे पेज पर पहली पेंट घटना DOMContentLoaded ईवेंट से पहले हो रही है। मैंने कुछ लेख पढ़े और कथित तौर पर पहला पल जब ब्राउज़र उपयोगकर्ता को सामान प्रदर्शित करना शुरू कर सकता है DOMContentLoaded के बाद होना चाहिए। क्या कोई इसे समझा सकता है यह सच है?डीओएमकंटेंट लोड होने से पहले पहला पेंट क्यों हो रहा है

उत्तर

4

DOMContentLoaded का अर्थ है कि पार्सर ने HTML को DOM नोड्स में परिवर्तित कर लिया है और किसी भी तुल्यकालिक स्क्रिप्ट को निष्पादित किया है।

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

यह सर्वर से स्ट्रीम किए गए बड़े दस्तावेज़ों के लिए भी प्रासंगिक है। उपयोगकर्ता लोडिंग पूर्ण होने से पहले इसे पढ़ना शुरू कर सकता है।

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

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

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow

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

0

शानदार सवाल! जैसा कि मुझे पता है कि यह हमेशा मामला नहीं है। किस ब्राउजर को पेंट करने की ज़रूरत है वह रेंडर पेड़ है और इसका मतलब है कि इसे डीओएम और सीएसएसओएम की जरूरत है, लेकिन मुद्दा यह है कि जावा स्क्रिप्ट को अवरुद्ध करने वाले पार्सर जैसी बाधाएं हैं या अवरुद्ध सीएसएस प्रस्तुत करना है जो इस प्रक्रिया को रोक सकता है। लेकिन आपका प्रश्न विशेष रूप से DOMContentLoaded के बारे में है यदि आप में उपयोगकर्ता एजेंट के लिए निर्धारित चरणों को पढ़ते हैं और विशेष रूप से चरण 4 आप देखेंगे कि जब भी निष्पादन के लिए कोई स्क्रिप्ट नहीं छोड़ी जाती है तो यह ईवेंट निकाल दिया जाता है लेकिन यदि आप स्क्रिप्ट को डिफर या एसिंक के साथ चिह्नित करते हैं तो क्या होगा ऐसा करने से आप वादा करते हैं कि स्क्रिप्ट सीएसएसओएम पर सवाल नहीं उठाएगी। यहां मेरे डमी नमूना नोट से कैप्चर की गई समय रेखा है जिसे मैंने जावा स्क्रिप्ट को डिफर के रूप में चिह्नित किया: TimeLine Example इस चार्ट में आप देख सकते हैं कि पहला पेंट डीसीएल से पहले है! Ilya Grigorik

संबंधित मुद्दे