स्क्रिप्ट टैग

547

मेरे पास विशेषताओं के बारे में asyncऔर टैग के deferलिए कुछ प्रश्न हैं <script>जो मेरी समझ में केवल एचटीएमएल 5 ब्राउज़रों में काम करते हैं।

मेरी साइटों में से एक में दो बाहरी जावास्क्रिप्ट फाइलें हैं जो वर्तमान में </body>टैग के ठीक ऊपर बैठती हैं ; पहला हैjQuery गूगल से सॉर्ड किया गया है और दूसरा एक स्थानीय बाहरी स्क्रिप्ट है।

साइट लोड गति के संबंध में

क्या asyncपृष्ठ के निचले भाग में मेरे पास मौजूद दो लिपियों को जोड़ने का कोई लाभ है ?
क्या asyncदो लिपियों के विकल्प को जोड़ने और उन्हें पृष्ठ के शीर्ष पर रखने से कोई लाभ होगा <head>?
इसका मतलब यह होगा कि वे पेज लोड के रूप में डाउनलोड करते हैं?
मुझे लगता है कि यह HTML4 ब्राउज़रों के लिए देरी का कारण होगा, लेकिन क्या यह HTML5 ब्राउज़रों के लिए पृष्ठ लोड को गति देगा?

का उपयोग करते हुए `<script defer src=...`

क्या स्क्रिप्ट को पहले से स्क्रिप्ट के रूप में प्रभावित <head>करने वाली विशेषता deferके साथ दो स्क्रिप्ट लोड करना चाहेंगे </body>?
एक बार फिर मुझे लगता है कि यह HTML4 ब्राउज़रों को धीमा कर देगा।

का उपयोग करते हुए `<script async src=...`

अगर मेरे पास दो स्क्रिप्ट हैं तो मैं asyncसक्षम हूं

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

अंत में क्या मैं चीजों को छोड़ने के लिए सबसे अच्छा हूं क्योंकि वे एचटीएमएल 5 का अधिक उपयोग किया जाता है?

javascript html

— एडम
स्रोत

5

asyncनया (ईश) है, लेकिन deferIE4 के बाद से IE का हिस्सा है। deferहाल ही में अन्य ब्राउज़रों में जोड़ा गया था, लेकिन उन ब्राउज़र के पुराने संस्करण बहुत कम घूमते हैं।

— एलोहसी

3

अब, HTML5 बहुत लोकप्रिय हो गया है!

— sept08

2

deferHTML के निचले भाग में स्क्रिप्ट रखने के समान है , जो कई वर्षों से सामान्य है।

— vsync

1

@vsync आवश्यक रूप से सत्य नहीं है, जब ब्राउज़र स्क्रिप्ट टैग को पार्स करता है, तो ब्राउज़र JS को डीफ़र टैग के साथ डाउनलोड करेगा, लेकिन DOMContentLoaded से ठीक पहले तक इसे हटा देगा। डाउनलोड करना गैर-अवरुद्ध है। HTML के तल पर रखने से DOM के निर्माण तक JS को डाउनलोड करने और क्रियान्वित करने में देरी होगी, लेकिन आप अभी भी डाउनलोड के लिए इंतजार करके अतिरिक्त देरी का सामना करेंगे।

— ब्रैड फ्रॉस्ट

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

— vsync

405

अपनी स्क्रिप्ट्स को पहले रखें </body>। Async का उपयोग कुछ परिस्थितियों में वहाँ स्थित लिपियों के साथ किया जा सकता है (नीचे चर्चा देखें)। Defer वहाँ स्थित लिपियों के लिए बहुत अंतर नहीं करेगा क्योंकि DOM पार्सिंग का काम वैसे भी बहुत पहले से हो चुका है।

यहाँ एक लेख है जो async और defer के बीच अंतर को बताता है: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ ।

यदि आप स्क्रिप्ट को शरीर के अंत में पहले रखते हैं तो आपका HTML पुराने ब्राउज़रों में तेज़ी से प्रदर्शित होगा </body>। इसलिए, पुराने ब्राउज़रों में लोड गति को बनाए रखने के लिए, आप उन्हें कहीं और नहीं रखना चाहते हैं।

यदि आपकी दूसरी स्क्रिप्ट पहली स्क्रिप्ट पर निर्भर करती है (जैसे आपकी दूसरी स्क्रिप्ट पहले स्क्रिप्ट में लोड किए गए jQuery का उपयोग करती है), तो आप निष्पादन आदेश को नियंत्रित करने के लिए अतिरिक्त कोड के बिना उन्हें एसिंक्स नहीं बना सकते हैं, लेकिन आप उन्हें सुरक्षित बना सकते हैं क्योंकि स्क्रिप्ट सुरक्षित हैं अभी भी क्रम में निष्पादित किया जा सकता है, दस्तावेज़ के पार्स होने के बाद तक नहीं। यदि आपके पास वह कोड है और आपको स्क्रिप्ट को तुरंत चलाने की आवश्यकता नहीं है, तो आप उन्हें async या defer कर सकते हैं।

आप स्क्रिप्ट को <head>टैग में रख सकते हैं और उन्हें सेट कर सकते हैं deferऔर स्क्रिप्ट को लोड करना तब तक के लिए स्थगित कर दिया जाएगा जब तक कि डोम को पार्स नहीं किया गया है और जो नए ब्राउज़र में फास्ट पेज डिस्प्ले प्राप्त करेगा, जो सुरक्षित का समर्थन करते हैं, लेकिन यह आपको बिल्कुल भी मदद नहीं करेगा। पुराने ब्राउज़रों में और यह वास्तव में पहले से ही स्क्रिप्ट डालने की तुलना में कोई तेज़ नहीं है</body> जो सभी ब्राउज़रों में काम करता है। तो, आप देख सकते हैं कि उन्हें सही से पहले रखना सबसे अच्छा क्यों है </body>।

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

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

— jfriend00
स्रोत

8

Defer उन्हें अभी भी क्रम में चलाना चाहिए, लेकिन dom-contentloaded से पहले चलाएँ। क्या इसका मतलब यह नहीं है कि इसे सिर में लगाना तेज़ होगा, क्योंकि यह उन्हें डाउनलोड करना शुरू कर सकता है क्योंकि शरीर html को पार्स किया गया है?

— केविन

9

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

— नैट

12

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

— jfriend00

4

"यदि आपकी दूसरी स्क्रिप्ट पहली स्क्रिप्ट पर निर्भर करती है ... तो आप उन्हें या तो एसिंक्स या डिफर नहीं कर सकते हैं" - यह सही नहीं है, क्योंकि वे क्रम में निष्पादित होते हैं।

— असंतुष्टगीत

2

इस बिंदु पर, यह जवाब पोस्ट किए जाने के बाद 2012 से ब्राउज़र की घटनाओं के साथ </ body> आवश्यकता वास्तव में आवश्यक नहीं है।

— bgcode

841

यह चित्र सामान्य स्क्रिप्ट टैग, एसिंक्स और डिफर को स्पष्ट करता है

जैसे ही स्क्रिप्ट भरी जाती है, वैसे ही Async स्क्रिप्ट्स निष्पादित हो जाते हैं, इसलिए यह निष्पादन के आदेश की गारंटी नहीं देता है (आपके द्वारा अंत में शामिल की गई स्क्रिप्ट पहली स्क्रिप्ट फ़ाइल से पहले निष्पादित हो सकती है)
Defer स्क्रिप्ट निष्पादन के क्रम की गारंटी देती है जिसमें वे पृष्ठ में दिखाई देते हैं।

इस लिंक को देखें: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

— प्रशांत बिंद्रा
स्रोत

मुझे लगता है कि कई स्क्रिप्ट के साथ एक उदाहरण उनके अनुक्रम को स्पष्ट करने के लिए बेहतर होता

— vsync

4

@writofmandamus लगता है कि asyncजीतेंगे। देखें stackoverflow.com/questions/13821151/…

— Monsignor

अच्छी व्याख्या के लिए धन्यवाद। हालाँकि, चित्र पैमाने पर नहीं हैं। केवल <script>टैग के मामले में , पेज लोड की कुल लंबाई स्क्रिप्ट फ़ाइल को डाउनलोड करने में लगने वाले समय से अधिक है।

— arni

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

— एड्रियन वाईक

@ अगर बैंडविड्थ पूरी तरह से उपयोग किया जाता है, तो यह केवल शायद ही कभी हो। और दोनों डाउनलोड बैंडविड्थ को साझा करेंगे, एक को ब्लॉक नहीं करेंगे। - आगे: ये चित्र हरे रंग में पार्सिंग दिखाते हैं, डाउनलोड नहीं।

— रॉबर्ट सिएमर

213

एचटीएमएल 5: async,defer

HTML5 में, आप अपना जावास्क्रिप्ट कोड चलाने के लिए ब्राउज़र को बता सकते हैं। 3 संभावनाएं हैं:

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

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

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

— दिनेश
स्रोत

blogger.com टेम्प्लेट को async=""बदलने से पहले आवश्यक होगा कि वह टेम्प्लेट परिवर्तनों को मान्य और सहेजे।

— नोबिनजा

1

नोट: इस बात की कोई गारंटी नहीं है कि स्क्रिप्ट उसी क्रम में चलेंगी, जिस क्रम में वे Async का उपयोग करके निर्दिष्ट किए गए हैं। "इसलिए यदि आपकी दूसरी स्क्रिप्ट पहली स्क्रिप्ट पर निर्भर करती है तो Async से बचें।"

— फैसल नसीर

2

async- लिपियों को उनके द्वारा डाउनलोड किए गए पल के साथ HTML फ़ाइल में उनके आदेश पर कोई विचार नहीं किया जाता है।

— विस्कॉन्सिन

30

दोनों asyncऔर deferस्क्रिप्ट पार्सर को रोके बिना तुरंत डाउनलोड करना शुरू करते हैं और दोनों एक वैकल्पिक समर्थन करते हैंonload हैंडलर का करते हैं ताकि आरंभिक प्रदर्शन करने की सामान्य आवश्यकता को संबोधित किया जा सके जो स्क्रिप्ट पर निर्भर करता है।

के बीच का अंतर asyncऔर deferचारों ओर जब स्क्रिप्ट के निष्पादित होने केन्द्रों। प्रत्येक asyncस्क्रिप्ट डाउनलोड होने के बाद और खिड़की के लोड घटना से पहले समाप्त होने के पहले अवसर पर निष्पादित होती है। इसका मतलब यह है कि यह संभव है (और संभावना है) asyncस्क्रिप्ट को उस क्रम में निष्पादित नहीं किया जाता है जिसमें वे पृष्ठ में होते हैं। जबकि deferलिपियों, दूसरे हाथ पर, जिस क्रम में वे पेज में पाए जाते हैं में क्रियान्वित किया जा की गारंटी है। पार्सिंग पूरी तरह से समाप्त होने के बाद यह निष्पादन शुरू होता है, लेकिन दस्तावेज़ की DOMContentLoadedघटना से पहले ।

स्रोत और अधिक जानकारी: यहाँ ।

— ज़मीर खान
स्रोत

24

एक ही तरह की समस्या का सामना करना पड़ा और अब स्पष्ट रूप से समझ में आया कि दोनों कैसे काम करेंगे। इस संदर्भ लिंक से मदद मिलेगी ...

async

जब आप अपने स्क्रिप्ट टैग में async विशेषता जोड़ते हैं, तो निम्न होगा।

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>

फ़ाइलों को लाने के लिए समानांतर अनुरोध करें।
दस्तावेज़ को ऐसे जारी रखें जैसे कि वह कभी बाधित नहीं हुआ हो।
फ़ाइलों को डाउनलोड करने के क्षण को अलग-अलग स्क्रिप्ट से निष्पादित करें।

आस्थगित करें

Defer एक बहुत बड़ी भिन्नता के साथ async के समान है। यहां तब होता है जब कोई ब्राउज़र एक स्क्रिप्ट को डीफ़र विशेषता के साथ सामना करता है।

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>

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

संदर्भ: Async और Defer के बीच अंतर

— कामेश
स्रोत

7

asyncऔर deferHTML पार्सिंग के दौरान फ़ाइल डाउनलोड करेगा। दोनों पार्सर को बाधित नहीं करेंगे।

asyncएक बार डाउनलोड होने के बाद विशेषता वाली स्क्रिप्ट निष्पादित की जाएगी। जबकि deferडोम पार्सिंग को पूरा करने के बाद विशेषता वाली स्क्रिप्ट निष्पादित की जाएगी।
भरी हुई स्क्रिप्ट asyncकिसी भी आदेश की गारंटी नहीं देती है। जबकि deferविशेषता से भरी हुई लिपियाँ उस क्रम को बनाए रखती हैं जिसमें वे DOM पर दिखाई देते हैं।

<script async>जब स्क्रिप्ट किसी चीज पर निर्भर न हो तो प्रयोग करें । जब स्क्रिप्ट उपयोग पर निर्भर करता है।

सबसे अच्छा समाधान शरीर के तल पर जोड़ा जाएगा। अवरुद्ध या प्रतिपादन के साथ कोई समस्या नहीं होगी।

— NavyaKumar
स्रोत

बस यहाँ कुछ स्पष्टीकरण करना चाहते हैं, दो बातें यहाँ हो रही हैं। संसाधन का डाउनलोडिंग 2. संसाधन का निष्पादन। दोनों मामलों में संसाधन का डाउनलोडिंग (async और defer) अवरुद्ध नहीं हो रहा है, इसका मतलब है, वे html के पार्सिंग को ब्लॉक नहीं करते हैं, जबकि async में निष्पादन पार्सिंग को ब्लॉक करता है और defer के मामले में, HTML मार्कअप के पार्स होने के बाद निष्पादन होता है, इसलिए इस मामले में गैर अवरुद्ध।

— pOoOf

5

मुझे लगता है कि 2013 में जेक आर्चीबाल्ड ने हमें कुछ अंतर्दृष्टि प्रदान की, जो इस विषय में और भी सकारात्मकता ला सकती है:

https://www.html5rocks.com/en/tutorials/speed/script-loading/

पवित्र ग्रिल में स्क्रिप्टिंग का एक सेट होता है जिसे रेंडरिंग को ब्लॉक किए बिना तुरंत डाउनलोड किया जाता है और जितनी जल्दी हो सके उतने समय में निष्पादित किया जाता है। दुर्भाग्य से HTML आपसे नफरत करता है और आपको ऐसा नहीं करने देगा।

(...)

जवाब वास्तव में एचटीएमएल 5 कल्पना में है, हालांकि यह स्क्रिप्ट-लोडिंग अनुभाग के नीचे छिपा हुआ है। " Async IDL विशेषता नियंत्रित करती है कि क्या तत्व एसिंक्रोनस रूप से निष्पादित करेगा या नहीं। यदि तत्व का" बल-async "ध्वज सेट है, तो, प्राप्त होने पर, async IDL विशेषता को सही लौटना चाहिए, और सेटिंग पर," बल-async " ध्वज को पहले परेशान होना चाहिए ... "।

(...)

लिपियों को गतिशील रूप से बनाया गया है और दस्तावेज़ में जोड़ा गया है डिफ़ॉल्ट रूप से async हैं , वे रेंडरिंग को ब्लॉक नहीं करते हैं और जैसे ही वे डाउनलोड करते हैं निष्पादित करते हैं, जिसका अर्थ है कि वे गलत क्रम में बाहर आ सकते हैं। हालाँकि, हम उन्हें स्पष्ट रूप से async के रूप में चिह्नित कर सकते हैं:

[
    '//other-domain.com/1.js',
    '2.js'
].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

यह हमारी स्क्रिप्ट को व्यवहार का एक मिश्रण देता है जिसे सादे HTML के साथ प्राप्त नहीं किया जा सकता है। स्पष्ट रूप से async नहीं होने के कारण, स्क्रिप्ट्स को निष्पादन कतार में जोड़ा जाता है, वही कतार जो वे हमारे पहले सादे-HTML उदाहरण में जोड़ते हैं। हालाँकि, गतिशील रूप से निर्मित होने के कारण, उन्हें दस्तावेज़ पार्सिंग के बाहर निष्पादित किया जाता है, इसलिए डाउनलोड करते समय रेंडरिंग को ब्लॉक नहीं किया जाता है (सिंक XHR के साथ नहीं- async स्क्रिप्ट लोड करने को भ्रमित करें, जो कभी अच्छी बात नहीं है)।

उपरोक्त स्क्रिप्ट को पृष्ठों के सिर में इनलाइन शामिल किया जाना चाहिए, प्रगतिशील रेंडरिंग को बाधित किए बिना स्क्रिप्ट डाउनलोड को जल्द से जल्द डाउनलोड करना चाहिए, और आपके द्वारा निर्दिष्ट आदेश में जितनी जल्दी हो सके निष्पादित करें। "1.js" "1.js" से पहले डाउनलोड करने के लिए स्वतंत्र है, लेकिन इसे तब तक निष्पादित नहीं किया जाएगा जब तक कि "1.js" को सफलतापूर्वक डाउनलोड या निष्पादित नहीं किया जाता है, या ऐसा करने में विफल रहता है। हुर्रे! async- डाउनलोड लेकिन आदेश-निष्पादन !

फिर भी, यह स्क्रिप्ट लोड करने का सबसे तेज़ तरीका नहीं हो सकता है:

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

हम इसे दस्तावेज़ के प्रमुख में डालकर खोजनीयता को वापस जोड़ सकते हैं:

<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">

यह बताता है कि ब्राउज़र को पेज को 1.js और 2.js. की जरूरत है लिंक [rel = subresource] लिंक [rel = prefetch] के समान है, लेकिन विभिन्न शब्दार्थों के साथ। दुर्भाग्य से यह वर्तमान में केवल क्रोम में समर्थित है, और आपको दो बार लोड करने के लिए स्क्रिप्ट को घोषित करना होगा, एक बार लिंक तत्वों के माध्यम से, और फिर से आपकी स्क्रिप्ट में।

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

— mjfneto
स्रोत

1

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

IE 11 और उससे नीचे के क्रम में ऐसा प्रतीत होता है:

async (पृष्ठ लोड करते समय आंशिक रूप से निष्पादित हो सकता है)
कोई नहीं (पृष्ठ लोड करते समय निष्पादित कर सकता है)
defer (पृष्ठ लोड होने के बाद निष्पादित होता है, फ़ाइल में प्लेसमेंट के क्रम में सभी आस्थगित)

एज, वेबकिट इत्यादि में, एस्किंक विशेषता को या तो नजरअंदाज कर दिया जाता है या अंत में रखा जाता है:

डेटा-पेजपेड-नो-डेफर (किसी अन्य स्क्रिप्ट से पहले निष्पादित होता है, जबकि पेज लोड हो रहा है)
कोई नहीं (पृष्ठ लोड होते समय निष्पादित कर सकता है)
आस्थगित (डोम लोड होने तक प्रतीक्षा करता है, फ़ाइल में प्लेसमेंट के क्रम में सभी आस्थगित)
Async (लगता है डोम लोड होने तक प्रतीक्षा करें)

नए ब्राउज़रों में, डेटा-पेजस्पीड-नो-डीफ़र विशेषता किसी भी अन्य बाहरी स्क्रिप्ट से पहले चलती है। यह उन लिपियों के लिए है जो DOM पर निर्भर नहीं हैं।

नोट: जब आप अपनी बाहरी लिपियों के निष्पादन के स्पष्ट क्रम की आवश्यकता हो तो defer का प्रयोग करें। यह ब्राउज़र को फ़ाइल में प्लेसमेंट के क्रम में सभी स्थगित स्क्रिप्ट निष्पादित करने के लिए कहता है।

ASIDE: लोड करते समय बाहरी जावास्क्रिप्ट का आकार मायने रखता था ... लेकिन निष्पादन के आदेश पर इसका कोई प्रभाव नहीं था।

यदि आप अपनी स्क्रिप्ट के प्रदर्शन के बारे में चिंतित हैं, तो आप न्यूनतमकरण पर विचार करना चाहते हैं या बस XMLHttpRequest के साथ गतिशील रूप से लोड कर सकते हैं।

— चार्ल्स ओवेन
स्रोत

data-pagespeed-no-deferसर्वर साइड पेजस्पीड मॉड्यूल द्वारा उपयोग की जाने वाली विशेषता है । इसके data-pagespeed-no-deferद्वारा स्वयं की विशेषता का किसी भी ब्राउज़र में कोई प्रभाव नहीं है।

— Qtax

स्क्रिप्ट टैग - async और defer

साइट लोड गति के संबंध में

का उपयोग करते हुए <script defer src=...

का उपयोग करते हुए <script async src=...

का उपयोग करते हुए `<script defer src=...`

का उपयोग करते हुए `<script async src=...`