extsrc.js - सभी स्क्रिप्ट्स को अतुल्यकालिक रूप से लोड करें और पृष्ठ को रेंडर करने के बाद (यहां तक ​​कि डॉक्यूमेंट.राइट के साथ)

मैं आपको उस चीज के बारे में बताना चाहता हूं जिसे मैंने आज लोड करने वाली साइटों की प्रक्रिया को गति देने के लिए आविष्कार किया था। आप सभी जानते हैं कि <script src="..."></script> इस स्क्रिप्ट के लोड होने तक पृष्ठ रेंडर करने में देरी होती है। यदि उनमें से दर्जनों हैं, तो यह साइट के काम को गंभीरता से धीमा कर सकता है - परिणामस्वरूप, उपयोगकर्ता कुछ सुस्त सामाजिक विजेट (इन विगेट्स के एक दर्जन से गुणा) के कारण 20 सेकंड के लिए रिक्त (या अविकसित) पृष्ठ को घूरता है।

क्या यह अच्छा नहीं होगा यदि आप कह सकते हैं कि <script extsrc ="..."></script> ( "extsrc" = " " ) ताकि पेज रेंडर होने के बाद स्क्रिप्ट लोड हो जाए ?

सबकुछ ठीक हो जाएगा, लेकिन document.write ... आज मैंने आखिरकार उसकी समस्या हल कर दी - मैं एक्सट्रेस आदि प्रस्तुत करता हूं - एक स्क्रिप्ट जो पेज को रेंडर करने के बाद सभी स्क्रिप्ट चलाएगी (भले ही उनके पास document.write राइट - और सब कुछ सही तरीके से तैयार होगा)।

परिणाम? सुपर-फास्ट लोडिंग पेज, भले ही सभी प्रकार की बाहरी स्क्रिप्ट का एक समुद्र हो।

का उपयोग करें:

<script src ="..."> <script extsrc ="..."> <script src ="..."> को <script extsrc ="..."> बदलें।

कुल है:

 <script src="http://whiteposts.com/extsrc_js/extsrc.js"></script> <script extsrc="..."></script> 

Google कोड पर सभी सबसे महत्वपूर्ण बात: http://code.google.com/p/extsrcjs/

सभी extsrc="..." क्रमिक रूप से लोड किए गए हैं ( document.write कारण), लेकिन पेज रेंडर होने के बाद (सामान्य src="..." विपरीत, जो उपयोगकर्ताओं को स्क्रिप्ट लोड होने तक एक खाली पेज देखने के लिए मजबूर करता है) ।

मैं AdSense को अतुल्यकालिक बनाने की अनुशंसा नहीं करता - अनधिकृत कोड परिवर्तनों के लिए आप अपना खाता खो सकते हैं।

मुझे इस तरह से src = "" क्यों पसंद नहीं आया? खैर, 100GBit (उन्होंने आज लिखा) में अंतिम DDOS के प्रकाश में, ट्विटर से विजेट वाले मेरे सभी पृष्ठ एक मिनट से अधिक समय तक लोड रहे। यह हर किसी के लिए जावास्क्रिप्ट के अतुल्यकालिक लोड करने के लिए स्विच करने का समय है, खासकर जब से यह मौजूदा ब्राउज़रों में पहले से ही संभव है और यहां तक ​​कि document.write (पहले 'async' के खिलाफ मुख्य तर्क) के साथ।

asyncsrc

 <script asyncsrc="..."></script> 

extsrc ="..." अलावा extsrc ="..." भी है - document.write के दृष्टिकोण से तेज़, लेकिन कम सुरक्षित। <script asyncsrc ="..."></script> यदि आप सुनिश्चित हैं कि इस विशेष स्क्रिप्ट में कोई document.write नहीं है।

संक्षेप में, <script asyncsrc=""> के समान है, केवल सभी उचित ब्राउज़रों में काम करना (जहाँ तक मुझे पता है)।

सभी asyncsrc को समानांतर में लोड किया जाएगा (तदनुसार, इस बात की कोई गारंटी नहीं है कि कौन सी स्क्रिप्ट पहले लोड होगी, लेकिन स्वाभाविक रूप से यह extsrc तुलना में तेज है जो extsrc में लोड किए गए extsrc )। इन दोनों दृष्टिकोणों के संयोजन की समस्या document.write के कार्यान्वयन में ठीक है।

सामान्य तौर पर, मैं स्क्रिप्ट के बारे में निश्चित नहीं हूं - extsrc="..." लिखें। ज़रूर - asyncsrc="..." लिखें।

कुल मिलाकर

यही है, सबसे पहले, सभी script src="..." do extsrc="..." , और फिर एक-एक करके हम asyncsrc = "..." में बदल जाते हैं - अगर कुछ भी टूटा नहीं है।

HTML कोड फिक्स्ड।
डाउनलोड प्रारंभ समय (चित्रों के बाद)। फिक्स्ड।
आईई / ओपेरा और खाली Script3 के साथ बग। फिक्स्ड।
बग document.write('<script src="...">'); document.write('</script>'); document.write('<script src="...">'); document.write('</script>'); यह भी निश्चित है।
व्याकरण के कीड़े भी तय हो गए हैं। :)

कीड़े खोजने के लिए टिप्पणियों और पोस्ट में उपयोगकर्ताओं के लिए धन्यवाद ।

परीक्षण और काम करता है : IE 6/8, ओपेरा 10, क्रोम 7, फ़ायरफ़ॉक्स 3।
क्षमा करें, कि पोस्ट हटा दी गई थी - सब कुछ क्रम में लगाने में समय लगा। वर्चुअल मशीन के तहत IE में डिबग करना अभी भी मुश्किल है। :)

परीक्षण, कोशिश, तोड़ अगर कोई अपनी साइट को इस विधि में स्थानांतरित करेगा - परिणामों के बारे में सदस्यता समाप्त करें :) विशेष रूप से बुरे लोगों के बारे में, जहां कुछ काम नहीं करता है।

JQuery

JQuery के एक्सटेस आर्क की तरह काम करने की सबसे अधिक संभावना है, इसके लिए प्लगइन्स को एक्सटेसस्क की तरह भी लोड किया जा सकता है, लेकिन आप इनलाइन जावास्क्रिप्ट का उपयोग नहीं कर सकते हैं:

 <script extsrc="jquery.js"></script> <script> $(document).ready(....) </script> 

यह एक काम नहीं करेगा! क्योंकि सबसे पहले यह एक "इनलाइन स्क्रिप्ट" (डॉक्यूमेंट के बारे में पहले से ही) को अंजाम देने की कोशिश करेगा, जो नहीं जानता होगा कि $ क्या $ , और फिर JQuery लोड हो जाएगा।

समाधान: आपको $(document).ready(...) स्थानांतरित करने की आवश्यकता है। पहले से ही $(document).ready(...) एक अलग फ़ाइल में और इसे extsrc="..." रूप में लोड करें।

अद्यतन

किसी ब्रेंडेन ग्रेस ने कुछ परीक्षण किए, और विशेष रूप से धीमा स्क्रिप्ट के लोडिंग अनुक्रमिक ( extsrc ) के साथ, पेज 1.2 सेकंड में लोड हो रहा है, जबकि सामग्री 300ms के लिए दिखाई दी? (तस्वीर से न्याय करना मुश्किल)

डिफ़ॉल्ट लोडिंग पर, 500 में लोड की गई सभी सामग्री (। वास्तव में, इससे निष्कर्ष निकालना मुश्किल है, क्योंकि उपयोगकर्ता की सुविधा के लिए extsrc बनाया गया है (ताकि सामग्री जितनी जल्दी हो सके, और फिर जो चाहें डाउनलोड करें)।

लेकिन ब्रेंडन का निष्कर्ष यह है कि (निश्चित रूप से) अंत में सामग्री को क्रमिक रूप से लोड करना समानांतर से अधिक समय लेता है। लेकिन दूसरी ओर, उपयोगकर्ता ने डिफ़ॉल्ट के मुकाबले सामग्री को डेढ़ गुना तेजी से देखा ...

और याहू / एमएस ने पहले ही परीक्षण किया है - कि जितनी जल्दी परिणाम हो - क्लाइंट से अधिक पैसा :) एक पूरी तरह से वास्तविक अध्ययन।

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

ब्रेंडन और पोस्ट से चित्र

यहां मुख्य विचार सभी समान है - आप यह अनुमान नहीं लगा सकते हैं कि कोई भी बाहरी सर्वर कब तक प्रतिक्रिया देगा और आपको उन पर भरोसा नहीं करना चाहिए, इसलिए सभी बाहरी स्क्रिप्ट को extsrc पर दें।

योय हाजी
दृश्य पहले से ही हर जगह है