WebKit में स्क्रिप्ट लोड कर रहा है

WebKit का रात्रिकालीन संस्करण अब HTML5 में पेश किए गए स्क्रिप्ट टैग के async और defer गुणों का समर्थन करता है। इस प्रकार, पेज लोडिंग की गति बढ़ जाती है, क्योंकि स्क्रिप्ट लोडिंग और पेज रेंडरिंग दोनों होते हैं।



जैसा कि पृष्ठ आमतौर पर लोड होता है: पार्सर स्क्रिप्ट के लिंक के लिए कोड को स्कैन करता है, और यदि उनका पता लगाया जाता है, तो स्क्रिप्ट लोड करना शुरू कर देती है, और पूरी तरह से लोड होने और निष्पादित होने के बाद ही फिर से शुरू होती है।

< script src ="myBlockingScript.js" ></ script >



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



इस समस्या को हल करने के लिए बहुत सारी तरकीबें हैं, लेकिन उनमें से सभी अनिवार्य रूप से हैक हैं। इसके बजाय, हमारे पास उन लिपियों को चिह्नित करने का अवसर है, जिनके लिए एसिंक्स या डिफरेंशियल के रूप में सिंक्रोनस लोडिंग की आवश्यकता नहीं है। यहाँ यह कैसे काम करता है।

< script async src ="myAsyncScript.js" onload ="myInit()" ></ script >

<script defer src= "myDeferScript.js" onload= "myInit()" > </ script >



दोनों ही मामलों में, async या defer के रूप में चिह्नित लिपियों को पार्सर स्टॉप के बिना तुरंत डाउनलोड किया जाना शुरू हो जाता है, और दोनों स्क्रिप्ट ऑनलोड हैंडलर का समर्थन करते हैं जो आपको स्क्रिप्ट लोड होने पर कुछ घटनाओं को ट्रिगर करने की अनुमति देता है। Async के रूप में चिह्नित प्रत्येक स्क्रिप्ट को उस समय निष्पादित किया जाएगा जब यह पूरी तरह से लोड होने के बाद संभव होगा, लेकिन इससे पहले कि विंडो लोडिंग घटना को फेंक दिया जाए। इसका मतलब यह है कि ऐसी स्क्रिप्ट को गलत क्रम में निष्पादित किया जाएगा, जिसमें वे पृष्ठ पर सूचीबद्ध हैं। लेकिन सुरक्षित स्क्रिप्ट की उपस्थिति यह सुनिश्चित करती है कि जैसा कि उन्हें संकेत दिया गया है, वे लोड किए जाएंगे। उनका निष्पादन पार्सर के पूरा होने के बाद शुरू होगा, लेकिन DOMContentLoaded घटना होने से पहले।



यहां एक उदाहरण दिया गया है जिसमें बाहरी स्क्रिप्ट का लोड समय 1 सेकंड है, इसके बाद पृष्ठ के शरीर में स्थित स्क्रिप्ट का निष्पादन होता है, जिसमें 1 सेकंड का समय लगता है। परिणामस्वरूप, पेज लोड करने में 2 सेकंड का समय लगता है।







यहाँ एक ही उदाहरण है, लेकिन मामले के लिए जब स्क्रिप्ट को defer के रूप में चिह्नित किया जाता है। जबकि दूसरी स्क्रिप्ट निष्पादित हो रही है, पहला चुपचाप लोड हो रहा है, जो इस तथ्य की ओर जाता है कि पृष्ठ 2 बार तेजी से लोड होता है।







उपरोक्त के अलावा, मैं यह नोट करना चाहता हूं कि फ़ायरफ़ॉक्स ने लंबे समय तक डेफर और ऑनलोड गुणों का समर्थन किया है, और async का समर्थन संस्करण 3.6 में जोड़ा गया था। इंटरनेट एक्सप्लोरर ने भी लंबे समय तक defer पैरामीटर का समर्थन किया है। Async संपत्ति अभी भी किसी भी संस्करण में समर्थित नहीं होगी, जबकि ऑनलोड पहले से ही संस्करण 9 में दिखाई देगा।