वास्तव में <script defer = "defer"> कैसे काम करता है?

208

मेरे पास कुछ <script>तत्व हैं, और उनमें से कुछ कोड अन्य <script>तत्वों में कोड पर निर्भर करते हैं। मैंने देखा कि deferविशेषता यहां काम आ सकती है क्योंकि यह कोड ब्लॉक को निष्पादन में स्थगित करने की अनुमति देता है।

इसे जांचने के लिए मैंने इसे Chrome: http://jsfiddle.net/xXZMN/ पर निष्पादित किया ।

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

हालाँकि, यह अलर्ट करता है 2 - 1 - 3। यह अलर्ट क्यों नहीं 1 - 2 - 3?

javascript html deferred-execution

— pimvdb
स्रोत

2

शायद इस लेख को देखें । और, हमेशा की तरह, IE का अपना मतलब होता है कि किसी चीज का क्या मतलब है और उसने पहले स्क्रिप्ट को लोड करने का फैसला किया है लेकिन जब तक कि शरीर लोड नहीं हो जाता है तब तक निष्पादन में देरी होती है (आमतौर पर)।

— ब्रैड क्रिस्टी

धन्यवाद, हालांकि परीक्षण पृष्ठ का Chrome पर एक अलग परिणाम है: वेबसाइट दत्तककरण . com / speed / tweak / defer/ test । स्क्रीनशॉट से पता चलता है कि मैं कैसे इसकी उम्मीद करूंगा, जबकि Chrome केवल पहले आस्थगित निष्पादित करने के लिए लगता है।

— पिमवेदब

1

मुझे लगता है कि आप आईई को डेफर की परिभाषा देंगे, डब्ल्यू 3 सी के इरादे को डोम स्तर 1 कल्पना में सुरक्षित रखते हैं।

— पर Ramp51

41

जैसा कि एलओएचसी ने अपने जवाब में पहले ही बताया था कि HTML मानक defer केवल निर्दिष्ट करते समय मान्य है src। यह एक कारण हो सकता है कि आपके उदाहरण ने अधिकांश ब्राउज़रों में अपेक्षा के अनुरूप काम नहीं किया।

— पैंक्रैट

2

@ पंचर सच्ची कहानी!

— फ़ायरफ़ॉक्स

51

अद्यतन: 2/19/2016

इस उत्तर को पुराना मानें। नए ब्राउज़र संस्करण के लिए प्रासंगिक जानकारी के लिए इस पोस्ट पर अन्य उत्तरों का संदर्भ लें।

मूल रूप से, डेफर ब्राउज़र को उस स्क्रिप्ट ब्लॉक में जावास्क्रिप्ट को निष्पादित करने से पहले "तैयार होने तक" प्रतीक्षा करने के लिए कहता है। आमतौर पर यह डोम लोडिंग और डॉक्यूमेंट को समाप्त करने के बाद होता है। पहले से ही == 4

डिफर विशेषता इंटरनेट एक्सप्लोरर के लिए विशिष्ट है। इंटरनेट एक्सप्लोरर 8 में, विंडोज 7 पर परिणाम मैं आपके जेएस फिडेल परीक्षण पृष्ठ में देख रहा हूं, 1 - 2 - 3 है।

परिणाम ब्राउज़र से ब्राउज़र में भिन्न हो सकते हैं।

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

आम धारणा के विपरीत, IE मानकों से अधिक बार लोगों पर जाने देता है, वास्तविकता में "defer" विशेषता को DOM स्तर 1 कल्पना में परिभाषित किया गया है http://www.w3.org/TR/REC-DOM-Level-1/level -एक-html.html

W3C की परिभाषा defer: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"जब सेट किया जाता है, तो यह बूलियन विशेषता उपयोगकर्ता एजेंट को एक संकेत प्रदान करती है कि स्क्रिप्ट किसी भी दस्तावेज़ सामग्री (उदाहरण के लिए, जावास्क्रिप्ट में कोई" document.write ") उत्पन्न नहीं करने वाली है और इस प्रकार, उपयोगकर्ता एजेंट पार्स और रेंडरिंग जारी रख सकता है।"

— Ramp51 पर निशान
स्रोत

8

@ MarkAtRamp51 - यदि आपका उत्तर पुराना है, तो आपको अन्य उत्तरों पर टिप्पणियों में शिकायत करने के बजाय इसे संपादित करना चाहिए। डाउनवोट्स उन उत्तरों के लिए हैं जो "उपयोगी नहीं हैं।"

— क्रिश्चियन कोंकले

10

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

— पर Ramp51

3

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

— mgibsonbr

3

@ क्या तब इसे हरी झंडी नहीं दी जानी चाहिए? "Html5 defer script" सर्च करने से यह google में तीसरा परिणाम है। यह उत्तर तब पुराने और गलत परिभाषा वाले बहुत से उपयोगकर्ताओं को प्रदान कर रहा है। (वर्तमान परिभाषा: "इंगित करता है कि उपयोगकर्ता एजेंट स्क्रिप्ट के प्रसंस्करण को स्थगित कर सकता है। HTML 4.0 में defer विशेषता परिभाषा देखें।")।

— मालवोस

2

@ MarkAtRamp51I को लगता है कि आपको अपना जवाब अपडेट करना चाहिए। जो कोई भी इस प्रश्न को पाता है और इसलिए आपका उत्तर इसकी ऐतिहासिक जानकारी को नहीं पहचान पाएगा। यह उन्हें ऐसा लगेगा जैसे यह उत्तर है जो आज सही है। इसी तरह से इंटरनेट काम करता है। इसलिए आपको अपना उत्तर संपादित करना चाहिए, ध्यान दें कि यह एक बार सही था, और सही उत्तर को देखें।

— Juuro 25'15

167

HTML5 युक्ति से कुछ स्निपेट: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

यदि src विशेषता मौजूद नहीं है, तो defer और async विशेषताएँ निर्दिष्ट नहीं होनी चाहिए।

तीन संभावित मोड हैं जिन्हें इन विशेषताओं [async और defer] का उपयोग करके चुना जा सकता है। यदि एसिंक्स विशेषता मौजूद है, तो जैसे ही यह उपलब्ध होगा, स्क्रिप्ट को एसिंक्रोनस रूप से निष्पादित किया जाएगा। यदि async विशेषता मौजूद नहीं है, लेकिन defer विशेषता मौजूद है, तो पृष्ठ निष्पादित होने पर स्क्रिप्ट निष्पादित हो जाती है। यदि न तो विशेषता मौजूद है, तो उपयोगकर्ता द्वारा पेज को जारी रखने से पहले स्क्रिप्ट को तुरंत लाया और निष्पादित किया जाता है।

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

यदि तत्व में एक src विशेषता है, और तत्व में एक defer विशेषता है, और तत्व को "पार्सर-सम्मिलित" के रूप में चिह्नित किया गया है, और तत्व में एक async विशेषता नहीं है:

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

— Alohci
स्रोत

37

हो सकता है, मेरी यह प्रतिक्रिया आपकी मददगार टिप्पणी के कारण लोगों को मेरा जवाब देने से रोक देगी। स्वीकृत उत्तर गलत नहीं है, इसका उत्तर अलग है, क्योंकि 2011 की शुरुआत में एचटीएमएल 5 की कल्पना वर्तमान की तुलना में मुख्यधारा वेबब्रोर्स के लिए कम प्रासंगिक थी। यह उत्तर बेहतर हो सकता है, लेकिन किसी भी मानक द्वारा स्वीकृत उत्तर गलत नहीं है ।

— पर Ramp51

3

हालांकि यह जानना उपयोगी है कि कल्पना क्या कहती है, यह पता चलता है कि IE <9 जैसेdefer कुछ ब्राउज़र बुरी तरह से लागू होते हैं । यदि आप उपयोग करते हैं defer, तो आप कुछ ब्राउज़रों में स्क्रिप्ट फ़ाइलों को निष्पादित करने पर भरोसा नहीं कर सकते।

— फ्लिम

2

@ फीलम केवल IE नहीं, ऐसा लगता है कि फायरफॉक्स में निष्पादन आदेश की गारंटी नहीं है ।

— फ्रैंकलिन यू

पहली बोली अब मान्य नहीं है? अब मैं इसे पढ़ सकता हूं: "यह विशेषता निर्दिष्ट नहीं होनी चाहिए यदि src विशेषता मौजूद नहीं है, या यदि स्क्रिप्ट एक क्लासिक स्क्रिप्ट नहीं है।" और एक क्लासिक स्क्रिप्ट src = "" के बिना भी एक है।

— Félix Sanz

158

वास्तविक उत्तर यह है: क्योंकि आप डेफर पर भरोसा नहीं कर सकते।

अवधारणा में, defer और async इस प्रकार भिन्न होते हैं:

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

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

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

कुछ स्थितियों में कुछ ब्राउज़रों में एक बग होता है जो deferस्क्रिप्ट को क्रम से बाहर चलाने का कारण बनता है ।
स्क्रिप्ट के लोड DOMContentLoadedहोने के बाद तक कुछ ब्राउज़र इवेंट में देरी करते हैं defer, और कुछ नहीं करते हैं।
कुछ ब्राउज़र इनलाइन कोड वाले तत्वों deferपर <script>एक srcविशेषता के बिना पालन करते हैं , और कुछ इसे अनदेखा करते हैं।

सौभाग्य से ऐनक कम से कम यह निर्दिष्ट करता है कि एसिंक्स डीफर को ओवरराइड करता है। तो आप सभी लिपियों को एसिंक्स के रूप में मान सकते हैं और ब्राउज़र समर्थन की एक विस्तृत स्वाथ प्राप्त कर सकते हैं:

<script defer async src="..."></script>

दुनिया भर में उपयोग करने वाले 98% ब्राउज़र और यूएस में 99% इस दृष्टिकोण के साथ अवरुद्ध होने से बचेंगे।

(यदि आपको दस्तावेज़ को समाप्त करने तक प्रतीक्षा करने की आवश्यकता है, तो ईवेंट DOMContentLoadedईवेंट को सुनें या jQuery के आसान .ready()फ़ंक्शन का उपयोग करें । आप वैसे भी ब्राउज़रों पर पीछे हटने के लिए ऐसा करना चाहते हैं जो बिल्कुल भी लागू नहीं होते हैं defer।)

— क्रिस मोसचिनी
स्रोत

13

धन्यवाद, आपका जवाब मेरे लिए सबसे उपयोगी था!

— मार्कस

5

मेरा मानना है कि यह गलत है। डिफर का लाभ यह है कि यह तब तक निष्पादित नहीं होता है जब तक कि पेज का पार्सिंग पूरा नहीं हो जाता है। इस पृष्ठ में async और defer के

— tinkerr

1

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

— क्रिस मॉसचिनी

बस यह बताना चाहता था कि ओपेरा ने संस्करण 15defer से विशेषता का समर्थन किया है , जिसे 2 जून 2013 को जारी किया गया था ।

1

@VikasBansal पुराने ब्राउज़रों के लिए जो async का समर्थन नहीं करते - अर्थात् पुराने IE।

— क्रिस मोसची

13

deferकेवल बाहरी स्क्रिप्ट समावेश के <script>लिए टैग में उपयोग किया जा सकता है । इसलिए इसे -sags में उपयोग करने की सलाह दी जाती है ।<script><head>

— राजेश पॉल
स्रोत

8

जैसा कि आस्थगित विशेषता केवल src के साथ स्क्रिप्ट टैग के साथ काम करती है। इनलाइन स्क्रिप्ट के लिए defer करने का एक तरीका मिला। DOMContentLoaded घटना का उपयोग करें।

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

यह इसलिए है, क्योंकि DOMContentLoaded ईवेंट के बाद आग लगने के बाद सुरक्षित स्क्रिप्ट पूरी तरह से लोड हो जाती हैं।

— बिजॉय अनुपम
स्रोत

6

आस्थगित विशेषता केवल बाहरी स्क्रिप्ट के लिए है (केवल तभी उपयोग किया जाना चाहिए जब src विशेषता मौजूद हो)।

— सौमित्र
स्रोत

4

यह भी ध्यान दिया जाना चाहिए कि script deferकुछ स्थितियों में उपयोग करते समय IE <= 9 में समस्याएं हो सकती हैं । इस पर अधिक: https://github.com/h5bp/lazyweb-requests/issues/42

— कहावत
स्रोत

4

इस उत्कृष्ट लेख पर एक नज़र डालिए, 2013 में लिखे गए Google डेवलपर जेक आर्चीबाल्ड द्वारा स्क्रिप्ट लोडिंग के नकली पानी में डुबकी ।

उस लेख से संबंधित अनुभाग का हवाला देते हुए:

आस्थगित करें
<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>
युक्ति कहती है : DOMContentLoaded से ठीक पहले, एक साथ डाउनलोड करें। "Src" के बिना स्क्रिप्ट पर "defer" की उपेक्षा करें।

IE <10 कहते हैं : मैं 1.js के निष्पादन के माध्यम से 2.js आधे रास्ते पर अमल कर सकता हूं है ना मज़ेदार ??

लाल रंग के ब्राउज़र कहते हैं : मुझे नहीं पता कि यह "सुरक्षित" बात क्या है, मैं स्क्रिप्ट को लोड करने जा रहा हूं जैसे कि यह नहीं था।

अन्य ब्राउज़र कहते हैं : ठीक है, लेकिन मैं "src" के बिना स्क्रिप्ट पर "आस्थगित" की अनदेखी नहीं कर सकता।

_{(मैं इस टिप्पणी के अनुसारdefer , स्क्रिप्ट खत्म होने से पहले फ़ायरफ़ॉक्स के शुरुआती संस्करणों को DOMContentLoaded जोड़ूंगा ।)}

आधुनिक ब्राउज़र asyncठीक से समर्थन करते प्रतीत होते हैं , लेकिन आपको आदेशों से चलने वाली स्क्रिप्ट और संभवतः DOMContentLoaded से पहले ठीक होने की आवश्यकता है।

— Flimm
स्रोत

1

यह बूलियन विशेषता एक ब्राउज़र को इंगित करने के लिए सेट की गई है कि दस्तावेज़ के पार्स होने के बाद स्क्रिप्ट को निष्पादित किया जाना है। चूंकि यह सुविधा अभी तक अन्य सभी प्रमुख ब्राउज़रों द्वारा लागू नहीं की गई है, इसलिए लेखकों को यह नहीं मानना चाहिए कि स्क्रिप्ट का निष्पादन वास्तव में स्थगित हो जाएगा। कभी भी डफर स्क्रिप्ट से डॉक्युमेंट.राइट () न लिखें (गीको 1.9.2 के बाद से, यह डॉक्यूमेंट उड़ा देगा)। आरेख विशेषता का उपयोग स्क्रिप्ट पर नहीं किया जाना चाहिए जिसमें src विशेषता नहीं है। गीको 1.9.2 के बाद से, defer विशेषता को src विशेषता नहीं है स्क्रिप्ट पर ध्यान नहीं दिया है। हालाँकि, Gecko 1.9.1 में भी इनलाइन स्क्रिप्ट को स्थगित कर दिया जाता है, यदि डिफर विशेषता सेट की जाती है।

defer chrome, firefox, यानी 7 और Safari के साथ काम करता है

रेफरी: https://developer.mozilla.org/en-US/docs/HTML/Element/script

— एस शर्मा
स्रोत

0

डेफर विशेषता एक बूलियन विशेषता है।

जब उपस्थित होता है, तो यह निर्दिष्ट करता है कि पृष्ठ निष्पादित होने पर स्क्रिप्ट निष्पादित हो जाती है।

नोट: डिफरेंट एट्रिब्यूट केवल बाहरी स्क्रिप्ट के लिए है (केवल तभी उपयोग किया जाना चाहिए जब src विशेषता मौजूद हो)।

नोट: बाहरी स्क्रिप्ट निष्पादित किए जाने के कई तरीके हो सकते हैं:

यदि async मौजूद है: स्क्रिप्ट को पृष्ठ के बाकी हिस्सों के साथ अतुल्यकालिक रूप से निष्पादित किया जाता है (पृष्ठ निष्पादित करते समय स्क्रिप्ट निष्पादित की जाएगी) यदि async मौजूद नहीं है और defer मौजूद है: पृष्ठ निष्पादित होने पर स्क्रिप्ट निष्पादित हो जाती है यदि पृष्ठ समाप्त हो गया हो तो न तो async या defer मौजूद है: ब्राउज़र को पेज को जारी रखने से पहले स्क्रिप्ट को लाया और तुरंत निष्पादित किया जाता है

— srikanth_k
स्रोत