काइल : " http://bit.ly/9IfMMN कैशेबिलिटी (बाहरी सीडीएन), समानांतर डाउनलोडिंग, स्क्रिप्ट परिवर्तन-अस्थिरता ..."

जेम्स बर्क: " @paul_irish @fearphage @getify RequJS में स्क्रिप्ट बंडलिंग/मिनीफाइंग करने के लिए टूल का निर्माण किया गया है, इसलिए दोनों में से सर्वश्रेष्ठ हो सकता है: गतिशील और पूर्वनिर्मित"

डेवलपर्स के लिए स्क्रिप्ट लोडिंग के साथ शुरुआत करने का सबसे आसान तरीका शायद $Lab.js का उपयोग करना होगा, क्योंकि यह पहले से ही चेनिंग सिंटैक्स का उपयोग कर रहा है जिससे बहुत सारे jQuery उपयोगकर्ता परिचित हैं।

अगर वे बड़े एंटरप्राइज़ ऐप्लिकेशन बना रहे हैं, तो ज़रूरत पड़ने पर वे हमेशा requ.js पर माइग्रेट कर सकते हैं.

वर्तमान में तीन मुख्य स्क्रिप्ट लोडिंग तकनीकें हैं:

1. हेडजेएस
2. कंट्रोलजेएस
3. प्रयोगशाला

इसका उपयोग करें या नहीं, किसका उपयोग करना है यह बहस का विषय है: http://blog.getify.com/2010/12/on-script-loaders/

वहाँ भी है requireJS और EnhanceJS केवल आपके लिए विकल्प यह बताने के लिए HeadJS ControlJS और LabJS । याहू और गूगल भी कुछ इसी तरह की पेशकश करते हैं।

JQuery 1.5 और deferreds के रिलीज के साथ - http://www.erichynds.com/jquery/using-deferreds-in-jquery/ , बोरिस मूर डेफरजेएस में उनका उपयोग कर रहे हैं, एक नया स्क्रिप्ट लोडर प्रोजेक्ट: https://github। कॉम/बोरिसमूर/डेफरजेएस

डिफ़ॉल्ट रूप से स्क्रिप्ट लोडिंग अन्य सभी डाउनलोड को रोक देती है, इसलिए हैडर में मॉडर्निज़र डाउनलोड करना खराब है। इनलाइनिंग लोडर समझ में आता है, क्योंकि लोडर समानांतर में स्क्रिप्ट डाउनलोड कर सकते हैं और ब्लॉकिंग मोड में नहीं। उदाहरण के लिए यदि आपको सभी आधुनिक सुविधाओं की आवश्यकता नहीं है, तो आप head.min.js को इनलाइन कर सकते हैं जो कि केवल 6kb है या आधुनिकता का कस्टम बिल्ड (http://modernizr.github.com/Modernizr/2.0-beta/)। सीएसएस को इनलाइन करना कभी-कभी समझ में आता है। Google इनलाइनिंग का उपयोग करता है, वे डेटाौरी के माध्यम से css, js और खाली 1x1 gif को इनलाइन करते हैं।

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

http://blog.getify.com/2010/12/on-script-loaders/ लेखक द्वारा है

http://yepnopejs.com/ बस 1.0 चला गया और LAB और head.js के विपरीत, नई वेबकिट में नहीं टूटा। स्क्रिप्ट लोड करना कठिन है।

yepnope के रूप में भी Modernizr में एकीकृत है Modernizr.load .. http://modernizr.github.com/Modernizr/2.0-beta/

तो हमारे पास शायद जल्द ही मॉडर्निज़्र.लोड के माध्यम से h5bp में एक स्क्रिप्ट लोडर होगा।

मुझे नहीं लगता कि यह 1.0 बनाएगा लेकिन एक बार जब मैं मॉडर्निज़र को 1.8 तक ले जाऊंगा तो हम उसे h5bp 1.1 में टॉस करेंगे। यीह:

हाय पॉल

मैंने आपके H5BP का उपयोग करने के लिए एक मौजूदा साइट को पोर्ट किया है और मैं yepnope.js स्क्रिप्ट लोडर का उपयोग करना चाहता हूं। आपके द्वारा किए गए सभी बिट्स और बॉट्स को एक साथ रखकर देखना वाकई अच्छा है।

आप इस समय क्या उपयोग करने की सलाह देंगे?

1. पृष्ठ के शीर्ष पर yepnope.js के साथ-साथ Modernizer.js शामिल करें
2. HTML के लोड होने के बाद लोड करने के लिए इसे पृष्ठ के निचले भाग में शामिल करें।
3. Modernizer.js के बीटा संस्करण का प्रयोग करें
4. मैं yepnope.js को Modernizer.js के साथ एक में शामिल कर सकता हूं।

भले ही इसे शामिल करना कितना भी अच्छा क्यों न हो, आप स्क्रिप्ट को yepnope,js के साथ लोड करने की सलाह कैसे देते हैं?

मुझे लगता है कि हमें इसे इधर-उधर करना चाहिए: https://github.com/paulirish/html5-boilerplate/blob/master/index.html#L52 और yepnope का उपयोग करके jQuery और हमारी अन्य लिपियों की सीडीएन/स्थानीय प्रति लोड करें।

लेकिन, क्या आपको लगता है कि बाहरी स्क्रिप्ट का उपयोग करना सबसे अच्छा है, HTML के भीतर एक स्क्रिप्ट ब्लॉक को शामिल करना या प्रस्तुत करना, जो फिर स्क्रिप्ट को yepnope.js के माध्यम से लोड करता है?

बहुत धन्यवाद।

एंडी

ओह और दूसरी बात।

जैसा कि yepnope css को लोड कर सकता है, मैं कहूंगा कि मुख्य css को शामिल करना सबसे अच्छा है जैसा कि आप सामान्य रूप से करेंगे और yepnope का उपयोग केवल विशिष्ट सुधारों के लिए css को शामिल करने के लिए करेंगे।

उदाहरण के लिए कुछ सीएसएस सहित जो केवल आईई के पुराने संस्करणों पर लागू होता है।

होकापोका,

मॉडर्निज़्र के बीटा संस्करण का उपयोग करें .. बस आपको जो चाहिए उसे शामिल करें (और Modernizr.load() ) और फिर उसे पृष्ठ के शीर्ष पर रखें।

Yepnope के साथ jQuery फ़ॉलबैक के लिए वास्तविक कोड http://yepnopejs.com/ पर है

और हाँ मुझे आईई सीएसएस के सशर्त भार का आपका विचार पसंद है।

tbh स्क्रिप्ट लोडर wrt प्रदर्शन के आसपास बहुत अधिक अंध विश्वास है और मुझे नहीं लगता कि हम यह कहने के लिए तैयार हैं कि यह सही तरीका है।

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

इसलिए।

इस टिकट को बंद करना और डेवलपर्स के लिए इस बारे में एक स्मार्ट विकल्प बनाना आसान बनाने के लिए आवश्यक व्यापक शोध और प्रकाशन करने की परवाह करने वाले किसी भी व्यक्ति से पूछना

मैंने समांतर बनाम समानांतर भार के बारे में काफी शोध किया है। मैं अभी भी, बिना आरक्षण के, पहले सभी जेएस को एक फ़ाइल में संयोजित करने की सिफारिश करता हूं, फिर इसे 2-3 ~ बराबर आकार के टुकड़ों में बांटता हूं, और उन्हें समानांतर में लोड करता हूं।

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

यदि मैं/हम परीक्षण के लिए बैंडविड्थ मुद्दे को हल कर सकते हैं, तो मेरे पास परीक्षण हैं जो यह पता लगाने के लिए चलाए जा सकते हैं कि समानांतर लोडिंग का सिद्धांत वास्तव में व्यवहार्य है (जैसा कि मेरा मानना ​​​​है कि यह है)।

@getify जहां तक ​​​​एक परीक्षण रिग के रूप में आपको क्या चाहिए?

मैं अपने व्यक्तिगत सर्वर से लगभग 1.5TB अधिक डेटा का उपयोग कर सकता हूं जो मैं वर्तमान में उपयोग कर रहा हूं। मेरे पास Nginx स्थापित है और यह लगभग 4 ट्रिलियन क्वाड्रिलियन हिट प्रति माइक्रोसेकंड को संभाल सकता है। मुझे नहीं लगता कि तकनीक यहां बाधा है।

यदि हम स्थानों के बारे में चिंतित हैं, तो हम उच्च विलंबता को धोखा दे सकते हैं, और/या कुछ अन्य लोगों को ढूंढ सकते हैं जिनके बक्से में थोड़ा अतिरिक्त कमरा है।

बीटीडब्ल्यू, मैं "अंध विश्वास" के साथ थोड़ा सा मुद्दा लेता हूं।

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

आपका कथन एक झूठा आधार है क्योंकि यह मानता है कि हम प्रत्येक साइट के लिए, स्क्रिप्ट-कॉनकैट के समानांतर-लोडिंग की तुलना करने का प्रयास कर रहे हैं। वेब पर अधिकांश साइटें वास्तव में स्क्रिप्ट-कॉनकैट का उपयोग नहीं कर सकती/नहीं कर सकती हैं, इसलिए वास्तव में तुलना (उनके लिए, बहुमत) उतनी बारीक और जटिल नहीं है जितनी आप मानते हैं। यदि वे स्क्रिप्ट-कॉनैट (किसी भी कारण से) का उपयोग नहीं कर सकते/नहीं कर सकते हैं, तो तुलना सरल है: समानांतर-लोडिंग लगभग हमेशा स्क्रिप्ट टैग पर जीत होती है।

यदि वे स्क्रिप्ट-कॉनकैट (या पहले से ही इसका उपयोग करते हैं) के लिए खुले हैं, तो हाँ, यह तय करने के लिए थोड़ा और अधिक जटिल/जटिल हो जाता है कि समांतर-लोडिंग मदद कर सकती है या नहीं। लेकिन स्क्रिप्ट-कॉनकैट एक आकार-फिट-सभी सिल्वर बुलेट समाधान नहीं है, इसलिए ऐसी बहुत सी साइटें हैं जिनके लिए समानांतर-लोडिंग पसंदीदा और सर्वोत्तम तरीका रहेगा।

सिर्फ इसलिए कि कुछ साइटें समानांतर-लोडिंग बनाम स्क्रिप्ट-कॉनकैट के बीच निर्णय लेने की बारीकियों/जटिलताओं से निपटती हैं, इसका मतलब यह नहीं है कि समानांतर-लोडिंग बनाम स्क्रिप्ट टैग की अधिक (अधिक प्रभावशाली) चर्चा मिश्रण में खो जानी चाहिए। पूर्व को साबित करना कठिन है, लेकिन बाद वाला लगभग इस बिंदु पर दिया गया है।

यह सब कहना है कि, सभी बातों पर विचार किया जाता है, आईएमएचओ एक बॉयलरप्लेट को एक पैटर्न को प्रोत्साहित करना चाहिए जिसका सकारात्मक दिशा में सबसे बड़ा प्रभाव पड़ता है। यदि आज इंटरनेट पर 80% साइटें स्क्रिप्ट टैग का उपयोग करती हैं, जिनमें से अधिकांश को स्क्रिप्ट टैग से समानांतर-लोडिंग में जाने से लाभ होगा, तो समानांतर-लोडिंग बॉयलरप्लेट के लिए शुरुआती बिंदु के रूप में सुझाव देने के लिए एक बहुत ही स्वस्थ बात है।

यह उन साइटों का एक बहुत छोटा (लेकिन महत्वपूर्ण) उपखंड है जो संभावित रूप से स्क्रिप्ट-कॉनकैट बनाम समानांतर-लोडिंग की खोज से और भी अधिक लाभ प्राप्त कर सकता है। लेकिन अल्पसंख्यक उपयोग-मामला वह नहीं है जिसे बॉयलरप्लेट में अनुकूलित किया जाना चाहिए।

बस मेरे कुछ सेंट।

@paulirish @slexaxton -

जहां तक ​​बैंडविड्थ की जरूरत है, मैंने अनुमान लगाया कि एक बार परीक्षण चलाने के लिए 10,000 लोगों (जो मुझे लगा कि एक सटीक नमूना होने की आवश्यकता थी) प्राप्त करने के लिए (और कई लोग इसे कई बार चलाएंगे, मुझे यकीन है), यह लगभग होगा 200GB बैंडविड्थ खर्च की गई। कुछ लोगों के लिए, यह बाल्टी में एक बूंद है। मेरे लिए, कुछ ही दिनों में 200GB बैंडविड्थ मेरे सर्वर होस्टिंग लागतों के लिए भारी होगा। इसलिए, मैंने अकेले उस कारण से परीक्षणों को बढ़ाने का प्रयास नहीं किया है।

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

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

हम परीक्षणों की शेष चर्चा को ऑफ़लाइन ले सकते हैं और इसे ईमेल या आईएम पर आगे बढ़ा सकते हैं। मैं अंत में परीक्षणों को स्केल करना और इस मुद्दे को "व्यवस्थित" करना चाहता हूं। यह अब एक साल के बेहतर हिस्से के लिए मेरे दिमाग के पीछे लटक रहा है।

मैं अपने ड्रीमहोस्ट वीपीएस पर असीमित टीबी कर सकता हूं इसलिए यह कोई समस्या नहीं होगी। अभी मैं 72GB/दिन कर रहा हूं और और अधिक तरीके से संभाल सकता हूं। :)

मैं पॉल से सहमत हूं, और मुझे लगता है कि स्क्रिप्ट-लोडर कैसे और कब किसी के लिए किसी लाभ के होने जा रहे हैं, इस बारे में काफी गलत जानकारी है।

आपका पहला पैराग्राफ कहता है कि यह 'आसान', 'सिद्ध' और 'बिना सवाल' है कि स्क्रिप्ट लोडर प्रदर्शन में सुधार करते हैं।

मैंने कुछ समय पहले @jashkenas के लिए भी इसी तरह की

https://github.com/SlexAxton/AssetRace

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

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

मुझे लगता है कि सबसे खराब स्थिति यह है कि लोग yepnope या lab.js जैसी कोई चीज़ ले रहे हैं और इसे स्क्रिप्ट टैग पॉलीफ़िल के रूप में उपयोग कर रहे हैं। यह पूरी तरह से धीमी लोडिंग (उनकी 19 JS और 34 CSS फाइलों में से) के साथ-साथ बैकवर्ड और फॉरवर्ड संगतता मुद्दों की एक श्रृंखला पेश करने वाला है, जिससे वे पूरी तरह से अनजान होंगे।

मुझे लगता है कि _बॉयलरप्लेट_ के लिए लोगों को सबसे समझदार और प्रदर्शनकारी और संगत डिफ़ॉल्ट देने की भावना में, एक बिल्ड टूल तीनों को सुनिश्चित करने के लिए बहुत आगे जाता है।

@slexaxton

... परिणामों ने सबसे अच्छा दिखाया कि यह स्क्रिप्ट-लोडर लगभग उसी गति के बारे में था जैसे कि कॉनकैट विधि (आपके समान आकार के 3 फ़ाइल समानांतर लोड दिशानिर्देशों का पालन किया गया) ...

आपके द्वारा एक साथ किए गए परीक्षणों पर एक नज़र डालने के लिए मुझे खुशी से कुछ समय मिलेगा। मुझे यकीन है कि आप लोग जानते हैं कि आप क्या कर रहे हैं इसलिए मुझे यकीन है कि आपके परीक्षण मान्य और सही हैं।

ओटीओएच, मेरे पास बहुत सारे विरोधाभासी सबूत हैं। अगर मैंने कभी ऐसा कुछ भी देखा है जो यह सुझाव देने के लिए मजबूर करता है कि समानांतर स्क्रिप्ट लोडिंग अधिकांश साइटों के लिए बेकार या अनुपयोगी थी, तो मैंने बहुत पहले पागल समय सिंक को छोड़ दिया था जो कि एलएबीजे है।

मैं 100% निश्चितता के साथ कह सकता हूं कि मैंने 2 वर्षों में LABjs को लोगों के लिए उपलब्ध कराने में मदद करने के बाद कभी ऐसी स्थिति नहीं पाई, जहां LABjs स्क्रिप्ट टैग विकल्प की तुलना में धीमा था। शून्य बार ऐसा कभी हुआ है _to me_। ऐसा कई बार हुआ है कि लोगों ने कहा कि उन्हें ज्यादा फायदा नहीं हुआ। ऐसा कई बार हुआ है जब लोग 100+ फाइलें लोड कर रहे थे और इसलिए उन कई कनेक्शनों के पागल ओवरहेड ने किसी भी लाभ को मिटा दिया जो उन्होंने अन्यथा देखा हो। लेकिन मैंने कभी किसी ने मुझे यह नहीं बताया कि एलएबीजे ने अपनी साइट को धीमा कर दिया है।

मैंने सचमुच 50+ विभिन्न साइटों को स्क्रिप्ट टैग से एलएबीजे में स्थानांतरित करने में मदद की है, और बिना असफल साइटों ने बल्ले से प्रदर्शन में सुधार देखा। प्रयासों की शुरुआत में, मैंने शायद 7 या 8 साइटों का एक नमूना लिया, जिनकी मैंने मदद की थी, और उन्होंने सामूहिक रूप से लोडिंग गति में औसतन लगभग 15% सुधार देखा था। मेरे द्वारा प्रबंधित 4 या 5 साइटों के लिए, मैंने निश्चित रूप से LABjs को लागू किया, और तुरंत 3x लोडिंग गति देखी।

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

लेकिन एक बात जो निर्विवाद है वह यह है कि ब्राउज़र सभी स्क्रिप्ट टैग लोड करने के लिए DOM-रेडी इवेंट को ब्लॉक कर देते हैं। document.write() खोजने की संभावना के कारण उनके पास _हैं_। समानांतर स्क्रिप्ट लोडिंग अनिवार्य रूप से कह रही है "ब्राउज़र, मैं वादा करता हूं कि आपको दस्तावेज़ से निपटना नहीं होगा। लिखें, इसलिए आगे बढ़ें और पृष्ठ के साथ आगे बढ़ें"।

इस डेक की स्लाइड 10 पर दो आरेखों पर एक नज़र डालें:

http://www.slideshare.net/shadedecho/the-once-and-future-script-loader-v2

नीली रेखा (DOM-रेडी) के स्थान की तुलना करें। यह कथित प्रदर्शन (यूएक्स) में भारी सुधार है, भले ही समग्र पृष्ठ-लोड समय (या सभी संपत्तियों की लोडिंग समाप्त करने का समय) कोई बेहतर न हो।

...h5bp एक स्क्रिप्ट निर्माण उपकरण प्रदान करता है...

यहां गलत धारणा यह है कि सिर्फ इसलिए कि h5bp यह उपकरण प्रदान करता है, h5bp के सभी (या यहां तक ​​कि अधिकांश) उपयोगकर्ता इसका उपयोग कर सकते हैं। भले ही h5bp _do_ के 100% उपयोगकर्ता इसका उपयोग करते हों, इसका मतलब यह नहीं है कि यदि h5bp को इंटरनेट की लंबी पूंछ में रोल आउट किया गया, तो वे सभी उस कॉनकैट टूल का उपयोग करेंगे। अन्य कारकों का एक समूह है जो किसी को इसका उपयोग करने से आसानी से रोक सकता है। ऐसे _बहुत कम_ कारण हैं जिनकी वजह से कोई व्यक्ति स्क्रिप्ट टैग का उपयोग करने से समानांतर स्क्रिप्ट लोडर का उपयोग करने के लिए आगे नहीं बढ़ सकता है।

जैसे, समानांतर स्क्रिप्ट लोडिंग अभी भी इंटरनेट की लंबी पूंछ के लिए एक व्यापक अपील प्रदान करती है। स्क्रिप्ट लोडिंग ऑप्टिमाइज़ेशन का उपयोग नहीं करने वाली अधिकांश साइटों के लिए यह अभी भी आसान है, कुछ भी नहीं से कुछ करने के लिए, और यह कि कुछ उन्हें प्रदर्शन जीत प्रदान करता है। उन लंबी-पूंछ वाली साइटों में से कुछ कभी भी अपने सस्ते $ 6/महीने, सामूहिक साझा होस्टिंग, गैर-सीडीएन'ड वेब होस्टिंग वातावरण में स्वचालित स्क्रिप्ट निर्माण टूल पर प्रयास (या प्रयोग करने का कौशल) खर्च करेंगे।

मुझे लगता है कि सबसे खराब स्थिति यह है कि लोग yepnope या lab.js जैसी कोई चीज़ ले रहे हैं और इसे स्क्रिप्ट टैग पॉलीफ़िल के रूप में उपयोग कर रहे हैं। यह पूरी तरह से धीमी लोडिंग का परिणाम है ...

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

ऐसा कोई कारण नहीं है कि समानांतर स्क्रिप्ट लोडिंग के परिणामस्वरूप ब्राउज़र स्क्रिप्ट टैग के साथ जो हासिल कर सकता है, उसकी तुलना में धीमी लोडिंग हो रही है। इसका कोई अर्थ नही बन रहा है। और जैसा कि मैंने ऊपर स्थापित किया है, स्क्रिप्ट टैग हमेशा डोम-रेडी को ब्लॉक करेंगे, जहां समानांतर स्क्रिप्ट लोडिंग नहीं होगी।

बैकवर्ड और फॉरवर्ड संगतता मुद्दों का एक समूह पेश करें जिनसे वे पूरी तरह से अनजान होंगे।

आप किस संगतता मुद्दों के बारे में बात कर रहे हैं? LABjs के ब्राउज़र समर्थन मैट्रिक्स में पूरी तरह से कवर किए गए ग्रह पर प्रत्येक वेब ब्राउज़र का विशाल बहुमत है। जिन ब्राउज़रों में यह टूटता है उनका पागल छोटा टुकड़ा बड़ी संख्या में उन ब्राउज़रों से कहीं अधिक है जिनमें इसके स्पष्ट लाभ हैं।

LABjs 1.x में कैश-प्रीलोडिंग जैसे क्रेजी हैक्स का एक गुच्छा था, जो वास्तव में ब्राउज़रों के टूटने के लिए प्रमुख चिंताएं थीं। LABjs 2.x पूरी तरह से उल्टा हो गया है, और अब सभी मामलों में समानांतर लोडिंग के लिए विश्वसनीय और मानकीकृत दृष्टिकोण का उपयोग करता है, केवल पुराने वेबकिट ब्राउज़र के लिए हैक पर वापस आ रहा है। इसके अलावा, LABjs 2.x में पहले से ही आने वाली स्क्रिप्ट लोडिंग तकनीकों (उम्मीद है कि जल्द ही मानकीकृत होने की उम्मीद है) जैसे "वास्तविक प्रीलोडिंग" के फीचर-टेस्ट के लिए इसमें पहले से ही चेक हैं।

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

थोड़ा विस्तार करने के लिए कि मैं एलएबीजे के लिए वास्तव में एक स्क्रिप्ट टैग पॉलीफिल क्यों चाहता हूं ...

1. पुराने ब्राउज़र स्पष्ट रूप से स्क्रिप्ट टैग को संभालने में कमतर हैं जो समानांतर लोडिंग को संभाल सकता है। यह उन "पुराने ब्राउज़रों" में था (जो 2 साल पहले LABjs लॉन्च होने पर नवीनतम/सर्वश्रेष्ठ थे) कि हमने ~ 3x पृष्ठ-लोड समय सुधार देखा। लगभग परिभाषा के अनुसार, यह LABjs को एक बेहतर स्क्रिप्ट टैग पॉलीफ़िल बनाता है, क्योंकि यह उन ब्राउज़रों के लिए एक विशेषता (यानी, समानांतर लोडिंग का प्रदर्शन) लाता है जो स्वयं इसका समर्थन नहीं करते हैं।
2. नए ब्राउज़र स्पष्ट रूप से बहुत बेहतर हैं। लेकिन उन्होंने स्क्रिप्ट लोडर के लाभों को पूरी तरह से समाप्त नहीं किया है। क्रोम हाल ही में v12 के रूप में (मुझे लगता है कि वे अंततः v13 में तय हो गए हैं ऐसा लगता है) अभी भी छवि लोड को अवरुद्ध कर रहा था जबकि स्क्रिप्ट टैग लोड हो रहा था। यहां तक ​​​​कि आईई, फ़ायरफ़ॉक्स और क्रोम से नवीनतम के साथ, वे सभी अभी भी डोम-तैयार को अवरुद्ध करते हैं, जबकि स्क्रिप्ट गतिशील रूप से लोड हो रही हैं, क्योंकि उन सभी को अभी भी निराशावादी रूप से मानना ​​​​है कि document.write() गुप्त हो सकता है।

इसलिए, नए ब्राउज़रों के लिए, LABjs इस अर्थ में एक "पॉलीफ़िल" है कि यह ब्राउज़र में "नॉन-डोम-रेडी-ब्लॉकिंग स्क्रिप्ट लोडिंग" को इस तरह से ला रहा है जैसे स्क्रिप्ट टैग नहीं कर सकते। समानांतर स्क्रिप्ट लोडर के बिना आधुनिक ब्राउज़रों में ऐसा करने का एकमात्र संभावित तरीका defer ( async साथ स्क्रिप्ट टैग का उपयोग करना होगा स्पष्ट रूप से काम नहीं करेगा क्योंकि यह ऑर्डर को संरक्षित नहीं करता है) . हालांकि, defer इसके कई पहलू हैं, और इसका समर्थन एक व्यवहार्य समाधान होने के लिए पर्याप्त व्यापक नहीं है (गैर-स्थगित के लिए कमबैक खराब प्रदर्शन है)। तो आप कह सकते हैं कि, सबसे बुनियादी मामले में, LABjs स्क्रिप्ट टैग defer (हालांकि बिल्कुल नहीं) की प्रदर्शन विशेषताओं के लिए एक पॉलीफ़िल है।

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

साथ ही, मुझे लगता है कि हम यहां स्क्रिप्ट लोडर के बारे में सबसे बड़ा बिंदु खो रहे हैं: जेएस कोड ऑन-डिमांड लोड करने में सक्षम होने के बजाय सब कुछ सामने लोड करने में सक्षम होने के लिए (यहां तक ​​​​कि कैश में सबकुछ के साथ, पार्सिंग और प्रारंभ करने में समय लगता है और यह सुंदर हो सकता है संक्षिप्त लिपियों की एक गैर-तुच्छ राशि के साथ बदसूरत)। यूआई इंटरेक्शन के बाद कुछ प्रतीक्षा-समय होने से ब्राउजर को स्टार्ट-अप पर थोड़ा सा भी "हैंग" होने की तुलना में बहुत कम समस्या होती है (डीओएम तैयार हो सकता है, लेकिन यह कितना अच्छा है अगर कोड पेज को बढ़ाने के लिए है और पुनरावृत्ति जोड़ें अभी तक निष्पादित नहीं किया गया है: कभी देखा है कि कुछ साइटें तुरंत कैसे लोड होती हैं तो कुछ गड़बड़ होती है?)

इतना सख्त प्रदर्शन माप सब ठीक है और बांका है, लेकिन मुझे अभी भी लगता है कि कथित प्रदर्शन अंतिम लक्ष्य है ... और दुख की बात है कि अनुमान/अनुकूलन/गणना करना बहुत कम आसान है।

यह तीव्र है।

@jaubourg--

ईमानदारी से, मुझे अभी भी लगता है कि हमें स्क्रिप्ट लोडिंग ऑब्जेक्ट के लिए मानकों का अनुरोध करना चाहिए।

इस बारे में बहुत सारी याचिकाएं चल रही हैं कि कैसे मानक/विशिष्टताएं और ब्राउज़र हमें बेहतर स्क्रिप्ट लोडिंग तकनीक दे सकते हैं। वर्षों में इस श्रेणी में पहली बड़ी जीत "आदेशित async" ( async=false ) थी जिसे फरवरी में वापस अपनाया गया था और अब हर प्रमुख वर्तमान-रिलीज़ ब्राउज़र में है (अपवाद: ओपेरा बहुत जल्द आ रहा है, और IE10p2 में यह है )

अगली बहस, जिसके बारे में मैं वर्तमान में इयान हिक्सन के साथ चल रही चर्चा में हूं, जिसे मैं "वास्तविक प्रीलोडिंग" कहता हूं। मेरी राय में, "असली प्रीलोडिंग" (जो आईई पहले से ही वी 4, बीटीडब्ल्यू के बाद से समर्थन करता है) "सिल्वर बुलेट" की सबसे नज़दीकी चीज होगी जो लगभग सभी स्क्रिप्ट लोडिंग परिदृश्यों को मामूली रूप से हल करेगी। मैं अभी भी काफी आशावादी हूं कि हम कुछ इस तरह मानकीकृत देखेंगे।

अधिक जानकारी के लिए यह विकी देखें: http://wiki.whatwg.org/wiki/Script_Execution_Control

कैश को ट्रिगर करने के लिए टेक्स्ट/जावास्क्रिप्ट से भिन्न प्रकार का एक स्क्रिप्ट टैग बनाना (या इससे भी बदतर, किसी ऑब्जेक्ट टैग या छवि ऑब्जेक्ट का उपयोग करना या किसी लोकप्रिय ब्राउज़र के नए संस्करण की आवश्यकता होगी)

इसे "कैश प्रीलोडिंग" कहा जाता है, और यह एक स्वीकृत बदसूरत और भयानक हैक है। LABjs जिस तरह से अब v2 के रूप में इस पर जोर देता है (केवल पुराने वेबकिट के लिए इसे फॉलबैक के रूप में उपयोग करता है)। अन्य स्क्रिप्ट लोडर दुर्भाग्य से अभी भी इसे अपने प्राथमिक लोडिंग तंत्र के रूप में उपयोग करते हैं। लेकिन "कैश प्रीलोडिंग" की 90% आवश्यकता को "आदेशित एसिंक्स" के साथ हल किया जा सकता है, जो मानकीकृत है और हैक नहीं है, इसलिए अच्छी तरह से व्यवहार करने वाले स्क्रिप्ट लोडर को अब "कैश प्रीलोडिंग" पर प्राथमिकता देनी चाहिए।

इसलिए, मैं मानता हूं कि "कैश प्रीलोडिंग" बेकार है, लेकिन document.createElement("script") का उपयोग करने के बहुत बेहतर तरीके हैं जिनमें ऐसे हैक्स शामिल नहीं हैं, इसलिए मैं असहमत हूं कि यह ब्राउज़र स्क्रिप्ट तत्व पर भरोसा जारी रखने के खिलाफ एक तर्क है स्क्रिप्ट लोड हो रहा है। यदि हम "वास्तविक प्रीलोडिंग" प्राप्त कर सकते हैं, तो स्क्रिप्ट तत्व वह सब कुछ होगा जो हमें चाहिए। मैं ईमानदारी से ऐसा मानता हूं।

मुझे लगता है कि हम यहां स्क्रिप्ट लोडर के बारे में सबसे बड़ा बिंदु खो रहे हैं: जेएस कोड ऑन-डिमांड लोड करने में सक्षम होने के लिए

बहुत सहमत हैं कि यह एक महत्वपूर्ण लाभ है जो स्क्रिप्ट लोडर लाता है। लेकिन यह _this_ थ्रेड में एक विवादास्पद तर्क है, क्योंकि "स्क्रिप्ट कॉनकैट" लोग स्क्रिप्ट लोड किए बिना, उपयोग-मामले को हल नहीं कर सकते हैं, इसलिए दोनों की "तुलना" करने का कोई मतलब नहीं है। आप "स्क्रिप्ट कॉन्सैट" प्रस्तावक के रूप में कह सकते हैं "ठीक है, हमें उस उपयोग के मामले की परवाह नहीं है", लेकिन आप यह नहीं कह सकते कि "हम XYZ का उपयोग करके उस उपयोग-मामले को बेहतर तरीके से सेवा दे सकते हैं"।

अनुमानित प्रदर्शन _is_ विशाल और महत्वपूर्ण, मैं सहमत हूं। ऑन-डिमांड लोडिंग ऐसा करने का एक बड़ा हिस्सा है। ऑन-डिमांड लोडिंग से वास्तविक वास्तविक प्रदर्शन में भी सुधार होगा (केवल धारणा नहीं) क्योंकि यह वास्तव में कम डाउनलोड होने की ओर ले जाता है यदि आप केवल वही डाउनलोड करते हैं जो आवश्यक है (कुछ पेज विज़िट के लिए आपके द्वारा लिखे गए कोड का 100% आवश्यक है)।

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

@getify . द्वारा भावुक, लंबी टिप्पणियों को पसंद करना चाहिए
काइल ...

अगर मैं शोध में किसी भी तरह से योगदान कर सकता हूं, तो मैं _प्यार_ करूंगा।
बैंडविड्थ (लागत) समस्या नहीं लगती है, इसलिए @getify , आगे बढ़ने के लिए आप क्या प्रस्ताव रखते हैं?
ईमेल के माध्यम से मुझसे संपर्क करने में संकोच न करें (हारून [पर] aaronpeters [डॉट] या ट्विटर (@aaronpeters)

@ केली

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

जो स्पष्ट है वह यह है कि डायनामिक इंसर्शन करते समय हमें केवल प्रीलोडिंग व्यवहार की आवश्यकता होती है (यानी पहले से ही जावास्क्रिप्ट में ऐसा करना) तो हमें अभी भी स्क्रिप्ट टैग इंजेक्शन का उपयोग क्यों करना चाहिए? ऐसा नहीं है कि हम टैग को वहां रखते हैं या इसे DOM नोड के रूप में उपयोग करते हैं: यह केवल अंत का एक साधन है जिसका दस्तावेज़ संरचना से कोई लेना-देना नहीं है।

मैं उन पंक्तियों के साथ कुछ और अधिक सहज महसूस करूंगा:

window.loadScript( url, function( scriptObject ) {
    if ( !scriptObject.error ) {
        scriptObject.run();
    }
});

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

कहा जा रहा है, मैं कथित प्रदर्शन पर आपके साथ 100% सहमत हूं, मैं सिर्फ इसे इंगित करना चाहता था क्योंकि "चलो इसे एक साथ कॉम्पैक्ट करें" मंत्र जल्दी से किसी प्रकार का विश्वास बन रहा है जो मेरे स्वाद के लिए चीजों को बहुत अधिक धुंधला कर देता है;)

fwiw, defer IE4+, क्रोम, सफारी और FF 3.5+ में समर्थित है। ओपेरा में समर्थित नहीं है।

तो इसका मतलब है... 98.5% उपयोगकर्ताओं के पास पहले से ही script@defer समर्थन है।

@getify

हालांकि, defer में कई तरह की विशेषताएं हैं,

विवरण कृपया? मैंने इसके बारे में कुछ नहीं देखा है

क्या डीओएम तैयार घटना की आग से पहले या बाद में स्थगित करने वाली स्क्रिप्ट निष्पादित होती हैं?

क्या निष्पादन आदेश सभी ब्राउज़रों में संरक्षित है?

इनलाइन स्क्रिप्ट के साथ निष्पादन आदेश और बाहरी युग्मन के बारे में कैसे?

@पॉलिरिश--

...98.5% उपयोगकर्ताओं के पास पहले से ही script@defer समर्थन है।

समर्थन कई ब्राउज़रों में हो सकता है, लेकिन इसका मतलब यह नहीं है कि यह कई ब्राउज़रों में विश्वसनीय है। मेरा यही मतलब है। (निचे देखो)

हालाँकि, defer में कई विचित्रताएँ हैं,

विवरण कृपया? मैंने इसके बारे में कुछ नहीं देखा है

लेमे देखें... आईआईआरसी:

1. डायनामिक स्क्रिप्ट तत्वों पर defer का समर्थन किसी भी ब्राउज़र में परिभाषित या समर्थित नहीं है... केवल मार्कअप में स्क्रिप्ट टैग के लिए काम करता है। इसका मतलब है कि यह "ऑन-डिमांड" या "आलसी-लोडिंग" तकनीकों और उपयोग-मामलों के लिए पूरी तरह से बेकार है।
2. मेरा मानना ​​​​है कि एक ऐसा मामला था जहां कुछ ब्राउज़रों में स्थगित स्क्रिप्ट डीओएम-तैयार आग लगने से तुरंत पहले निष्पादित करना शुरू कर देगी, और दूसरों में, यह डीओएम-तैयार निकाल दिए जाने के तुरंत बाद हुआ। उस पर और अधिक विशिष्टताओं के लिए और अधिक खुदाई करने की आवश्यकता होगी।
3. किसी बाहरी संसाधन को संदर्भित करने वाले स्क्रिप्ट टैग पर प्रयुक्त defer इनलाइन कोड वाले स्क्रिप्ट टैग पर निर्दिष्ट defer से भिन्न व्यवहार करता है। अर्थात्, दोनों प्रकार की लिपियों को स्थगित करने और उन्हें अभी भी सही क्रम में चलाने के लिए काम करने की गारंटी नहीं दी जा सकती है।
4. defer एक document.write() स्टेटमेंट द्वारा लिखे गए स्क्रिप्ट टैग पर defer साथ मार्कअप में एक स्क्रिप्ट टैग से अलग है।

मेरे पास इन मुद्दों पर अपनी उंगलियों पर एक टन विवरण तैयार नहीं है। मुझे याद है कि लगभग 2 साल पहले (LABjs से पहले) defer का उपयोग करने की कोशिश कर रहा था, और क्रॉस-ब्राउज़र परीक्षण में उनमें से पर्याप्त में चल रहा था कि मैंने मूल रूप से इसे अलग रखा था और वास्तव में इसे फिर से नहीं देखा था।

मुझे यह भी बताना चाहिए कि defer वास्तव में वही नहीं है जो LABjs (और अन्य समानांतर लोडर) प्रदान करते हैं। मैंने कहा कि ऊपर चेतावनी के साथ कि यह केवल इसी तरह का है। वास्तव में, समानांतर स्क्रिप्ट लोडिंग क्या प्रदान करती है (कम से कम, LABjs के भाग के लिए), "आदेश दिया गया async" है, जिसे केवल मार्कअप के माध्यम से हासिल करने का कोई तरीका नहीं है।

"आदेशित async" और "defer" के बीच का अंतर यह है कि "आदेश दिया गया async" अभी भी पहले अनुरोधित स्क्रिप्ट के लोड होते ही निष्पादित होना शुरू हो जाएगा, जबकि "स्थगित" निष्पादन शुरू करने से पहले `DOM- तैयार होने तक प्रतीक्षा करेगा। छोटे मार्कअप वाले साधारण पेज के लिए और कोई अन्य ब्लॉकिंग मार्कअप कॉल (जैसे अन्य स्क्रिप्ट टैग) के लिए, यह अंतर छोटा है। लेकिन बहुत सारे संसाधनों वाले पृष्ठ के लिए, जब स्क्रिप्ट को निष्पादन शुरू करने की अनुमति दी जाती है, तो यह काफी भिन्न हो सकता है।

इसलिए, मैं ईमानदारी से defer के स्पर्शरेखा पर बहुत अधिक छूट नहीं लेना चाहता, क्योंकि वास्तव में यह समानांतर स्क्रिप्ट लोडिंग प्रदान करने की तुलना में बहुत अच्छी तुलना नहीं है। यह केवल मार्कअप में निकटतम उदाहरण था जिसका उपयोग मैं निष्पादन आदेशित व्यवहार का वर्णन करने के लिए कर सकता था जो मुझे मिल रहा था। मुझे शायद defer ऊपर भी नहीं लाना चाहिए था - बस चर्चा को खराब कर देता है।

मुझे ऊपर से केवल एक शब्द बदलने दें: "आधुनिक ब्राउज़रों के लिए, LABjs 'ऑर्डर किए गए async' व्यवहार के लिए एक प्रकार का 'पॉलीफ़िल' है, जिसे किसी भी ब्राउज़र में केवल-मार्कअप में चुनना संभव नहीं है।"

मुझे "आदेश दिया गया async" पसंद है, यह एक अच्छा वाक्यांश है।

काइल> afaik, defer के साथ स्क्रिप्ट _before_ अधिभार निष्पादित करेंगे, यहां तक ​​कि डोमरेडी से पहले भी।
async विशेषता के साथ लिपियों को asap, और _always_ _before_ onload निष्पादित किया जाएगा, लेकिन जरूरी नहीं कि डोमरेडी से पहले

@आरोनपीटर्स--
मुझे लगता है कि आप थोड़ा हटकर हो सकते हैं। यहां बताया गया है कि मैं इसे कैसे समझता हूं:

async स्क्रिप्ट (चाहे मार्कअप में हों या गतिशील रूप से बनाई गई हों) ASAP को निष्पादित करेंगी, जिसका अर्थ है DOM-रेडी से पहले या बाद में किसी भी समय। दूसरे शब्दों में, async स्क्रिप्ट को किसी भी चीज़ पर प्रतीक्षा नहीं करनी चाहिए (जेएस इंजन की उपलब्धता को छोड़कर)। हालांकि, अगर उनसे पहले अनुरोध किया जाता है window.onload , तो लगभग सभी ब्राउज़रों में वे window.onload ईवेंट को तब तक "होल्ड अप" करेंगे जब तक कि वे लोड और निष्पादित नहीं हो जाते। मुझे लगता है कि एक दस्तावेज का मामला था जहां async स्क्रिप्ट्स window.onload नहीं रखती थीं, बस सटीक विवरण याद नहीं था।

दूसरी ओर defer विशेष अर्थ है: DOM-रेडी होने तक प्रतीक्षा करें। इसके अलावा, उन पर defer सेट के साथ सभी लिपियों की एक "कतार" होती है, जैसे कि कतार को DOM-रेडी के बाद तक संसाधित नहीं किया जाता है, इसका मतलब है कि उन्हें DOM-रेडी (या, बल्कि, बाद में) के बाद सख्ती से निष्पादित करना चाहिए। डीओएम तैयार है और सटीक होने के लिए पार्सिंग समाप्त कर चुका है)। लेकिन उनमें और भी देरी हो सकती है (यदि लोडिंग धीमी गति से हो रही है)। हालांकि उन्हें window.onload ऊपर रखना चाहिए। मुझे बस अस्पष्ट पिछली स्मृति से याद आया कि आईई के कुछ संस्करणों में इस सिद्धांत का वास्तविक अभ्यास थोड़ा अस्पष्ट था।

@getify

मैं इस धागे को और अधिक पटरी से नहीं उतारना चाहता था इसलिए मैंने स्क्रिप्ट प्रीलोडिंग पर अपने विचार और आपके प्रस्ताव को WHATWG पेज पर यहां पोस्ट किया: http://jaubourg.net/ddriveing-a-nail-with-a-screwdriver-the-way -वेब

async स्क्रिप्ट (चाहे मार्कअप में हों या गतिशील रूप से बनाई गई हों) ASAP को निष्पादित करेंगी, जिसका अर्थ है DOM-रेडी से पहले या बाद में किसी भी समय। दूसरे शब्दों में, async स्क्रिप्ट को किसी भी चीज़ पर प्रतीक्षा नहीं करनी चाहिए (जेएस इंजन की उपलब्धता को छोड़कर)। हालांकि, अगर उनसे पहले अनुरोध किया जाता है window.onload , तो लगभग सभी ब्राउज़रों में वे window.onload ईवेंट को तब तक "होल्ड अप" करेंगे जब तक कि वे लोड और निष्पादित नहीं हो जाते।

एक बार जब आप समझ जाते हैं कि जावास्क्रिप्ट सिंगल थ्रेडेड है तो इसे समझना शायद आसान हो जाता है। (मुझे पता है कि इसमें मुझे कुछ समय लगा ...)

इसी तरह, यदि आप संसाधनों को डाउनलोड करने के लिए setTimeout(fn, 0) का उपयोग करते हैं, और वे onload आग लगने से पहले डाउनलोड कतार में प्रवेश करते हैं, तो इन संसाधनों को लोड करने से (अभी भी) onload देरी होगी।

मुझे लगता है कि एक दस्तावेज मामला था जहां async स्क्रिप्ट्स window.onload पकड़ नहीं पाए, बस सटीक विवरण याद नहीं कर रहे थे।

मुझे इसके बारे में अधिक जानकारी प्राप्त करना अच्छा लगेगा। कृपया याद रखें! :)

हाँ स्क्रिप्ट लोडर!

एओएल की साइटों के नेटवर्क में उन्हें लागू करने में मुझे एक समस्या दौड़ की स्थिति से निपटना है। उदाहरण के लिए, सिर में एसिंक्रोनस रूप से jQuery लोड करना, फिर दस्तावेज़ में बीच में एक jQuery प्लगइन कहें जो ब्लॉग पोस्ट के अंदर एसिंक्रोनस रूप से वितरित किया गया हो।

इस प्रकार, मैंने इससे निपटने के लिए अपना स्वयं का स्क्रिप्ट लोडर विज्ञान प्रोजेक्ट (Boot.getJS) शुरू किया। विचार यह है कि सभी लिपियों को समानांतर में डाउनलोड किया जाए और उन्हें जल्द से जल्द निष्पादित किया जाए, चाहे जो भी हो। यह तैयार या लोड करने और स्क्रिप्ट के कैशिंग को स्थगित करने का भी समर्थन करता है। अधिकांश विचार इस सूत्र पर लोगों द्वारा उधार (चोरी) लिए गए हैं, इसलिए धन्यवाद दोस्तों। :)

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

http://artzstudio.com/files/Boot/test/benchmarks/script.html

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

डेव (@artzstudio), अपने विचार और अपने परीक्षण पृष्ठ के लिंक को साझा करने के लिए txs।

प्रश्न: आप LABjs को '<script> टैग इन हेड' पेज पर क्यों लोड करते हैं? यह गलत लगता है।

@artzstudio भी, आप

@aaronpeters एओएल में हमारे पास

यह जानबूझकर नहीं था, यह परीक्षण दो महीने पुराना है। मौका मिलने पर मैं पुस्तकालयों को अपडेट करूंगा।

एफवाईआई (उम्मीद है कि यह कुछ हद तक दिलचस्प/प्रासंगिक है), मैंने कुछ @artzstudio परीक्षण पृष्ठों को लोड करते समय IE8 में क्या होता है यह देखने के लिए Webpagetest.org पर कुछ परीक्षण चलाए।
स्क्रिप्ट टैग: http://www.webpagetest.org/result/110810_C7_752b756180e132f50a3ef065e9e059ca/
येपनोप: http://www.webpagetest.org/result/110810_8S_a53f4ed2e16179c328fc57c572e71076/
एलएबीजे: http://www.webpagetest.org/result/110810_ZV_1ece92044799e52ed5199aed6b407133/
RequJS: http://www.webpagetest.org/result/110810_Z3_a1537e41a0b0570286151859973d0cfa/

येपनोप और एलएबीजे की तुलना करने वाला वीडियो: http://www.webpagetest.org/video/view.php?id=110810_074cb94c1b04a7ac9bd6538ec3fdd8d3c07f842d

कुछ नोट:

• सर्वर पर Gzip बंद है, इसलिए जिस तरह से RequJS के बड़े फ़ाइल आकार का प्रभाव पड़ता है
• जैसा कि पहले उल्लेख किया गया है, स्क्रिप्ट टैग पृष्ठ LABjs को HEAD में लोड करता है (इसका कोई मतलब नहीं है) और निश्चित रूप से इसका प्रभाव पड़ता है

इन दो कारणों से मैंने केवल Yepnope और LABjs दिखाते हुए एक वीडियो बनाया।

मुझे जो दिलचस्प लगता है वह यह है कि एलएबीजे के लिए प्रारंभ रेंडर समय बहुत बेहतर है। ऐसा क्यों है? बेहतर ढंग से समझना पसंद करेंगे।

समापन टिप्पणी: मैं इसे Yepnope या इस तरह की किसी भी चीज़ पर LABjs का पक्ष लेने के उद्देश्य से पोस्ट नहीं कर रहा हूँ। सिर्फ डेटा शेयर कर रहे हैं...

ओह क्षमा करें, मैं देख रहा हूँ कि <script> परीक्षण में LABjs के बारे में आपका क्या मतलब है। LABjs में अपग्रेड के साथ अभी ठीक किया गया है।

@artzstudio--

इस प्रकार, मैंने इससे निपटने के लिए अपना स्वयं का स्क्रिप्ट लोडर विज्ञान प्रोजेक्ट (Boot.getJS) शुरू किया। विचार सभी लिपियों को समानांतर में डाउनलोड करना और उन्हें जल्द से जल्द निष्पादित करना है, चाहे जो भी हो,

तो, क्या आप जानते हैं कि यह _बिल्कुल_ है जिसके लिए LABjs को डिज़ाइन किया गया है और यह बहुत अच्छा करता है (यदि मैं स्वयं ऐसा कहता हूँ)? मेरा मतलब है, क्या आप सिर्फ एक अलग एपीआई चाहते थे, या समानांतर स्क्रिप्ट लोडिंग कार्यक्षमता के बारे में क्या पर्याप्त नहीं था?

किसी भी मामले में, जितना मैं एलएबीजे के बारे में डींग मारना पसंद करता हूं, मुझे नहीं लगता कि इस धागे को "देखो, मेरा स्क्रिप्ट लोडर एक्स में बेहतर है" प्रकार की चर्चाओं के साथ प्रभावी है। वे चर्चाएँ उपयोगी हैं, लेकिन कहीं और।

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

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

अगर हमें पता चलता है कि स्क्रिप्ट टैग केवल स्क्रिप्ट लोड करने से बेहतर हैं, तो हम बस इस पागलपन को रोक सकते हैं और अपनी सभी परियोजनाओं को बंद कर सकते हैं। मुझे संदेह है कि ऐसा नहीं होगा, हालांकि। ;-)

टास्क # 2 एक बार और सभी के लिए पता लगाना है कि क्या स्क्रिप्ट-कॉनसैट हमेशा समानांतर लोड से बेहतर है। दोबारा, मेरा आधार (और मेरा परीक्षण) दिखाता है कि सभी फाइलों को एक में जोड़ना अच्छा है, लेकिन फिर आपको उस बड़ी फ़ाइल को 2-3 मोटे तौर पर बराबर टुकड़ों में बांटना होगा और उन हिस्सों को समानांतर लोड करना होगा। इसलिए, हमें वास्तव में उस सिद्धांत का भी परीक्षण करने की आवश्यकता है।

अगर हमें पता चलता है कि स्क्रिप्ट-कॉनकैट हमेशा सबसे अच्छा होता है, तो फिर, स्क्रिप्ट लोडर तब भी उपयोगी होते हैं जब आप मानते हैं कि अधिकांश साइटें एक से अधिक स्थानों से स्क्रिप्ट लोड करती हैं (गूगल सीडीएन से क्वेरी, गूगल से गूगल एनालिटिक्स, फेसबुक/ट्विटर/जी+ बटन , आदि)। इसलिए हमें कार्य #3 के रूप में यह निर्धारित करने की आवश्यकता होगी कि क्या कॉनकैट इतना बेहतर है कि आपको उन सभी फाइलों की अपनी प्रतियां होस्ट करनी चाहिए, उन्हें अपने कोड के साथ जोड़ना चाहिए।

काइल, क्या आप मेरे उदाहरण के स्रोत को देख सकते हैं और मुझे बता सकते हैं कि मैं लैबजेएस को पृष्ठ पर सभी स्क्रिप्ट को क्रम में निष्पादित करने के लिए कैसे लिखूंगा (श्रृंखला के बाहर भी)? मैं बहुत अच्छी तरह से एपीआई को गलत तरीके से पढ़ सकता था (जैसा कि पॉल ने कहा, स्क्रिप्ट लोडर कठिन हैं,% -)।

10 अगस्त 2011 को सुबह 9:09 बजे [email protected] ने लिखा:

@artzstudio--

इस प्रकार, मैंने इससे निपटने के लिए अपना स्वयं का स्क्रिप्ट लोडर विज्ञान प्रोजेक्ट (Boot.getJS) शुरू किया। विचार सभी लिपियों को समानांतर में डाउनलोड करना और उन्हें जल्द से जल्द निष्पादित करना है, चाहे जो भी हो,

तो, क्या आप जानते हैं कि यह _बिल्कुल_ है जिसके लिए LABjs को डिज़ाइन किया गया है और यह बहुत अच्छा करता है (यदि मैं स्वयं ऐसा कहता हूँ)? मेरा मतलब है, क्या आप सिर्फ एक अलग एपीआई चाहते थे, या समानांतर स्क्रिप्ट लोडिंग कार्यक्षमता के बारे में क्या पर्याप्त नहीं था?

---

किसी भी मामले में, जितना मैं एलएबीजे के बारे में डींग मारना पसंद करता हूं, मुझे नहीं लगता कि इस धागे को "देखो, मेरा स्क्रिप्ट लोडर एक्स में बेहतर है" प्रकार की चर्चाओं के साथ प्रभावी है। वे चर्चाएँ उपयोगी हैं, लेकिन कहीं और।

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

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

अगर हमें पता चलता है कि स्क्रिप्ट टैग केवल स्क्रिप्ट लोड करने से बेहतर हैं, तो हम बस इस पागलपन को रोक सकते हैं और अपनी सभी परियोजनाओं को बंद कर सकते हैं। मुझे संदेह है कि ऐसा नहीं होगा, हालांकि। ;-)

टास्क # 2 एक बार और सभी के लिए पता लगाना है कि क्या स्क्रिप्ट-कॉनसैट हमेशा समानांतर लोड से बेहतर है। दोबारा, मेरा आधार (और मेरा परीक्षण) दिखाता है कि सभी फाइलों को एक में जोड़ना अच्छा है, लेकिन फिर आपको उस बड़ी फ़ाइल को 2-3 मोटे तौर पर बराबर टुकड़ों में बांटना होगा और उन हिस्सों को समानांतर लोड करना होगा। इसलिए, हमें वास्तव में उस सिद्धांत का भी परीक्षण करने की आवश्यकता है।

अगर हमें पता चलता है कि स्क्रिप्ट-कॉनकैट हमेशा सबसे अच्छा होता है, तो फिर, स्क्रिप्ट लोडर तब भी उपयोगी होते हैं जब आप मानते हैं कि अधिकांश साइटें एक से अधिक स्थानों से स्क्रिप्ट लोड करती हैं (गूगल सीडीएन से क्वेरी, गूगल से गूगल एनालिटिक्स, फेसबुक/ट्विटर/जी+ बटन , आदि)। इसलिए हमें कार्य #3 के रूप में यह निर्धारित करने की आवश्यकता होगी कि क्या कॉनकैट इतना बेहतर है कि आपको उन सभी फाइलों की अपनी प्रतियां होस्ट करनी चाहिए, उन्हें अपने कोड के साथ जोड़ना चाहिए।

इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें:
https://github.com/paulirish/html5-boilerplate/issues/28#issuecomment -1772315

कोई सोचता होगा कि फिजिक्स का कहना है कि कॉनकैट सबसे अच्छा है। हर नया HTTP कनेक्शन एक और धीमी शुरुआत + सीडीएन से बदतर स्थिति में एक 100ms कर है।

हालांकि दस्तावेजों के बारे में सच्चाई यह है कि वे बहुत लंबे हो सकते हैं। तो एक बीएफजेएस फ़ाइल को सिर में लोड करना मॉड्यूल के प्रारंभ को अनावश्यक रूप से धीमा कर सकता है। इसे अंत में लोड करने से FOUC कष्टप्रद हो सकता है। बड़ी फ़ाइलों के लिए मोबाइल प्रभाव हो सकते हैं: http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

मुझे लगता है कि सॉडर्स के "स्प्लिट द पेलोड" नियम (http://oreilly.com/server-administration/excerpts/9780596522315/splitting-the-initial-payload.html) के पीछे यही मकसद है। हमें वह करने की ज़रूरत है जो संभवतः तेज़ भी है।

और दुर्भाग्य से यह एक "यह निर्भर करता है" प्रकार का उत्तर है, जो इस समस्या को इतना दिलचस्प बनाता है कि हम सभी का मनोरंजन करते रहें।

मैं एक हाइब्रिड दृष्टिकोण के साथ खेल रहा हूं जहां getJS कॉल को कतारबद्ध किया जाता है और समय-समय पर एक निर्धारित समय अंतराल पर समेकित किया जाता है, साथ ही साथ मॉड्यूल निर्भरता स्तर पर संगत होता है (उदाहरण के लिए एक समय में एक लोड करने के बजाय RequJS निर्भरताओं को जोड़ना), सभी सामने के छोर पर मक्खी पर।

यह एक विज्ञान प्रयोग है, जैसा कि आप इंगित करते हैं, उम्मीद है कि जल्द ही व्यर्थ हो जाएगा, लेकिन फिर भी दिलचस्प है।

@getify : मुझे पता है कि यह इस बिंदु पर परेड पर बहुत ज्यादा

अगर हमें पता चलता है कि स्क्रिप्ट टैग स्क्रिप्ट लोड करने से बस बेहतर हैं,
तब हम इस सारे पागलपन को रोक सकते हैं और अपनी सभी परियोजनाओं को बंद कर सकते हैं।
मुझे संदेह है कि ऐसा नहीं होगा, हालांकि। ;-)

मैं साँप के तेल के बारे में बहुत सी बातें कह सकता था, लेकिन एक प्रदर्शन ठीक वैसे ही काम करेगा:

http://jashkenas.s3.amazonaws.com/misc/snake-oil/labjs.html

http://jashkenas.s3.amazonaws.com/misc/snake-oil/vanilla.html

यह एक पेज है जिसमें 100k टेक्स्ट, 10 इमेज और 171k जावास्क्रिप्ट है। वैनिला संस्करण एक एकल छोटी फ़ाइल का उपयोग करता है जिसमें jQuery, jQuery-UI, अंडरस्कोर और बैकबोन शामिल हैं, साथ ही timer.js फ़ाइल जो लोड समय परिणामों को लिखती है। LABjs संस्करण LABjs का उपयोग करके प्रत्येक 5 (अलग से छोटा) JavaScript फ़ाइलों को लोड करता है।

आप पाएंगे कि न केवल एलएबी संस्करण के लिए कोई लाभ नहीं है, बल्कि अतिरिक्त HTTP अनुरोध केवल लोड प्रदर्शन को नुकसान पहुंचाते हैं, और छवियों जैसे पृष्ठ पर अन्य संपत्तियों के साथ प्रतिस्पर्धा करना पड़ता है। लेकिन यह सब पहले भी कई बार कहा जा चुका है...

मैं आपकी स्क्रिप्ट को बिट्स और टुकड़ों में लोड करने के बारे में एक प्रतिवाद की उम्मीद कर सकता हूं ... लेकिन यह पूरी तरह से स्क्रिप्ट लोडिंग तकनीक के लिए ऑर्थोगोनल है, इसलिए कृपया इसे चर्चा से बाहर कर दें।

हर तरह से, पागलपन बंद करो।

@jashkenas पूर्ण, 100% एके। स्क्रिप्ट लोडर केवल ओवरहेड और जटिलता और विफलता के बिंदु जोड़ते हैं। शुद्ध स्थानांतरण समय और जावास्क्रिप्ट दुभाषियों की दक्षता के संदर्भ में एक एकल, सर्वर से जुड़ी फ़ाइल तेजी से (स्था) लोड होती है, और एक बोनस के रूप में, यदि आपके पास केवल एक फ़ाइल है तो gzipping बेहतर काम करता है।

मुझे कहना है, LABjs संस्करण _कभी-कभी_ मेरे ब्राउज़र में तेजी से लोड होता है (वेनिला पेज की तुलना में), लेकिन लगातार नहीं। इसके अलावा onload हमेशा आग नहीं करता है, जो लगता है ... अजीब।

हां, gzipping आपको कम HTTP अनुरोधों के साथ समग्र जीत का और भी अधिक देता है।

और यह हठधर्मिता के बारे में नहीं है, यह पूरे ऐप के लिए एक _single_ JS फ़ाइल होना आवश्यक नहीं है - defer साथ दो या तीन बारीक-दानेदार कैशिंग के लिए ठीक हैं, जैसा कि बाद में लोड हो रहा है।

Google पेज स्पीड टीम द्वारा कुछ शोध:

http://pagespeed-velocity2011.appspot.com/#8 स्लाइड्स 8-14 देखें, जो चर्चा को और अधिक अनिर्णायकता प्रदान करता है

मैं अभी भी स्क्रिप्ट @defer विशेषता के लिए उत्सुक हूं और सोचता हूं कि यह एक बुद्धिमान बुनियादी डिफ़ॉल्ट है, जब तक कि आप अपनी खुद की विविधताओं के पूर्ण परीक्षण में कई घंटे/दिन डूबने की योजना नहीं बनाते हैं।

@miketaylr : हां, समग्र अनुभव प्राप्त करने के लिए कृपया प्रत्येक पृष्ठ को कई बार शिफ्ट-रीफ्रेश करें। S3 विलंबता और छवि लोड चीजों को थोड़ा अप्रत्याशित बना देगा - एक वास्तविक ऐप की तरह व्यवहार करना।

अच्छी तरह से लैबज _always_ मेरे ब्राउज़र (सफारी 5.1) में सबसे तेजी से लोड होता है, यहां तक ​​​​कि शिफ्ट-रीफ्रेश के साथ या जब तत्वों को कैश किया जाता है।

निश्चित रूप से बिना किसी स्क्रिप्ट लोडर का उपयोग करना एक संयोजित स्क्रिप्ट टैग की तुलना में धीमा होगा। यही कारण है कि लोगों (YUI, requJS) ने स्क्रिप्ट लोडर बनाए हैं जो अनुरोध पर उन्हें संयोजित करने वाली फ़ाइलों और सेवाओं को लोड करते हैं (https://github.com/rgrove/combohandler)।

चलो इस चर्चा का कोई मतलब नहीं है। स्क्रिप्ट लोडर मांग पर स्क्रिप्ट लोड करने के लिए हैं, विशेष रूप से उपयोगकर्ता इंटरैक्शन के बाद, उदाहरण के लिए "लॉग इन" बटन पर क्लिक करते समय संवाद के पीछे तर्क लोड करना और फॉर्म सत्यापन।

मुझे एक डरपोक संदेह है कि @jashkenas और @madrobby चीजों की
स्टीव का सुझाव है कि समानांतर डाउनलोडिंग के कई तरह के अवरोधन मुद्दों और ब्राउज़रों के लिए कई लाभ हैं _(हां इसका मतलब गैर-वेबकिट है)_। उन्होंने डोम-लोड कार्यों के लिए आवश्यक न्यूनतम जेएस लोड करने और बाकी को बाद में आवश्यकतानुसार लोड करने की रणनीति का भी उल्लेख किया। क्योंकि परिस्थितियों और देव की ज़रूरतें अलग-अलग होती हैं, अगर कोई स्क्रिप्ट लोडर बॉयलरप्लेट _ (डिफ़ॉल्ट रूप से सक्षम) _ में है, तो मुझे नहीं पता, लेकिन मैं अभी तक बच्चे को नहाने के पानी से बाहर नहीं निकालूंगा।

अगर यह मेरी मूल पोस्ट में स्पष्ट नहीं था। मैं सहमत हूं (jdalton के साथ) कि अत्यधिक परीक्षण और विशिष्ट वातावरण में स्क्रिप्ट लोडर के कुछ लाभ हैं जिन पर विशेष ध्यान देने की आवश्यकता है। मुझे नहीं लगता कि यह एक उपयुक्त डिफ़ॉल्ट है।

मैं @jdalton से सहमत

इसके अलावा, @getify , सभी स्क्रिप्ट लोडर का दिखावा करना वास्तव में एक ही तकनीक का उपयोग करना एक बहुत ही बेख़बर बयान है।

हांलांकि इसकी कीमत के बारे निश्चित नहीं हूँ...
यह

var script = document.createElement('script')
script.src = 'foo.js'
document.getElementsByTagName('head')[0].appendChild(script)

इससे बेहतर है

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

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

पुन: "सभी स्क्रिप्ट लोडर वास्तव में एक ही तकनीक का उपयोग करने का नाटक करना एक बहुत ही अनौपचारिक कथन है।"

यदि वे इसे उपरोक्त तरीके से नहीं कर रहे हैं, तो वे इसे गलत कर रहे हैं

पूरी तरह से निष्पक्ष होने के लिए, appendChild का उपयोग करना पक्ष से बाहर हो गया है... :D

हालांकि, मैंने उस टेस्ट केस को AssetRace में जोड़ा

https://github.com/SlexAxton/AssetRace/blob/master/asyncconcat.html

यह अधिभार आग को तेज करता है, इसलिए कुछ कथित लाभ हो सकता है। लेकिन खत्म होने का समय लगभग एक ही है...

@ded: हम अक्षम बड़े अवरुद्ध करने के बारे में बात नहीं कर रहे हैं <script> 'में एस <head> यहाँ ... हम साथ स्क्रिप्ट टैग के बारे में बात कर रहे हैं एक defer या async विशेषता, <body> के अंत में लोड की गई, जहां अवरुद्ध करने के लिए कुछ भी नहीं बचा है।

@jaubourg--

इसके अलावा, @getify , सभी स्क्रिप्ट लोडर का दिखावा करना वास्तव में एक ही तकनीक का उपयोग करना एक बहुत ही बेख़बर बयान है।

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

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

ऐसा लगता है कि यह धागा वास्तव में यह निर्धारित करने की कोशिश में सबसे अधिक बिंदु है कि क्या स्क्रिप्ट टैग अपने आप में पर्याप्त हैं (साथ या बिना स्थगित) या यदि स्क्रिप्ट लोडर बेहतर प्रदर्शन प्राप्त करने में सहायता करते हैं। दूसरे, हमें यह पता लगाने की आवश्यकता है कि क्या कॉनकैट वास्तव में स्क्रिप्ट लोडिंग का अंत है।

यह भी एक महत्वपूर्ण मुद्दा है (इस धागे के लिए) कि स्क्रिप्ट लोडर के पास ये सभी अन्य उपयोग-मामले हैं जो वे कर सकते हैं, जो मार्कअप स्क्रिप्ट टैग नहीं कर सकते हैं (जैसे ऑन-डिमांड/आलसी-लोडिंग)। दोबारा, यह मूल रूप से इस बिंदु पर दिया गया है, इसलिए उस तथ्य को फिर से स्थापित करने का प्रयास करना व्यर्थ है।

नहीं यू

लोड क्रोध!

मूल पोस्टिंग यहाँ देखें।

साथ ही, किसी कार्टून लिंग से आहत कोई भी पीपीएल/व्यक्ति: इंटरनेट पर आपका स्वागत है! मैं अत्यधिक अनुशंसा करता हूं कि आप यहां अपनी यात्रा शुरू करें ।

ठीक है, मैंने कुछ बिंदुओं को स्पष्ट करने के लिए 3 परीक्षण बनाए हैं। सबसे पहले, मैन्युअल स्क्रिप्ट टैग (आधार-पंक्ति के रूप में):

http://labjs.com/dev/test_suite/test-script-tags.php

ध्यान दें कि स्क्रिप्ट समाप्त होने के बाद DOMContentLoaded (उर्फ, "DOM-रेडी") बहुत देर से आता है। यह बुरा है। जबकि पृष्ठ का वास्तविक लोड समय बाद के परीक्षणों के समान हो सकता है, पृष्ठ का कथित लोड समय हमेशा बहुत धीमा होगा यदि DOM-रेडी को ब्लॉक किया जा रहा है (कई साइटें क्लिक व्यवहार संलग्न करने के लिए DOM-रेडी होने तक प्रतीक्षा करती हैं, सामग्री, आदि के लिए जेएस-संचालित एन्हांसमेंट लागू करें)।

अब, क्या होता है कि हम अपने स्क्रिप्ट टैग पर defer उपयोग करते हैं:

http://labjs.com/dev/test_suite/test-script-defer-tags.php

ठीक है, यह अच्छा है, हमने DOMContentLoaded विलंब समस्या को ठीक कर दिया है, लेकिन अब हमारे पास एक और समस्या है। इनलाइन स्क्रिप्ट ब्लॉक defer साथ काम नहीं करता है। यह तुरंत निष्पादित होता है। उफ़। BTW, यह एक बग नहीं है, युक्ति विशेष रूप से इसे निर्देशित करती है।

http://labjs.com/dev/test_suite/test-LABjs.php

LABjs परीक्षण मूल रूप से defer परीक्षण की तुलना में समान (या बेहतर) प्रदर्शन संख्या प्राप्त करता है, लेकिन यह स्क्रिप्ट समाप्त होने के बाद इनलाइन कोड को चलाने में विफल नहीं होता है।

आधुनिक ब्राउज़र (Chrome 13, FF5, आदि) में उन परीक्षणों को कई बार आज़माएँ। मेरे लिए, LABjs ने हमेशा defer परीक्षण के समान या बेहतर प्रदर्शन किया। अपने सभी प्रयासों में, मैंने कभी भी एलएबीजे को defer परीक्षण से भी बदतर प्रदर्शन करते नहीं देखा। पुराने ब्राउज़र (जैसे FF3.5 या IE7) में उन परीक्षणों को आज़माएं, और आप देखेंगे कि स्क्रिप्ट लोडर ध्यान देने योग्य मात्रा से अन्य परीक्षणों को आउट-परफॉर्म करना शुरू कर देता है।

भले ही LABjs परीक्षण की संख्या नवीनतम ब्राउज़रों में defer परीक्षण के समान है, यह एक डील ब्रेकर है यदि defer उपयोग defer नहीं किया जा सकता है (केवल काम करता है) कोड के लिए जो बाहरी फ़ाइल के माध्यम से लोड किया गया है)। बहुत सारी साइटें स्क्रिप्ट लोड करती हैं और फिर उनके पास अभी लोड किए गए कोड को सक्रिय/इनिट करने के लिए इनलाइन कोड होता है। defer हमें इसके लिए कोई समाधान नहीं देता है।

इसलिए, defer "सामान्य स्क्रिप्ट लोडिंग" तकनीक के रूप में अनुपयुक्त है। अगला सबसे अच्छा विकल्प एक स्क्रिप्ट लोडर है।

@getify

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

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

वास्तव में क्रुद्ध करने वाली बात यह है कि आप स्क्रिप्ट टैग इंजेक्शन के पक्ष में एक भी तर्क देने से इनकार करते हैं, जो कि स्क्रिप्ट लोडिंग के लिए एक उचित, मूल, जावास्क्रिप्ट एपीआई के विपरीत है। आप बस पूरी बात को नजरअंदाज कर दें। हालांकि मैं आपको परेशानी से बचाऊंगा: वहां कोई तर्क नहीं है। लेकिन, हे, हम सभी defer और async के ins और outs के बारे में कुछ मानसिक हस्तमैथुन कर सकते हैं और महसूस कर सकते हैं कि हम जावास्क्रिप्ट के देवता हैं, है ना? या 50ms अनुकूलन के बारे में बहस करें जैसे कि यह वास्तव में इस उद्योग में किसी की मदद कर रहा था।

यदि आप अंत में निर्णय लेते हैं कि मैं एक बुद्धिमान उत्तर के योग्य हूं (जैसा कि अभी तक एक और लैबजेएस विज्ञापन के विपरीत है), मेरे ब्लॉग पर ऐसा करें और चलो इस धागे को अकेला रखें। धन्यवाद।

@jaubourg -
मैंने पिछली रात आपकी पोस्ट को गहराई से पढ़ा। मैं प्रत्युत्तर में एक ब्लॉग पोस्ट लिखने की योजना बना रहा था, जिसमें आपके द्वारा वहां प्रस्तुत किए गए अच्छे विचारों के लिए बड़े पैमाने पर आपकी प्रशंसा और प्रशंसा की गई थी। दुर्भाग्य से, आप जो सुझाव दे रहे हैं, उसे W3C और WHATWG पर चर्चा सूत्र के सदस्यों द्वारा पहले ही LENGTH पर हैश आउट कर दिया गया है। आप उस पार्टी के लिए बहुत देर हो चुकी हैं।

ऐसे कई लोग थे जिन्होंने पूरी तरह से नए लोडर एपीआई का समर्थन किया था, और कई महत्वपूर्ण काउंटर-तर्क थे कि यह संभवतः जाने का सबसे अच्छा तरीका क्यों नहीं था। फिर से, मैं एक सावधानीपूर्वक और तर्कपूर्ण ब्लॉग पोस्ट में आपको एक प्रतिक्रिया लिखने की योजना बना रहा था, ताकि यह सब समझाने में मदद मिल सके।

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

आपने स्पष्ट रूप से उन 15 बार नहीं सुना जो मैंने कहा है कि _this_ थ्रेड का पॉल आयरिश और एलेक्स सेक्सटन द्वारा लाए गए विशिष्ट प्रश्नों पर ध्यान केंद्रित करने का बेहतर लक्ष्य था: क्या defer काफी अच्छा है? क्या स्क्रिप्ट-कॉनकैट समानांतर लोडिंग से बेहतर है?

वे अधिक महत्वपूर्ण प्रश्न हैं।

अंतर्निहित "लोडर" तकनीक का उपयोग नहीं किया जाता है। अंतर्निहित लोडर तकनीक क्या है, इस पर चर्चा करने के लिए एक अलग और बेहतर मंच है। मैं समझ गया, आपको स्क्रिप्ट टैग पसंद नहीं है। जुर्माना। W3C/WHATWG सूची पर दर्जनों घंटे बिताएं ताकि इयान और अन्य आपकी बात सुन सकें। वे शायद सभी जम्हाई लेंगे और कहेंगे "हमने इसे पहले ही धो दिया है, चले जाओ।"

@getify : हास्यास्पद स्ट्रॉमैन परीक्षण बनाना आपको अंक जीतने वाला नहीं है, दोस्त। हम सभी जानते हैं कि अनुक्रमिक स्क्रिप्ट टैग पेज को ब्लॉक करते हैं। हम यह भी जानते हैं कि "स्थगित" एड स्क्रिप्ट से पहले इनलाइन स्क्रिप्ट ब्लॉक चलाना वास्तविक साइटों के लिए किसी भी तरह से कोई समस्या नहीं है।

यदि आप पूर्व-गलतफहमी की पुष्टि करने के लिए परीक्षण करते हैं ... आपके परीक्षण हमेशा उस गलत धारणा की पुष्टि करने वाले हैं। बहस कभी भी 20 स्क्रिप्ट टैग बनाम 20 LABjs स्क्रिप्ट लोड के बारे में नहीं रही है। यह आपके जावास्क्रिप्ट को यथासंभव कम से कम HTTP अनुरोधों में समझदारी से ट्रिम करने, संयोजित करने, छोटा करने, gzipping और लोड करने और फिर इसे कैशिंग करने के बारे में है।

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

यह बिना सोचे समझे विकल्प है।

@jashkenas--

हम यह भी जानते हैं कि "स्थगित" एड स्क्रिप्ट से पहले इनलाइन स्क्रिप्ट ब्लॉक चलाना वास्तविक साइटों के लिए किसी भी तरह से कोई समस्या नहीं है।

उह ... मुझे लगता है कि आपने इंटरनेट पर सभी साइटों के लगभग 98% पर व्यू-सोर्स नहीं किया है, जो वास्तव में मार्कअप में इनलाइन स्क्रिप्ट ब्लॉक का उपयोग उस कोड को निष्पादित/प्रारंभ करने के लिए करते हैं जो उन्होंने पहले लोड किया था (अवरुद्ध) स्क्रिप्ट टैग कॉल।

यदि @paulirish सुझाव देता है कि defer काफी अच्छा है और स्क्रिप्ट लोडर आवश्यक नहीं हैं, तो मुझे लगता है कि यह इंगित करना महत्वपूर्ण है कि वास्तव में, defer क्यों पर्याप्त नहीं है।

आप केवल उन कुछ विशिष्ट साइटों के बारे में परवाह कर सकते हैं जिन्हें आप नियंत्रित करते हैं, जिनके पास बिल्ड प्रक्रियाओं आदि के बारे में अत्यधिक अनुकूलित होने की पूरी क्षमता है। दूसरी तरफ मैं इंटरनेट की लंबी-पूंछ वाली साइटों पर प्रदर्शन को बेहतर बनाने में मदद करने के बारे में परवाह करता हूं। आधा दर्जन स्क्रिप्ट टैग के साथ (उनमें से कुछ इनलाइन स्क्रिप्ट ब्लॉक!), जहां आधा दर्जन $LAB.script() कॉल का उपयोग करने से वास्तव में प्रदर्शन में सुधार होगा। LABjs हमेशा से यही था। सिर्फ इसलिए कि यह वह नहीं है जिसकी आप परवाह करते हैं इसका मतलब यह नहीं है कि यह प्रासंगिक नहीं है।

बहस कभी भी 20 स्क्रिप्ट टैग बनाम 20 LABjs स्क्रिप्ट लोड के बारे में नहीं रही है।

इस थ्रेड में बहस इस बारे में है कि क्या 3-4 स्क्रिप्ट टैग ( defer साथ या बिना) समानांतर स्क्रिप्ट लोडर का उपयोग करके गतिशील रूप से लोड की गई 3-4 स्क्रिप्ट से बदतर, समान, या बेहतर प्रदर्शन करते हैं। मेरे "हास्यास्पद स्ट्रॉमैन परीक्षण" वास्तव में इसका परीक्षण करने का इरादा रखते हैं।

मेरे अनुभव में स्क्रिप्ट लोडर पेज लोड समय से कई मिलीसेकंड शेव करते हैं। लेकिन मुझे लगता है कि हम सब यहाँ बिंदु चूक गए हैं। जावास्क्रिप्ट में कुछ बड़ी समस्याएं हैं:

• आयात विवरण की कमी से आपके कोड को मॉड्यूलर तरीके से व्यवस्थित करना मुश्किल हो जाता है
• वैश्विक चर टकरा रहे हैं, जब तक कि हर चीज के सावधानीपूर्वक नाम स्थान पर ज्यादा ध्यान न दिया जाए।
• स्क्रिप्ट की निर्भरताएं स्पष्ट रूप से देखने का कोई तरीका नहीं है

मैं RequJS का उपयोग नहीं करता क्योंकि यह तेजी से लोड होता है, हालांकि यह एक अच्छा साइड इफेक्ट है। मैं इसका उपयोग करता हूं ताकि मैं अपने जेएस ऐप को छोटे मॉड्यूल में व्यवस्थित कर सकूं जैसे कि मैं नोडजेएस में करता हूं। प्रत्येक मॉड्यूल अपनी निर्भरता को स्पष्ट रूप से सूचीबद्ध करता है, और वैश्विक नाम स्थान को साफ रखने के लिए सैंडबॉक्स पैटर्न का उपयोग करता है। मॉड्यूल (और उनकी निर्भरता) को आगे लोड किया जा सकता है, या मांग पर लोड किया जा सकता है (उदाहरण के लिए उपयोगकर्ता क्लिक पर), या आलसी लोड। आप वास्तव में इन तकनीकों के साथ अपने प्रदर्शन को बेहतर बना सकते हैं। और RequJS भी एक बिल्ड टूल के साथ आता है जो परिनियोजन के लिए सभी निर्भरताओं को एक (या मुट्ठी भर) gzip- तैयार फ़ाइल में जोड़ता है और छोटा करता है। इन तीन मुद्दों को सुलझाना मेरे लिए बहुत बड़ी जीत है।

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

@getify

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

हो सकता है कि मैं कठोर रूप से आया लेकिन मैं सिर्फ उसी का बचाव करता हूं जिसमें मैं विश्वास करता हूं।

मैं इस धागे से सदस्यता समाप्त कर दूंगा और अब इस पर टिप्पणी करूंगा। @paulirish और @SlexAxton को पटरी से

@getify

आप केवल उन कुछ आला साइटों की परवाह कर सकते हैं जिन्हें आप नियंत्रित करते हैं, जो आपके पास हैं
निर्माण प्रक्रियाओं, आदि के बारे में अत्यधिक अनुकूलित होने की पूर्ण क्षमता। I पर
दूसरी ओर लंबी-पूंछ वाली साइटों पर प्रदर्शन को बेहतर बनाने में मदद करने के बारे में परवाह है
इंटरनेट, जिनके पास आधा दर्जन स्क्रिप्ट टैग हैं (उनमें से कुछ इनलाइन स्क्रिप्ट
ब्लॉक!), जहां आधा दर्जन $LAB.script() कॉल का उपयोग वास्तव में होने की संभावना होगी
प्रदर्शन में सुधार करें। LABjs हमेशा से यही था। सिर्फ इसलिए कि
यह वह नहीं है जिसकी आप परवाह करते हैं इसका मतलब यह नहीं है कि यह प्रासंगिक नहीं है।

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

इस धागे में बहस इस बारे में है कि क्या 3-4 स्क्रिप्ट टैग (आस्थगित के साथ या बिना)
गतिशील रूप से लोड की गई 3-4 लिपियों की तुलना में बदतर, समान, या बेहतर प्रदर्शन करता है
समानांतर स्क्रिप्ट लोडर। मेरे "हास्यास्पद स्ट्रॉमैन परीक्षण" वास्तव में करने का इरादा है
ठीक उसी का परीक्षण करें।

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

इंटरनेट पर विलंबता मौजूद है। अपने JS को संयोजित करें, छोटा करें, और gzip करें, और इसे पृष्ठ के निचले भाग में यथासंभव कुछ HTTP अनुरोधों में लोड करें। निफ ने कहा।

@jashkenas--

यदि LABjs औसत दर्जे की साइटों को थोड़ा कम खराब लोड करने में मदद करने के बारे में है ... यह एक महान लक्ष्य है, मुझे लगता है

ऐसी सैकड़ों साइटें हैं जिनके बारे में मैं पिछले 2 वर्षों से व्यक्तिगत रूप से जानता हूं, जिन्होंने अपने स्क्रिप्ट टैग को $LAB.script() कॉल के साथ बदलने के अलावा कुछ नहीं किया, और बोर्ड भर में उन सभी ने बेहतर प्रदर्शन देखा (कुछ भारी, कुछ केवल मामूली)।

विभिन्न उद्योगों (जैसे ई-कॉमर्स, रियल एस्टेट, आदि) में साइटों की मदद करने पर केंद्रित लेख लिखे गए हैं (पूरी तरह से स्वतंत्र और मुझसे जुड़े नहीं) बेहतर प्रदर्शन प्राप्त करने के लिए (क्योंकि बेहतर प्रदर्शन का मतलब अधिक रूपांतरण है), जहां उन लेखों की सिफारिश उन साइटों के लिए की गई है जो वे स्क्रिप्ट टैग को $LAB कॉल से बदल देते हैं, और उन कमेंट थ्रेड्स में कई लोगों ने सकारात्मक प्रतिक्रिया दी है कि इससे उन्हें मदद मिली है।

अगर उन लेखों में कहा गया है "ठीक है, तो आपको अधिक प्रदर्शन प्राप्त करने के लिए एक सर्वर व्यवस्थापक को किराए पर लेना होगा जो gzip को समझता है और रूबी या नोड.जेएस स्थापित कर सकता है ताकि आप कुछ स्वचालित निर्माण प्रक्रियाएं कर सकें ...." वे लोग उन लेखों को पढ़कर एक और विचार किए बिना चमकता हुआ और चला गया होगा। लेकिन मुझे यह विश्वास करना अच्छा लगता है कि "अरे, स्क्रिप्ट के साथ बदलें ()" उनके लिए समझने और कनेक्ट करने के लिए एक बहुत ही आसान संदेश था।

एलएबीजे के लिए मैं जो चाहता था वह एक आसान समाधान है कि कोई भी बहुत अधिक सोच के बिना अपने स्क्रिप्ट टैग को बदलने के लिए आसानी से छोड़ सकता है। मैं मानता हूं कि यदि आप व्यक्तिगत रूप से किसी साइट से परामर्श कर सकते हैं और सर्वोत्तम अनुकूलन का पता लगा सकते हैं, तो आप बहुत सी साइटों से बहुत अधिक प्रदर्शन प्राप्त कर सकते हैं। लेकिन मैं यह भी मानता हूं कि इंटरनेट की लंबी पूंछ के लिए एक व्यक्ति के रूप में यह मेरी क्षमता से बहुत दूर है, और इसी तरह उन सभी माँ और पॉप साइटों को बता रहा है "अरे, एक स्वचालित निर्माण प्रणाली प्राप्त करें, और सुनिश्चित करें कि यह gzip का उपयोग करता है" जैसा है उनके लिए एक विदेशी भाषा बोलना। ओटीओएच, यह कहना काफी सफल रहा है "अरे, उन 3 स्क्रिप्ट टैग्स को लें, और उन्हें 3 स्क्रिप्ट() कॉल करें। देखें कि यह कितना आसान था?"

निचला रेखा, एलएबीजे के साथ मेरा दृष्टिकोण कम लटकते फल को हिट करना था।

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

@jashkenas--

संभावित रूप से शाब्दिक रूप से LABjs की तुलना में तेजी से सेकंड की अनुमति देता है, तो यह आपके लिए एक खुला दिमाग रखने और यह स्वीकार करने का व्यवहार करता है कि आसान और कम नाजुक तकनीक भी अधिक प्रदर्शनकारी है।

यह सुझाव देने के लिए कभी भी कोई स्थापित प्रमाण नहीं मिला है कि एलएबीजे किसी भी साइट को काफी धीमा कर रहे हैं। इस बात के बहुत से स्थापित प्रमाण हैं कि यह बहुत सी साइटों की मदद कर रहा है। इसलिए मैं इसे नहीं खरीदता - आप जो बात कर रहे हैं वह एक झूठा आधार है, यह मानते हुए कि तथ्य सबूत में नहीं हैं।

@paulirish को एक पोस्ट मिली जो defer विशेषता के साथ समस्याओं की ओर इशारा करती है:
http://hacks.mozilla.org/2009/06/defer/

मोबाइल प्रदर्शन के नजरिए से - जैसे @jashkenas ने कहा, 3 जी नेटवर्क कनेक्शन द्वारा किए गए विलंबता के कारण कई http अनुरोधों की तुलना में इसे एक पैकेज के रूप में

इनलाइनिंग तकनीकों का उपयोग करने में बहुत सारे शोध किए जा रहे हैं जहां आप बेस 64 छवियों को स्ट्रिंग में एन्कोड करते हैं, फिर उन्हें कुंजी के रूप में संग्रहीत करते हैं मूल्य जोड़े केवल http अनुरोधों को कम करने और 'कैशिंग' का लाभ उठाने के लिए: http://channel9.msdn.com/Events /MIX/MIX11/RES04 माइक्रोसॉफ्ट रिसर्च के जेम्स मिकेंस द्वारा एक बेहतरीन प्रस्तुति है।

यहां http अनुरोधों के साथ मोबाइल प्रदर्शन पर एक बहुत अच्छा डेक है और इसका उपयोगकर्ता अनुभव पर प्रभाव पड़ता है: http://davidbcalhoun.com/present/mobile-performance/

मैं RequJS पर काम करता

1) JS में मॉड्यूलर कोड के लिए रास्ता दिखाएं जो JS के चलने पर हर जगह अच्छा काम करता है।
2) स्क्रिप्ट लोड करें।

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

लेकिन requjs का लक्ष्य शिम/पॉलीफिल/जो कुछ भी दिखाना है, मॉड्यूलर कोड इकाइयों को कैसे बनाना और संदर्भित करना है, जिसे दूसरों के साथ इस तरह से साझा किया जा सकता है जो ग्लोबल्स को हतोत्साहित करता है और स्पष्ट निर्भरता को प्रोत्साहित करता है।

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

विशेष रूप से, जेएस की नेटवर्क प्रकृति और वेब डॉक्स/एप्लिकेशन के साथ इसके संबंध को देखते हुए, लोडर प्लगइन एपीआई कुछ ऐसा है जो ईएस हार्मनी मॉड्यूल के साथ कुछ फैशन में सहायक होना चाहिए, और मैं ईएस सद्भाव मॉड्यूल को प्रोटोटाइप करने पर काम कर रहा हूं

प्रदर्शन लोगों के लिए :

• लोडर के लिए कुछ विकल्प हैं जो AMD ( curl , Dojo 1.7 , loadrunner , requjs ) का समर्थन करते हैं, यहां तक ​​कि एक बहुत छोटा भी है जिसका उपयोग "एक JS फ़ाइल में सभी स्क्रिप्ट" को परिनियोजन के लिए किए गए अनुकूलन के लिए किया जा सकता है। इसलिए सर्वोत्तम कोडिंग प्रथाओं को प्रोत्साहित करते हुए शानदार प्रदर्शन प्राप्त करना संभव है - स्पष्ट निर्भरता का उपयोग करके, ग्लोबल्स से बचकर आसान कोड साझा करना।
• रिक्वायरज ऑप्टिमाइज़र नोड में बहुत तेजी से चलता है, और यह राइनो में चल सकता है। यह एक कमांड लाइन उपकरण है, लेकिन नवीनतम मास्टर शाखा कोड इसे नोड में प्रयोग करने योग्य मॉड्यूल के रूप में निर्यात करता है, इसलिए उदाहरण के लिए, इसे नोड-आधारित http सर्वर के माध्यम से चलाया जा सकता है

इस टिकट के संदर्भ में : HTML बॉयलरप्लेट के लक्ष्यों के साथ एक AMD-अनुपालन लोडर (आवश्यकता नहीं होना चाहिए) का चयन करना: कोड और प्रदर्शन दोनों में सर्वोत्तम प्रथाओं का मार्ग इंगित करें। हालांकि, मैं सराहना करता हूं कि एक HTML बॉयलरप्लेट को काम करने की कोशिश करना बहुत मुश्किल काम है, प्रतिस्पर्धी रुचियां हैं, कुछ शैलीगत हैं, इसलिए मैं इस समय इस क्षेत्र में सिफारिश नहीं करना चाहता हूं।

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

पहले से फिर से फ़ोकस करने के लिए... defer परीक्षण की LABjs परीक्षण से तुलना... (और इस तथ्य की अनदेखी करते हुए कि defer इनलाइन स्क्रिप्ट ब्लॉक पर काम नहीं करता), क्या कोई यह देख रहा है कि LABjs परीक्षण defer परीक्षण से भी खराब प्रदर्शन कर रहा है? मैंने इसे ब्राउज़रों के एक समूह पर, और यहां तक ​​कि अपने मोबाइल डिवाइस पर भी आजमाया है, और अभी भी लगभग बराबर संख्याएं देख रहा हूं।

http://labjs.com/dev/test_suite/test-script-defer-tags.php

http://labjs.com/dev/test_suite/test-LABjs.php

@getify

मुझे नहीं पता कि आप इसे क्यों या कैसे अनुकूलित कर सकते हैं, लेकिन मेरे पास मेरी 3+-वर्षीय मैकबुक मशीन पर, दोनों के बीच लगातार 3000 अंतर है, जो @defer पक्ष में है।

हालांकि मैंने केवल फ़ायरफ़ॉक्स के साथ परीक्षण किया है।

@ एस्पाड्रिन-- काफी अजीब। इसकी तह तक जाना पसंद करेंगे। आप Firefox के किस संस्करण के साथ परीक्षण कर रहे हैं? क्या आप मुझे परिणामों का स्क्रीनशॉट भेज सकते हैं?

बस अपने सभी जेएस और सीएसएस को संयोजित और छोटा करें और इसे सीधे अपने एचटीएमएल पेज में इनलाइन करें और इसके साथ किया जाए। एकल HTTP अनुरोध FTW! :पी

गंभीरता से हालांकि, इतनी बड़ी समस्याएं हैं कि हमें इस समुदाय पर ध्यान केंद्रित करना चाहिए कि आपका ऐप कैसे लोड होने वाला है। संभावना है, सबसे सरल विधि (नीचे स्क्रिप्ट टैग) शायद काफी तेज है। बस बढ़िया ऐप्स लिखें और अंत में लोडिंग प्रदर्शन से निपटें। कुछ और करना समय से पहले अनुकूलन करना है।

क्या इस धागे पर लोगों द्वारा आम सहमति है कि एएमडी जेएस कोड संगठन के लिए स्वर्ण मानक होना चाहिए? वास्तव में अन्य विकल्पों को नहीं देखा है, लेकिन मैं मानता हूं कि बॉयलरप्लेट कोड को व्यवस्थित करने में लोगों को सही तरीके से स्थापित करने के लिए एक शानदार शुरुआत होगी।

Firefox UX 8.0a1 (2011-08-07) चैनल अपडेट करें।

दोबारा, पता नहीं क्यों, और यह शायद बहुत विशिष्ट है। LABjs शायद लीगेसी ब्राउज़रों के साथ बहुत अच्छे हैं।

कृपया हंसी के अलावा और कुछ के लिए @getify के परीक्षण पृष्ठ का उपयोग न करें। उद्धरण के लिए:

<script defer src="http://labjs.xhr.me/dev/test_suite/testscript1.php?_=4911710&delay=5"> <script defer src="http://labjs.xhr.me/dev/test_suite /testscript2.php?_=6146431&delay=3"> <script defer src="http://labjs.xhr.me/dev/test_suite/testscript3.php?_=9499116&delay=1">

@getify , यदि आप एक वास्तविक परीक्षण करना चाहते हैं, तो बेझिझक @SlexAxton के AssetRace रेपो को फोर्क करें और LABjs संस्करण जोड़ें ... या एक परीक्षण पृष्ठ बनाएं जो वास्तविक विलंबता के साथ जावास्क्रिप्ट फ़ाइलों के _real_ का उपयोग करता है।

साथ ही, सुनिश्चित करें कि आप वास्तव में एक स्क्रिप्ट टैग के लिए जेएस को जोड़ते हैं - defer या नहीं। मुद्दा यह है कि 1 HTTP अनुरोध पर दी गई समान सामग्री 10 HTTP अनुरोधों में दी गई समान सामग्री को पीछे छोड़ देती है।

यह सुझाव देने के लिए कभी भी कोई स्थापित प्रमाण नहीं है कि LABjs महत्वपूर्ण रूप से है
किसी भी साइट को धीमा करना। बहुत सारे स्थापित प्रमाण हैं कि यह बहुत मदद कर रहा है
साइटों की। इसलिए मैं इसे नहीं खरीदता - आप जिस बारे में बात कर रहे हैं वह एक गलत धारणा है
तथ्य साक्ष्य में नहीं।

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

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

@artzstudio आपके जेएस को एएमडी लोडर के साथ व्यवस्थित करना वास्तव में सोने का मानक है, कम से कम जब तक हार्मनी के मॉड्यूल समाप्त नहीं हो जाते हैं और व्यापक रूप से समर्थित होते हैं। फिर एएमडी मॉड्यूल से मूल मॉड्यूल में एक स्पष्ट माइग्रेशन पथ होगा।

एएमडी मॉड्यूल स्वर्ण-मानक होने के नाते निश्चित रूप से एक राय है (जिसे मैं साझा कर सकता हूं)। हालांकि, बहुत सारे स्मार्ट लोग (येहुदा काट्ज़ और डैन वेब के दिमाग में आते हैं) जो इसे पसंद नहीं करते हैं और अन्य समाधान पेश करते हैं।

@danwrong का https://github.com/danwrong/loadrunner

वहाँ कुछ बहुत अच्छी चीजें। गैर-जेएस लोगों के लिए भी संभावित रूप से थोड़ा अधिक व्यावहारिक। मुझे अपने सामान के लिए एएमडी मॉड्यूल पसंद हैं, लेकिन हर कोई उन पुस्तकालयों के प्रत्येक संस्करण को परिवर्तित करने में समय नहीं बिताना चाहता जो वे मॉड्यूल के रूप में उपयोग करते हैं।

मुझे पता है कि @strobecorp अपने स्वयं के समाधान पर काम कर रहा है

जबकि मैं एएमडी को डिफ़ॉल्ट होना पसंद करूंगा, यह बहु-लाइब्रेरी/न्यूबी दृष्टिकोण से शायद बुद्धिमान नहीं है, जितना मैं चाहता हूं।

@jashkenas--

कृपया हंसी के अलावा और कुछ के लिए @getify के परीक्षण पृष्ठ का उपयोग न करें।

यदि आप दीवानी नहीं हो सकते हैं, तो मुझे आपके साथ और कुछ भी चर्चा करने की कोई इच्छा नहीं है। मैं नेक नीयत से काम कर रहा हूं। मैं थोड़ी सामान्य शालीनता की सराहना करूंगा।

@getify , अगर आप असली परीक्षा देना चाहते हैं

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

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

बेझिझक @SlexAxton के AssetRace रेपो को फोर्क करें और LABjs संस्करण जोड़ें

मैं खुशी-खुशी ऐसा करूंगा। लेकिन इसलिए नहीं कि मैं सहमत हूं कि मेरे अन्य परीक्षण अमान्य हैं। यदि आपके पास कुछ तर्कपूर्ण, स्तर-प्रधान तर्क हैं कि मेरा परीक्षण सेटअप मान्य क्यों नहीं है, तो कृपया साझा करें। लेकिन इसके बारे में इस तरह के गधे बनना छोड़ दो।

@jashkenas--

मुद्दा यह है कि 1 HTTP अनुरोध पर दी गई समान सामग्री 10 HTTP अनुरोधों में दी गई समान सामग्री को पीछे छोड़ देती है।

मैं जानता हूं कि आप (और अन्य) यहां इस बारे में शेखी बघारते रहते हैं कि यह चर्चा कॉनकैट बनाम नॉट-कॉनकैट के बारे में कैसे होनी चाहिए। यदि आप सूत्र में बहुत पहले पढ़ते हैं, तो मैंने माना है कि दो प्रश्न थे जिन्हें संबोधित करने की आवश्यकता थी। जहां तक ​​मेरा संबंध है, दो मुद्दे ओर्थगोनल हैं। पहला यह है कि यदि मार्कअप में स्क्रिप्ट टैग समानांतर स्क्रिप्ट लोडर में उपयोग किए जाने वाले डायनामिक स्क्रिप्ट तत्वों की तुलना में अच्छे (या बेहतर) हो सकते हैं। वह प्रश्न है जिसे मैं अभी भी अपने परीक्षणों के साथ संबोधित करने का प्रयास कर रहा हूं।

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

इस बात पर जोर देते हुए कि आपका रास्ता ही बेहतर तरीका है, आप पूरी बहस को हिस्सा बनने के लिए कम सुखद बना देते हैं। मैं बस इतना करने की कोशिश कर रहा हूं कि उन दो मुख्य प्रश्नों में से प्रत्येक के लिए कुछ सबूत स्थापित करें, ताकि हम अनुमान लगाना बंद कर सकें और अधिक जानकारी प्राप्त कर सकें। मेरे लिए एक झटका बनने की कोशिश करने के बजाय ऐसा कुछ क्यों नहीं है जिससे आप मदद कर सकते हैं क्योंकि आप मुझसे असहमत हैं?

defer परीक्षण बनाम LABjs परीक्षण के संबंध में, मैंने IE9, FF8 (रात में), और Chrome15 (कैनरी) में दो आमने-सामने परीक्षण का एक त्वरित स्क्रीनकास्ट कैप्चर किया।

http://www.screenr.com/icxs

@paulirish के पहले के प्रश्न का उत्तर देने के लिए (https://github.com/paulirish/html5-boilerplate/issues/28#issuecomment-1765361) लगभग defer क्विर्क, देखें कि "DOMContentLoaded" IE में कैसे व्यवहार करता है, defer परीक्षण में क्रोम और फ़ायरफ़ॉक्स।

IE9 और Chrome15 में, DOMContentLoaded ईवेंट को रोक दिया जाता है (अवरुद्ध) और स्क्रिप्ट चलने के बाद तक सक्रिय नहीं किया जाता है। एफएफ में, हालांकि, DOMContentLoaded ईवेंट आयोजित नहीं किया जाता है, यह तुरंत सक्रिय हो जाता है, और इसके बाद स्क्रिप्ट निष्पादित होने लगती है। यह आधुनिक ब्राउज़रों में एक विशाल असंगति है, और एक कारण है कि मुझे नहीं लगता कि defer पर्याप्त है।

जहां तक ​​​​मैं कल्पना पढ़ने से बता सकता हूं, मुझे यकीन नहीं है कि कौन सा व्यवहार सही है। लेकिन मुझे पता है कि यह ब्राउज़रों के बीच स्पष्ट रूप से विचित्र और असंगत है।

@getify मैं एक झटका बनने की कोशिश नहीं कर रहा हूँ। मैं तहे दिल से माफी मांगता हूं कि मैंने आपकी भावनाओं को ठेस पहुंचाई है।

स्वाभाविक रूप से, जिसे आप शेख़ी के रूप में देखते हैं, मैं चर्चा के बिंदु के रूप में देखता हूं ... और जिसे मैं सांप के तेल के रूप में देखता हूं, आप एक सहायक कदम के रूप में देखते हैं।

दो मुद्दे वास्तव में ऑर्थोगोनल हैं (भाषा जिसे मैंने अपनी मूल पोस्ट में इस्तेमाल किया था)।

पहला यह है कि यदि मार्कअप में स्क्रिप्ट टैग्स की तुलना में अच्छे (या बेहतर) हो सकते हैं
समानांतर स्क्रिप्ट लोडर में उपयोग किए जाने वाले गतिशील स्क्रिप्ट तत्व।

हम इस मुद्दे पर पूरी तरह सहमत हैं -- इससे कोई फर्क नहीं पड़ता। बेशक समानांतर लोडिंग एक से अधिक स्क्रिप्ट के लिए अनुक्रमिक लोडिंग से तेज होगी। और निश्चित रूप से, इसे गैर-अवरुद्ध फैशन में करना, या तो <body> टैग के अंत में, या defer साथ, या स्क्रिप्ट लोडर के साथ, <head> में अवरुद्ध करने से बेहतर होगा

लेकिन यह बात याद आती है। अनुक्रमिक स्क्रिप्ट टैग लगाना तुलना करने के लिए एक स्ट्रॉमैन है, क्योंकि कोई भी जो अपने जावास्क्रिप्ट के प्रदर्शन की परवाह नहीं करता है, उस दृष्टिकोण का उपयोग नहीं करेगा। अनुमान लगाएं कि अनुक्रमिक स्क्रिप्ट टैग से भी तेज़ क्या है? _कुछ भी_।

दूसरा प्रश्न, जो हमें अभी तक नहीं मिला है, वह है कि क्या
script-concat हमेशा बेहतर होता है।

हमें यह प्रश्न "मिल गया"। वास्तव में, यह इस पृष्ठ के शीर्ष पर @paulirish का प्रश्न है। यदि आप इसे इस सूत्र में हल करने की कोशिश नहीं कर रहे हैं, तो आपको होना चाहिए। न केवल इस सूत्र में, बल्कि वर्षों से LABjs क्या करता है, इसके बारे में आपके सभी दावों पर यह प्रहार करता है।

उस प्रश्न का भी गहन परीक्षण करने की आवश्यकता है।

अपने आप को दोहराने के लिए, यहाँ एक (निष्पक्ष) परीक्षण मामला है। वही 5 वास्तविक दुनिया की स्क्रिप्ट, अन्य संपत्तियों के साथ एक मध्यम आकार के पृष्ठ पर लोड हो रही है, एक लोड ऑर्डर सुनिश्चित करने के लिए एलएबीजे सर्वोत्तम प्रथाओं का उपयोग कर रही है, और दूसरी एक समेकित स्क्रिप्ट का उपयोग कर रही है:

http://jashkenas.s3.amazonaws.com/misc/snake-oil/labjs.html

http://jashkenas.s3.amazonaws.com/misc/snake-oil/vanilla.html

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

@SlexAxton धन्यवाद। मैं यहुदा के इस पर और अन्य मजबूत विचारों को सुनने के लिए उत्सुक हूं (इसके अलावा इसे रिफैक्टर करना बहुत कठिन है)। मुझे यह मिला लेकिन बात नहीं।

@Geddesign की टिप्पणी को स्पष्ट करने के लिए: आज की तरह ऐसा लगता है कि AMD मॉड्यूल को काफी आसानी से सद्भाव मॉड्यूल में परिवर्तित किया जा सकता है, लेकिन उस सद्भाव मॉड्यूल प्रस्ताव को मैं अभी भी प्रवाह में मानता हूं, यह बाद में बदल सकता है। यह अभी तक एक कठोर कार्यान्वयन परीक्षण के माध्यम से नहीं हुआ है, लेकिन इस पर कुछ पैर मिलना शुरू हो गया है। प्लस साइड पर, एएमडी लोडर + लोडर प्लगइन्स कुछ सद्भाव विचारों को आज़माने में ठोस प्रतिक्रिया दे सकते हैं।

@SlexAxton की टिप्पणी के लिए:

लोडरनर के लिए: यह मेरे लिए स्पष्ट नहीं है कि सिंटैक्स कोई बेहतर है, बस अलग है। यह एएमडी का समर्थन करता है, इसलिए यह अभी भी काम करता है।

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

यदि दृष्टिकोण नेस्टेड निर्भरता (जो व्यापक कोड साझाकरण के लिए आवश्यक है) की अनुमति देने जा रहा है, तो आपको एक सिंटैक्स की आवश्यकता है:

• कोड की एक इकाई को एक नाम देता है
• निर्भरता निर्दिष्ट करने का एक तरीका
• उस कोड के चारों ओर एक फ़ंक्शन रैपर यह सुनिश्चित करने के लिए कि निर्भरता तैयार होने तक यह निष्पादित नहीं होता है। या हमेशा एक बिल्ड या एक्सएचआर एक्सेस को अनिवार्य करें, जो जेएस विकास के स्पेक्ट्रम में स्केलेबल नहीं है।

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

विशेष रूप से मॉड्यूल के लिए कोड सिंटैक्स को सोचना बहुत आसान है, और मैं सराहना कर सकता हूं कि हर किसी की अपनी व्यक्तिगत प्राथमिकताएं होती हैं। हालांकि, एएमडी के पास किसी तरह का समझौता करने की कड़ी मेहनत करने का काफी गहरा इतिहास है, और इससे भी महत्वपूर्ण बात यह है कि वास्तविक कोड और इसे वापस करने के लिए तैनाती। मुझे लगता है कि अब दूसरों पर वास्तव में बहुत कुरकुरा और स्पष्ट होना है कि एएमडी एक अच्छा फिट क्यों नहीं है (यह टिकट इसके लिए जगह नहीं है, बेझिझक मुझसे ऑफ-लिस्ट संपर्क करें, या एएमडी-कार्यान्वयन सूची का उपयोग करें) .

लेकिन मैं @SlexAxton के विचार की सराहना करता

@SlexAxton मैं तुम्हारे साथ हूँ। मेरा अपना कोड एएमडी है। जबकि मेरी इच्छा है कि सभी ने स्क्रिप्ट के बजाय मॉड्यूल लिखे, सौभाग्य से RequJS सादे स्क्रिप्ट के साथ-साथ मॉड्यूल भी लोड कर सकता है।

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

define(['tmpl!navigation.html'], function(nav){
   $('body').append(nav(data));
});

हालांकि मैं इस कथन से असहमत हूं:

जबकि मैं एएमडी को डिफ़ॉल्ट होना पसंद करूंगा, यह बहु-लाइब्रेरी/न्यूबी दृष्टिकोण से शायद बुद्धिमान नहीं है, जितना मैं चाहता हूं।

Newbs को स्वच्छ संरचना की आवश्यकता होती है जो AMD एक अनुभवी डेवलपर से भी अधिक प्रदान करता है, क्योंकि वे वैश्विक परिवर्तनशील टकरावों के लिए अधिक प्रवण होते हैं, भयानक कोड संगठन जो बड़ी गन्दा JS फ़ाइलों की ओर जाता है जिसे कोई भी मर्ज संघर्षों से निपटने के डर से छूना नहीं चाहता है, आदि। पुस्तकालयों को मॉड्यूल से अत्यधिक लाभ होता है, यही वजह है कि आगामी Dojo 1.7 और Mootools 2.0 AMD की ओर बढ़ रहे हैं। मुझे आशा है कि jQuery बोर्ड पर आ जाएगा - इसकी सबसे बड़ी शिकायतों में से एक यह है कि यह "सभी या कुछ भी नहीं" है। आप इसके उत्कृष्ट DOM मैनिपुलेशन का उपयोग इसके एनीमेशन, अजाक्स, ईवेंट्स आदि को पेज पर भी लोड किए बिना नहीं कर सकते। तो हाँ, एएमडी एक जीत है। यदि HTML5 बॉयलरप्लेट लोगों को सर्वोत्तम प्रथाओं के बारे में बताना चाहता है, तो AMD को छोड़ना शर्म की बात होगी। यह जावास्क्रिप्ट की बहुत सी समस्याओं को सुरुचिपूर्ण ढंग से हल करता है।

स्पष्ट होना। मैं सहमत हूं। काश वे सभी तरह की आवश्यकता का उपयोग करते।

मुझे नहीं लगता कि वे करेंगे।

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

यदि हम सब अपनी भूमिका निभाते हैं और कहते हैं, "देखो, यह आसान है, और बेहतर है, और महत्वपूर्ण है" और इसे एक चर्चा का विषय बना दें, तो झुंड अपने करियर की खातिर पीछा करेंगे।

@jashkenas--

पहला यह है कि यदि मार्कअप में स्क्रिप्ट टैग समानांतर स्क्रिप्ट लोडर में उपयोग किए जाने वाले डायनामिक स्क्रिप्ट तत्वों की तुलना में अच्छे (या बेहतर) हो सकते हैं।

हम इस मुद्दे पर पूरी तरह सहमत हैं -- इससे कोई फर्क नहीं पड़ता।

दरअसल, मैंने इस थ्रेड में अपनी भागीदारी यह मानकर शुरू की थी कि हर कोई इस बात से सहमत है कि डायनामिक स्क्रिप्ट एलिमेंट लोडिंग से स्क्रिप्ट टैग की तुलना में बेहतर प्रदर्शन होगा। लेकिन @paulirish और @slexaxton दोनों ने उस धारणा को _this_ सूत्र में प्रश्न के रूप में कहा है।

@paulirish ने सुझाव दिया है कि defer डायनामिक स्क्रिप्ट एलिमेंट लोडिंग विकल्प की तुलना में सादे ol 'स्क्रिप्ट टैग को अच्छा (या बेहतर) बनाने का एक पर्याप्त तरीका है। मैं असहमत हूं कि defer पर्याप्त है, और मैंने अब इसके कई कारण स्थापित किए हैं।

इसलिए, मुझे लगता है कि यह हमारे लिए पहले प्रश्न की जांच करने के लिए मान्य है, और यह पता लगाया गया है कि defer स्क्रिप्ट लोडर से बेहतर था या नहीं। कुछ सीमित मामले हो सकते हैं जहां आप defer दूर हो सकते हैं, लेकिन जहां तक ​​​​सामान्यीकृत मामला है, स्क्रिप्ट लोडर सभी विचित्रताओं को संभालते/सामान्य करते हैं, जबकि defer आपको उन समस्याओं के बारे में बताता है।

मुझे अब भी यकीन नहीं है कि हर कोई देखता है या इससे सहमत है कि defer पर्याप्त क्यों नहीं है।

अपने आप को दोहराने के लिए, यहाँ एक (निष्पक्ष) परीक्षण मामला है। वही 5 वास्तविक दुनिया की स्क्रिप्ट, अन्य संपत्तियों के साथ एक मध्यम आकार के पृष्ठ पर लोड हो रही है, एक लोड ऑर्डर सुनिश्चित करने के लिए एलएबीजे सर्वोत्तम प्रथाओं का उपयोग कर रही है, और दूसरी एक समेकित स्क्रिप्ट का उपयोग कर रही है:

यह आपका (और अन्य का) झूठा परीक्षण आधार है। मैंने कभी कभी यह दावा नहीं किया कि 1 के बजाय 5 स्क्रिप्ट लोड करना तेज़ होने वाला था। कभी नहीँ। कभी। क्या मैं और स्पष्ट हो सकता हूं? आधार कभी भी 5 बनाम 1 नहीं रहा है।

पहला परीक्षण 3 स्क्रिप्ट टैग बनाम 3 script() कॉल का परीक्षण करना था, क्योंकि यह एक निष्पक्ष परीक्षा है। और मुझे लगता है कि वीडियो और परीक्षण बताते हैं कि स्क्रिप्ट लोड करना, उस परिदृश्य में, फायदेमंद है।

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

नोट: इस प्रश्न के ऑर्थोगोनल होने का कारण यह है कि आप इस सिंगल कॉन्सैट फ़ाइल को या तो स्क्रिप्ट टैग के साथ लोड कर सकते हैं, या document.createElement("script") टाइप डायनेमिक लोडिंग का उपयोग कर सकते हैं। किसी भी तरह से, एकल कॉन्सैट फ़ाइल का प्रश्न एक वैध प्रश्न है, लेकिन अगर स्क्रिप्ट टैग या डायनेमिक स्क्रिप्ट लोडिंग बेहतर है, तो इससे अलग।

आपने मुझे इस सूत्र में कई बार कहते सुना है, और कई अन्य संदर्भों में भी (इस विषय पर बोलने वाले मेरे सभी सम्मेलन, ब्लॉग पोस्ट आदि सहित), यह है कि मुझे लगता है कि यह संभव है कि आप एकल जेएस फ़ाइल कॉनकैट पर सुधार कर सकें "चंकिंग" (जो कि बड़ी कॉन्सैट फ़ाइल को विभाजित कर रहा है) द्वारा 2 या 3 विखंडू (अधिकतम) में दृष्टिकोण। यदि टुकड़े ~ समान आकार के हैं, और समानांतर में लोड किए गए हैं, तो यह संभव है कि "कीप-अलाइव", समानांतर लोडिंग प्रभाव, आदि के कारण, अतिरिक्त HTTP ओवरहेड के साथ भी पेज तेजी से लोड होगा।

वास्तव में मैं इस विषय के बारे में बहुत समय पहले, नवंबर 2009 में, LABjs की पहली रिलीज़ के तुरंत बाद लिख रहा था: http://blog.getify.com/2009/11/labjs-why-not-just-concat/

उस ब्लॉग पोस्ट में, और तब से, मैंने कहा है कि यदि आप एक स्थिति में हैं (हर कोई नहीं है ... इसलिए। अवधि। हमेशा। फ़ाइलों को हमेशा 10-20 स्थानीय फ़ाइलों से बहुत कम तक संक्षिप्त करें।

लेकिन, मैं यह भी कहता हूं कि एक बार आपके पास वह एकल कॉनकैट फ़ाइल हो जाने के बाद, समानांतर में लोड (स्क्रिप्ट लोडर का उपयोग करके) अपनी एकल फ़ाइल को 2-3 हिस्सों में लोड करने और लोड करने के लिए भी फायदेमंद हो सकता है।

यह बेहतर क्यों हो सकता है? मैंने इसे उस ब्लॉग पोस्ट में रेखांकित किया था, लेकिन संक्षेप में:

1. समानांतर लोडिंग प्रभाव वास्तविक है। इसके बारे में बिट-टोरेंट उपयोगकर्ताओं से पूछें। HTTP ओवरहेड भी वास्तविक है, और काउंटर-एक्ट करने के लिए कार्य करता है, और उस लाभ को समाप्त करता है। लेकिन इसका मतलब यह नहीं है कि इससे लाभ होना असंभव है। कनेक्शन कीप-अलाइव का उपयोग करके, यह संभव है कि आप 2 या 3 एक साथ कनेक्शन (2-3 पूर्ण कनेक्शन ओवरहेड पेनल्टी के बिना) प्राप्त कर सकते हैं, और अपना कोड कम समय में लोड कर सकते हैं। यदि आप इसे 3 भागों में लोड करते हैं तो क्या यह समय का 1/3 गुना (60-70% तेज) होगा? नहीं, बिल्कुल नहीं। लेकिन यह 20-30% तेज हो सकता है।
2. अपने सभी कोड को एक ही फ़ाइल में प्रस्तुत करना आपको अलग-अलग लाइफ-टाइम कोड के लिए अलग-अलग कैश हेडर करने से रोकता है। उदाहरण के लिए, jQuery बहुत स्थिर है और इसे फिर से डाउनलोड करने की आवश्यकता नहीं है। लेकिन आपकी साइट पर आपका यूएक्स केंद्रित कोड बहुत अस्थिर हो सकता है (आप इसे प्रति सप्ताह या उससे अधिक बार एक बार बदल सकते हैं)। सिंगल कॉन्सैट फ़ाइल पर शॉर्ट कैशिंग हेडर करना बेवकूफी है, क्योंकि यह अनावश्यक रूप से स्थिर कोड के अधिक बार-बार डाउनलोड करने के लिए मजबूर करता है। सिंगल कॉन्सैट फाइल पर लॉन्ग कैशिंग हेडर्स करना भी बेवकूफी है, क्योंकि यह आपको कैश्ड फाइल (कैश बस्ट परम, आदि) को अमान्य करने के लिए मजबूर करता है और पूरी फाइल को पूरी तरह से फिर से डाउनलोड करने के लिए मजबूर करता है, जब आप सिर्फ अपने एक बाइट को ट्वीक करते हैं अधिक अस्थिर कोड। तो, अपनी बड़ी कॉनकैट फ़ाइल को 2 भागों में विभाजित करना, एक स्थिर कोड के लिए, एक अस्थिर कोड के लिए, आपको प्रत्येक खंड के लिए अलग-अलग कैशिंग हेडर रखने की अनुमति देता है। यह कैश का अधिक प्रभावी उपयोग करता है, और समय के साथ संभावित रूप से बेहतर प्रदर्शन की ओर जाता है, क्योंकि उपयोगकर्ता आपकी साइट पर बार-बार आते हैं।
3. अध्ययनों से पता चला है कि औसतन, एक पेज-व्यू पेज पर लोड होने वाले जेएस के 100% से भी कम का उपयोग करता है (कुछ अनुमान इसे कोड का लगभग 20-30% डालते हैं)। अपने सभी कोड को एक ही बार में लोड करना, पेज लोड की शुरुआत में, लाइन को अनावश्यक रूप से 70-80% फ़ाइल को पुश करने के लिए भीड़भाड़ कर रहा है जिसकी तब आवश्यकता नहीं है (और "कभी नहीं" की आवश्यकता हो सकती है)। यदि आपके पास 2 भागों में आपका कोड है (एक जो अधिक महत्वपूर्ण कोड है और दूसरा कम महत्वपूर्ण कोड है), और आप पहले खंड को तुरंत लोड करते हैं, और पृष्ठ लोड होने के कुछ सेकंड बाद दूसरा खंड लोड करते हैं, तो आप मुक्त कर सकते हैं अधिक महत्वपूर्ण छवियों/सीएसएस और सामग्री के लिए पाइप। संक्षेप में, चंकिंग आपको अपने कोड को प्राथमिकता देने की अनुमति देता है।

निचला रेखा... समवर्ती बनाम समानांतर के विषय पर... मैं _हमेशा_ लोगों को बताता हूं: दोनों।

@getify अच्छी तरह से कहा।

काइल के LABjs को मेरा समर्थन है।
एक सलाहकार के रूप में साइटों को प्रदर्शन में सुधार करने में मदद करने के लिए, मैंने कई बार एलएबीजे को अच्छी तरह से काम करते देखा है।
इसने न केवल प्रदर्शन में उल्लेखनीय सुधार किया (न केवल 100 एमएस, बल्कि 1+ सेकंड), बल्कि डेवलपर्स को भी यह पसंद आया।
समझने में आसान, लागू करने में आसान।

और मैं इस अवसर पर सार्वजनिक रूप से कहूँगा "धन्यवाद काइल, LABjs पर महान समर्थन के लिए। आपने कई बार मेरी अपेक्षाओं को पार किया है।"

कनेक्शन कीप-अलाइव का उपयोग करके, यह संभव है कि आप एक साथ 2 या 3 कनेक्शन प्राप्त कर सकते हैं (2-3 पूर्ण कनेक्शन ओवरहेड दंड के बिना)

HTTP प्रतिक्रियाओं को मक्स/इंटरलीव नहीं करता है, इसलिए आप पहले एकाधिक कनेक्शन खोले बिना समानांतर डाउनलोड नहीं कर सकते हैं। लगातार और पाइपलाइन कनेक्शन का आदर्श मामला एक फ़ाइल (+ कुछ शीर्षलेख) के निरंतर डाउनलोड के बराबर है।

@pornel--

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

@getify फैंटास्टिक, मुझे लगता है कि हम किसी तरह की आम सहमति पर पहुंच गए हैं। अपनी याददाश्त ताज़ा करने के लिए:

मैं आपकी स्क्रिप्ट को बिट्स और टुकड़ों में लोड करने के बारे में एक प्रतिवाद की उम्मीद कर सकता हूं ...
लेकिन यह पूरी तरह से स्क्रिप्ट लोडिंग तकनीक के लिए ऑर्थोगोनल है, इसलिए कृपया इसे छोड़ दें
चर्चा का।

हां, मैं मानता हूं कि आपकी स्थायी स्क्रिप्ट की तुलना में आपकी अस्थिर स्क्रिप्ट को किसी भिन्न JS फ़ाइल में लोड करना बहुत अच्छा है। उस स्क्रिप्ट को लोड करना जो केवल एक विशिष्ट पृष्ठ के लिए आवश्यक है, केवल उस विशिष्ट पृष्ठ पर, समान रूप से बढ़िया है।

तो अगर मैं एक वेब डेवलपर हूं और मेरे पास जावास्क्रिप्ट के समूह के साथ एक पेज है, तो मुझे क्या करना चाहिए? LABjs का उपयोग करें, या मेरी स्थायी स्क्रिप्ट को एक फ़ाइल में, और मेरी अस्थिर स्क्रिप्ट को दूसरी फ़ाइल में संयोजित करें, और बॉडी टैग के नीचे दोनों को <script defer="true"> साथ लोड करें?

मुझे अपने ऐप को कैशिंग सिरदर्द, ब्राउज़र असंगति, रेस-अगेंस्ट-द-इमेज-ऑन-द-पेज, और बाकी की परेशानी के अधीन क्यों करना चाहिए जो एक स्क्रिप्ट लोडर साथ लाता है?

यदि प्रदर्शन के लिए स्क्रिप्ट लोडर का उपयोग करने का संपूर्ण आधार यह है कि यह दो स्क्रिप्ट टैग का उपयोग करने से आसान और सरल है ... मेरे पास आपको बेचने के लिए ब्रुकलिन में एक पुल है।

@getify एक से अधिक बार वेब सर्वर को लागू करना: @jashkenas ने एक से अधिक बार बताया है, एक समस्या है यदि आपके पास अन्य संपत्तियां हैं, जैसे छवियां या सीएसएस फाइलें।

@jashkenas-

तो अगर मैं एक वेब डेवलपर हूं और मेरे पास जावास्क्रिप्ट के समूह के साथ एक पेज है, तो मुझे क्या करना चाहिए? LABjs का उपयोग करें, या मेरी स्थायी स्क्रिप्ट को एक फ़ाइल में, और मेरी अस्थिर स्क्रिप्ट को दूसरी फ़ाइल में संयोजित करें, और <script defer="true"> के साथ बॉडी टैग के निचले भाग में दोनों को लोड करें?

टीएल; डीआर: दोनों

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

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

तीसरा, मैं साइटों की एक बहुत कुछ के लिए लगता है, उनके मार्कअप का उपयोग करने को बदलने $LAB.script() के बजाय <script> उन्हें समझा की तुलना में आसान एक बहुत है पर कुछ स्वचालित (या मैन्युअल) bulid प्रक्रिया स्थापित करने के लिए कैसे अपने सर्वर। विशेष रूप से यदि वह साइट साझा-होस्टिंग (अधिकांश वेब है) पर है, और वे वास्तव में अपने अधिकांश सर्वर को नियंत्रित नहीं करते हैं, तो उन्हें बिल्ड प्रक्रियाओं को समझने के लिए कहते हैं ताकि उनकी कोड रखरखाव खो न जाए ... ठीक है। .. गैर तुच्छ।

क्या इन चीजों पर काबू पाया जा सकता है? हां। बेशक वे कर सकते हैं। लेकिन वे बहुत काम लेते हैं। कुछ मामलों में (जैसे डोम-तैयार चीज़) वे वास्तव में आपके कोड को समायोजित करने में श्रमसाध्य हो सकते हैं। इस क्षेत्र में इसे सुलझाने के लिए समर्पित प्रयासों और बहुत सारी विशेषज्ञता और जुनून वाले व्यक्ति की आवश्यकता होती है।

इसके विपरीत, वे <script> टैग के बजाय LABjs में "त्वरित जीत" ड्रॉप प्राप्त कर सकते हैं। उनके बारे में सोचने के लिए बहुत कम है ( document.write() को छोड़कर)। ज्यादातर समय, "यह सिर्फ काम करता है"। और अधिकांश समय, वे पृष्ठ लोड में तत्काल गति में वृद्धि देखते हैं। अधिकांश साइटों के लिए, यह एक बड़ी जीत है।

तो, आपके प्रश्न का उत्तर देने के लिए, मैं कहूंगा, जैसा कि मैंने पहले कहा, दोनों करें ... एलएबीजे में पहली गिरावट, कुछ तत्काल गति वृद्धि देखें। अब, आपको 15 फ़ाइलों से 2 फ़ाइलों (आधे में खंडित 1 फ़ाइल) तक ले जाने के लिए बिल्ड प्रक्रिया का उपयोग करने के लाभों पर दृढ़ता से विचार करें। जब आप ऐसा करते हैं (यदि आप ऐसा करते हैं, जैसा कि मैंने कहा, अधिकांश नहीं करेंगे), यदि आप वास्तव में चाहते हैं तो आप LABjs को छोड़ सकते हैं। लेकिन कोई वास्तविक नुकसान नहीं है (यह छोटा है और मोबाइल पर भी अच्छी तरह से कैश होता है)। यह आपके दो फ़ाइल खंडों को अच्छी तरह से लोड करना जारी रखेगा, और यह बिना उन विचित्रताओं के ऐसा करेगा जो defer कारण हो सकते हैं।

साथ ही, LABjs पहले से मौजूद होने से आपके लिए चरण 3 करना मूर्खतापूर्ण सरल हो जाता है, जो यह पता लगाना है कि आप बाद में कौन सा कोड "आलसी/ऑन-डिमांड लोड" कर सकते हैं। आप स्क्रिप्ट लोडर के बिना ऐसा नहीं कर सकते। LABjs पहले से मौजूद हैं और परिचित होने का मतलब है कि आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि उस ऑन-डिमांड स्क्रिप्ट को कैसे लोड किया जाए - यह पहले से ही पता लगाया जा चुका है।

@rkh--

मैंने यह मुझे दिखाया था (विशेष रूप से अपाचे में, कीप-अलाइव सेटिंग को टॉगल करने के साथ) कितने समानांतर अनुरोध प्रभावित हुए थे (सकारात्मक रूप से जब कीप-अलाइव था)। मैं इस क्षेत्र का कोई विशेषज्ञ नहीं हूं, इसलिए यह कैसे काम करता है या नहीं, इसके सटीक विवरण पर बहस करना मेरे से परे है। मैं कह सकता हूं कि अनुरोध # 2 का समय अनुरोध # 1 का समय कम था, जब कीप-अलाइव था। ब्राउज़र और सर्वर ने यह कैसे किया, मैं केवल आंशिक रूप से सूचित अनुमान लगा सकता हूं।

जीवित रखने के साथ दो बाद के अनुरोधों वाला एक विभाजित निकाय अभी भी एक अनुरोध से अधिक महंगा है।

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

अनुमान के अनुसार, ऐसा लग रहा था कि अनुरोध #1 सेवा के लिए X था, और Keep-Alive के समानांतर #2 वर्तमान में 0.7X था। मुझे यह समझाया गया था कि सर्वर दूसरे अनुरोध को पूरा करने में कुछ मौजूदा कनेक्शन ओवरहेड का उपयोग करने में सक्षम था, जिससे यह थोड़ा सस्ता हो गया। कीप-अलाइव बंद होने के साथ, दूसरे अनुरोध में ऐसी कोई औसत दर्जे की कमी नहीं थी।

हालांकि यह सब चर्चा एक गंभीर रूप से गहरा खरगोश छेद है। मैं कोई सर्वर विशेषज्ञ नहीं हूं। मुझे होना जरूरी नहीं है। मैं केवल यह समझा सकता हूं कि मैंने वास्तव में इस सटीक विषय के आसपास देखा है (और परीक्षण बनाया है) ... क्या मैं उस एकल 100k फ़ाइल लोड समय का परीक्षण कर सकता हूं, उसी फ़ाइल के दो हिस्सों को समानांतर में लोड कर रहा हूं, और क्या दूसरा परीक्षण किसी भी मापनीय होगा राशि तेजी से। जैसा कि मैंने कहा है, मैंने देखा, खंडित-इन-समानांतर परीक्षण के साथ कहीं न कहीं 15-25% तेज। इसने यह कैसे किया, और किसी तरह भयानक "OMG HTTP रिस्पॉन्स ओवरहेड IS TERRIBLE" प्रभाव से आगे निकलने में कामयाब रहा और अभी भी दो समानांतर लोडिंग से लाभान्वित हुआ, मुझे लगता है कि मैं वैज्ञानिक रूप से साबित करने के लिए योग्य नहीं हूं। लेकिन यह निश्चित रूप से अवलोकन द्वारा किया गया था।

क्राइस्ट, तुम लोग फास्ट टाइप करो। मैं पढ़ना समाप्त करता हूं, पृष्ठ को पुनः लोड करता हूं, और नौ और टिप्पणियों की तरह हैं।

मुझे मदद की ज़रूरत है। मैंने ठीक से यह इंगित करने का प्रयास किया है कि इस धागे में हम _क्या बॉयलरप्लेट HTML फ़ाइल के लिए सबसे अच्छा काम करता है_ पर चर्चा करने के लिए गए थे _क्या स्क्रिप्ट लोडर सभी मामलों में, सांप का तेल_ हैं।

@getify , आपको निश्चित रूप से LABjs का बचाव करना चाहिए और थ्रेड में दूसरों द्वारा की गई विशिष्ट आलोचनाओं का जवाब देना चाहिए, लेकिन (@jashkenas को छोड़कर) मुझे लगता है कि जो लोग LABjs की आलोचना करते हैं, वे यह प्रदर्शित करने के लिए ऐसा कर रहे हैं कि यह बॉयलरप्लेट के लिए सबसे अच्छा समाधान नहीं है। आप तर्क देते हैं कि लीगेसी पृष्ठों को script[defer] तुलना में LABjs में बदलना आसान है, और यह सच हो सकता है, लेकिन यह बॉयलरप्लेट HTML फ़ाइल पर कैसे लागू होता है (जो परिभाषा के अनुसार, खरोंच से शुरू होता है)?

आप कहते हैं कि यह उन लोगों के लिए डिज़ाइन किया गया है जिनके पास फैंसी बिल्ड प्रक्रिया नहीं है, लेकिन आप समवर्ती, समान आकार के टुकड़ों में विभाजित होने और समानांतर में लोड करने की वकालत भी करते हैं। क्या यह बिल्ड स्क्रिप्ट के लिए एक कार्य नहीं है? फिर से, ऐसा लगता है कि उपयोगकर्ता को बुद्धिमान डिफ़ॉल्ट देने के लिए डिज़ाइन किए गए बॉयलरप्लेट के लिए गलत विकल्प है। यदि कोई उपयोगकर्ता चाहता है कि गति में कथित रूप से 20-30% की वृद्धि हो, तो वह बाद में बॉयलरप्लेट की पेशकश पर अपग्रेड करना चुन सकती है, लेकिन यह कोई मामूली काम नहीं है।

यह सब कहने के बाद, यदि आप लोग सामान्य विषय ("स्क्रिप्ट लोडर: वैल्यूएबल टूल या स्नेक ऑयल?") के साथ आगे बढ़ना चाहते हैं, तो मैं खुशी-खुशी घूमूंगा और कुछ पॉपकॉर्न बनाऊंगा।

@getify : मैं इस बात से सहमत हो सकता हूं कि दूसरा और तीसरा कनेक्शन पहले की तुलना में तेजी से खोला जा सकता है - पहला वाला DNS की प्रतीक्षा करता है और संभवतः सर्वर पर पहले पैकेट को रूट करना बाकी को उसी पथ के साथ रूट करने से थोड़ा धीमा है। एचटीटीपीएस में एसएसएल सत्र कैश बाद के कनेक्शनों में बहुत मदद करता है।

हालाँकि, मैं इस स्थिति में कीप-अलाइव की प्रासंगिकता नहीं देखता। बाद के _requests_ उसी कनेक्शन पर कीप-अलाइव के साथ तेजी से शुरू होते हैं, लेकिन वे अनुरोध कनेक्शन के भीतर सीरियल होते हैं।

मैं यहाँ लगभग पूरा कर चुका हूँ -- मैं स्क्रिप्ट लोडर के संबंध में अपने "पागल के रूप में पागल और इसे अब और नहीं लेने वाला" क्षण तक पहुँच गया हूँ।

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

यार, सर्द

@savetheclocktower--

निष्पक्ष प्रश्न।

मैंने H5bp में LABjs (या किसी स्क्रिप्ट लोडर) को शामिल करने की जोरदार वकालत करते हुए इस थ्रेड में अपनी भागीदारी शुरू नहीं की थी। मुझे लगता है कि यह उपयोगी है (नीचे देखें), लेकिन यह मेरी कोई बड़ी चिंता नहीं थी कि मैं नींद खो रहा था। जाहिर है, यह धागा "स्क्रिप्ट लोडिंग" की हर चीज पर एक चौतरफा हमले में बदल गया है। जाहिर है, कुछ ऐसा है जिसकी मुझे थोड़ी अधिक परवाह है।

आप कहते हैं कि यह उन लोगों के लिए डिज़ाइन किया गया है जिनके पास फैंसी बिल्ड प्रक्रिया नहीं है, लेकिन आप समवर्ती, समान आकार के टुकड़ों में विभाजित होने और समानांतर में लोड करने की वकालत भी करते हैं। क्या यह बिल्ड स्क्रिप्ट के लिए एक कार्य नहीं है?

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

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

फिर से, ऐसा लगता है कि उपयोगकर्ता को बुद्धिमान डिफ़ॉल्ट देने के लिए डिज़ाइन किए गए बॉयलरप्लेट के लिए गलत विकल्प है।

मुझे लगता है कि एक स्क्रिप्ट लोडर (विशेष रूप से एक जिसे LABjs की तरह डिज़ाइन किया गया है, स्क्रिप्ट टैग और script() कॉल के बीच एक-से-एक मैपिंग के लिए) का एकमात्र कारण बॉयलरप्लेट में एक लाभ है कि बॉयलरप्लेट में , आप अक्सर किसी चीज़ का एक उदाहरण देखते हैं (एक टैग की तरह), और अपने पृष्ठ को बनाने की आपकी प्रवृत्ति केवल उतनी बार कॉपी-एन-पेस्ट करने की होती है जितनी बार आपको इसकी आवश्यकता होती है। इसलिए, यदि आपके पास बॉयलरप्लेट में खराब प्रदर्शन करने वाला पैटर्न (स्क्रिप्ट टैग) है, तो लोगों की प्रवृत्ति स्क्रिप्ट टैग को एक दर्जन बार डुप्लिकेट करने की होगी। मुझे लगता है, औसतन, अगर वे इसके बजाय $LAB.script() कॉल को कई बार दोहराते हैं, तो एक अच्छा मौका है कि उनका प्रदर्शन उतना खराब नहीं होगा जितना कि होता।

यही कारण है कि मैंने इस सूत्र में भाग लेना शुरू किया। यह एकमात्र कारण है कि मैंने @paulirish की "अंध विश्वास" टिप्पणी के साथ यहाँ ऊपर धागे में मुद्दा उठाया।

बहुत अच्छा हाँ।

मुझे लगता है कि यह स्पष्ट है कि यह चर्चा अतीत में चली गई है कि क्या स्क्रिप्ट लोडर h5bp प्रोजेक्ट के लिए उपयुक्त है। लेकिन यह अच्छा है, क्योंकि यह विषय तलाशने लायक है।

परवाह किए बिना, मुझे परीक्षण परिणामों के साथ-साथ प्रतिलिपि प्रस्तुत करने योग्य परीक्षण मामलों में बहुत दिलचस्पी है।

ऐसा भी लगता है कि @defer के लिए विनिर्देश कुछ अनिश्चित व्यवहार की रक्षा के लिए लिखा गया था जो ब्राउज़र इसके साथ प्रदान करते हैं। उस व्यवहार को प्रलेखित किया जाना चाहिए। जब यह तैयार हो जाए तो मैं इसे एमडीसी में माइग्रेट करने में मदद कर सकता हूं।

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

मैंने उस https://github.com/paulirish/lazyweb-requests/issues/42 में कुछ दिलचस्पी लेने के लिए एक टिकट सेट किया है

यदि आप वेबपरफ अनुसंधान और साक्ष्य के दस्तावेजीकरण के _superfun_ कार्यों में हैं तो मेरे साथ शामिल हों।

आइए इस सूत्र को बंद मानें, सज्जनों।

आलसी लोडिंग एएमडी मॉड्यूल का मुख्य लाभ नहीं है जैसा कि @jrburke ने उनकी टिप्पणियों पर वर्णित किया है .. मुख्य कारण यह है कि मैं जितना संभव हो सके एएमडी मॉड्यूल का उपयोग करना चुनता हूं क्योंकि यह कोड संरचना में सुधार करता है। यह स्रोत फ़ाइलों को छोटा और संक्षिप्त रखता है - विकसित करने और बनाए रखने में आसान - उसी तरह जैसे कि देव के दौरान css @import का उपयोग करना और स्टाइलशीट को संयोजित करने के लिए एक स्वचालित बिल्ड चलाना भी बड़ी परियोजनाओं के लिए अनुशंसित है ...

मुझे लगता है कि पिछले साल मैंने जो पोस्ट लिखा था वह इस विषय पर फिट बैठता है: प्रदर्शन सिद्धांत - यह केवल प्रदर्शन के बारे में नहीं है और सुनिश्चित करें कि आप अपना समय बर्बाद नहीं कर रहे हैं_ "अनुकूलन" कुछ ऐसा नहीं है जो कोई _वास्तविक_ अंतर नहीं करता है ...

और मैं @SlexAxton के साथ RequJS अनुकूलक चींटी कार्य ) के बजाय

आइए इस सूत्र को बंद मानें, सज्जनों।

@paulirish एएमडी समर्थन को शामिल करने के बारे में क्या? हमें इसकी चर्चा कहां करनी चाहिए?

@benatkin एक नया टिकट खोलो भाई।

@paulirish ठीक है, धन्यवाद। @jrburke क्या आप कृपया अपने द्वारा शुरू की गई चर्चा को जारी रखने के लिए एक नया टिकट खोलेंगे? मुझे लगता है कि मैं एक टिप्पणी जोड़ूंगा, लेकिन मुझे नहीं लगता कि मैं एएमडी समर्थन के लिए एक मामला रख सकता हूं जितना आप कर सकते हैं।

मनोरंजक और सूचनात्मक। धन्यवाद दोस्तों।

मुझे लगता है कि किसी को एक नया स्क्रिप्ट लोडर प्रोजेक्ट शुरू करने की आवश्यकता है और इसे "इश्यू 28" कहा जाता है। :)

व्यापक संगत के लिए, स्क्रिप्ट को नीचे रखकर, छोटा करके, gzip करके तेज़ प्रदर्शन किया जा सकता है, लेकिन स्थगित न करें। कम से कम तब तक नहीं जब तक ब्राउज़र संगतता सीधे कुछ वर्षों तक सुसंगत न हो।

विज्ञापनों से अड़चनें आ सकती हैं, बहुत अधिक जावास्क्रिप्ट, फूला हुआ HTML, बहुत अधिक CSS, बहुत सारे iframes, बहुत अधिक अनुरोध, सर्वर विलंबता, अक्षम जावास्क्रिप्ट। बहुत से तृतीय पक्ष libs का उपयोग करने वाले अनुप्रयोगों में न केवल बहुत अधिक जावास्क्रिप्ट के कारण समस्याएं होती हैं, बल्कि इससे भी अधिक, उनमें कई अन्य समस्याएं भी होती हैं, जिनमें अधिकतर फूला हुआ HTML, अमान्य HTML, बहुत अधिक सीएसएस और अक्षम जावास्क्रिप्ट होता है। jQuery के दो संस्करण और दो ऑनस्क्रॉल हैंडलर के साथ, ट्विटर सही दिमाग में आता है जो बाउंसिंग दाएं कॉलम ऑनस्क्रॉल का कारण बनता है।

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

https://github.com/BroDotJS/AssetRage

बूम! मैं क्लब बंद करता हूं और मैं धागे बंद करता हूं।

क्या सूत्र है... वाह।

इमो, चर्चा h5bp के संदर्भ में शुरू हुई, जिसका उद्देश्य वेब डेवलपर्स के लिए एक प्रारंभिक बिंदु होना है।
जैसे, आप कह सकते हैं कि h5bp का उपयोग करने वाले वेबदेव के पास वास्तव में स्वच्छ HTML, स्वच्छ CSS, एक अच्छा .htaccess आदि होगा और _maybe_ यहां तक ​​कि _not_ बहुत अधिक छवियों, अक्षम JS, बहुत सारे भद्दे तृतीय पक्ष JS आदि से पीड़ित होंगे। आप जानते हैं, क्योंकि वेब देव उच्च प्रदर्शन h5bp का उपयोग करना चुन रहा है और इसके द्वारा प्रदर्शन के बारे में चिंतित है, और गैर-h5bp सामग्री पर ध्यान देगा जो पृष्ठ पर जाता है।

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

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

और एक और कमेंट....
'स्क्रिप्ट्स को सबसे नीचे रखना' और 'जेएस फाइलों को एक ही फाइल में जोड़ना' कई वर्षों से वेब परफ बेस्ट प्रैक्टिसेस सूची में उच्च स्थान पर है। तो क्यों> 90% औसत साइटें, इन-हाउस डेवलपर्स द्वारा और शीर्ष ब्रांड एजेंसियों द्वारा बनाई गई हैं, अभी भी HEAD में कई स्क्रिप्ट टैग हैं? सच में, ऐसा क्यों है?

और अन्य 9% के पास HEAD में एक एकल, संयोजित JS फ़ाइल... है।
विरले ही मुझे कोई 'सामान्य' साइट दिखाई देती है जो _not_ किसी शीर्ष वेब परफ देव द्वारा बनाई गई है, जिसके नीचे एक स्क्रिप्ट है।

देव साइट्स का निर्माण वैसे ही करते रहते हैं जैसे वे वर्षों से होते आ रहे हैं।
साइट के मालिक डिज़ाइन और सुविधाओं के बारे में सबसे अधिक ध्यान रखते हैं, इसलिए डेवलपर अपना समय व्यतीत करते हैं।

काम करने का तरीका बदलना, एक बिल्ड सिस्टम, कोड ... यह आसान, बहुत आसान होना चाहिए, वरना ऐसा नहीं होगा।

मैंने कई साइटों पर काम किया है जहाँ HEAD में JS को एक फ़ाइल में संयोजित करना और इसे BODY के नीचे लोड करने से साइट के पृष्ठ टूट गए। और फिर क्या? ज्यादातर मामलों में, इसे ठीक करने के लिए केवल एक घंटे का काम नहीं है। गंभीर रिफैक्टरिंग की जरूरत है ... और यह ज्ञान की कमी और विशेष रूप से समय की कमी के कारण नहीं होता है।

(ओह ठीक है, धागा बंद है...)

हम बात कर रहे हैं jQuery और Modernizr के ऊपर एक लाइब्रेरी बिल्ड की। यह सब कहते हैं, वास्तव में। इसका उपयोग कौन करता है? ओह, बकवास, मैं भूल गया, Twitter.com, जो दो jQuery का उपयोग करता है और स्रोत कोड में भी है, निम्नलिखित:

 लाइन 352, कॉलम 6: एंड टैग डिव देखा गया, लेकिन खुले तत्व थे।
 त्रुटि पंक्ति 350, स्तंभ 6: बंद तत्व उल।
 त्रुटि पंक्ति 330, स्तंभ 6: बंद तत्व उल।

और ब्राउज़र से त्रुटि के सही होने की अपेक्षा करने में समस्या यह है कि HTML4 ने त्रुटि सुधार तंत्र को परिभाषित नहीं किया है और इसलिए आप एक के साथ समाप्त हो जाएंगे जो जानता है-कौन जानता है-कहां। निश्चित रूप से, HTML5 त्रुटि प्रबंधन को परिभाषित करता है, लेकिन यह पूर्वव्यापी नहीं है - वहाँ अभी भी बहुत सारे "पुराने" ब्राउज़र हैं।

और बकवास की बात करते हुए, यहां किसी ने jQuery ES5 shims पर एक नज़र डाली थी?

BTW, क्या आपके पास अपने उस कथन में जोड़ने के लिए कुछ है "कि h5bp का उपयोग करने वाले वेबदेव के पास वास्तव में स्वच्छ HTML होगा," aaronpeters?

@GarrettS ठीक है, ठीक है, मुझे

:-D हम हमेशा उम्मीद कर सकते हैं!

एक मरे हुए घोड़े को पीटना, मुझे पता है ... लेकिन यह पता चला है कि उसी समय हम यह शानदार चर्चा कर रहे थे, LABjs के वर्तमान संस्करण में वास्तव में एक बग था जिसके कारण कुछ ब्राउज़रों में जावास्क्रिप्ट गलत क्रम में निष्पादित हुआ: https: //github.com/getify/LABjs/issues/36

ओह विडंबना।

अवश्य। विरोध। पोस्टिंग। पूरी तरह से। [अनुपयुक्त। छवि। के लिये। पिछला। बयान ....अग्ग! यंत्रणा!

मेरा पसंदीदा हिस्सा तब था जब dhtmlkitchen.com (वर्तमान में पूरी तरह से गड़बड़ ) करने वाले दोस्त ने मार्कअप त्रुटियों के बारे में बात करना शुरू कर दिया था।

उस साइट को पाउलो फ्रैगोमेनी में स्थानांतरित कर दिया गया है। हां, मैंने इसे बनाया है और मैंने वहां जो लिखा है, उस पर गर्व है, जैसा कि यहां है। जाओ अपने कमजोर अवतार, जैकस का स्क्रीनशॉट।

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

खुशी है कि हम इसे उत्तम दर्जे का रख रहे हैं, और _on topic_, दोस्तों।

जशकेनस को इस चर्चा में प्रासंगिक जानकारी जल्दी ही मिल गई।

लेकिन फिर प्रतिक्रिया हुई। नहीं! यह नहीं होना चाहिए! साउंडर्स ने इसे करने के लिए कहा! और defer का उपयोग करने के लिए बुरी सलाह थी, इस बात पर ध्यान न देना कि यह विफल होने पर कैसे विफल हो जाता है।

और फिर विडंबना यह है कि कहीं से यह दावा किया गया कि h5bp उपयोगकर्ता चीजों को ठीक से कर रहे होंगे। और यह बहुत ही विडंबनापूर्ण है क्योंकि यह टिप्पणी उसके समर्थकों की _after_ टिप्पणियों से आई है जो स्पष्ट रूप से अमान्य मार्कअप उत्पन्न करते हैं और तीसरे पक्ष के अमूर्त परतों (और भयानक वाले) के भार का उपयोग करते हैं। और defer का उपयोग करने के बारे में टिप्पणी के बाद।

और तो इनमें से किसी का dhtmlkitchen.com के डाउन होने से क्या लेना-देना है? कुछ भी नहीं, ज़ाहिर है। यह एक h5bp forker की ओर से केवल एक कमजोर जाब था जो आलोचना सुनने के लिए खड़ा नहीं हो सकता।

ब्रदर्स
लड़का।
ब्रदर्स

यह धागा बंद है। याद रखना? आपको घर जाने की जरूरत नहीं है, लेकिन आप यहां आग नहीं लगा सकते।

अरे, आप सभी को याद है कि एक समय जब हमने एक महाकाव्य धागा बनाया था जहां कई बहसें थीं, व्यक्तिगत लौ युद्ध, हर जगह लोगों को गुस्सा आ रहा था, एक अश्लील छवि या दो, और एक अच्छा समय था? विश्वास नहीं कर सकता यह मुफ़्त था। हमें फिर कभी ऐसा करना चाहिए।