2016-04-28 15 views
5

Google मानचित्र जावास्क्रिप्ट कुछ भारी डोम हेरफेर करता है। फिर भी, the fine docsdefer फ़्लैग से लोड करने के लिए सुझाव देते हैं:Google मानचित्र जावास्क्रिप्ट के साथ डिफर का उपयोग क्यों करें?

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> 

क्यों defer झंडा एक स्क्रिप्ट है कि डोम जोड़तोड़ प्रदर्शन के लिए सुझाव दिया जाएगा? मैं defer ध्वज के बारे में और Google मानचित्र API के बारे में जानने के लिए कहता हूं क्योंकि मुझे लगता है कि उनमें से कोई एक क्या कर रहा है इसके बारे में गलतफहमी है।

उत्तर

12

आम तौर पर, script टैग ब्राउज़र को HTML को पार्स करने, स्क्रिप्ट लाने, इसे चलाने के लिए कहता है, और केवल तब HTML को पार्स करना जारी रखता है। ऐसा इसलिए है क्योंकि स्क्रिप्ट कोड HTML टोकन स्ट्रीम में आउटपुट के लिए document.write का उपयोग कर सकता है।

async and defer ब्राउज़र को यह बताने के लिए दोनों तंत्र हैं कि आगे बढ़ना ठीक है और स्क्रिप्ट फ़ाइल को डाउनलोड करने के साथ समानांतर में HTML को पार्स करना जारी रखें, और बाद में स्क्रिप्ट फ़ाइल को चलाने के लिए, तुरंत नहीं।

हालांकि वे थोड़ा अलग हैं, हालांकि; ("क्लासिक" स्क्रिप्ट के लिए ऊपर लिंक कल्पना में

enter image description here

पूर्ण विवरण, लेकिन संक्षेप में, प्रकार: HTML कल्पना की क्या-डब्ल्यू जी संस्करण की the script section से इस चित्र मतभेद envisioning के लिए उपयोगी है आप के लिए इस्तेमाल कर रहे हैं, लेकिन मॉड्यूल स्क्रिप्ट जल्द ही आ रहे):

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

क्यों defer झंडा एक स्क्रिप्ट है कि डोम जोड़तोड़ प्रदर्शन के लिए सुझाव दिया जाएगा?

दो कारण हैं:

  1. यह जबकि स्क्रिप्ट डाउनलोड किया जाता है पार्स जारी रखने के लिए अनुमति देता है, और
  2. यह स्क्रिप्ट जब तक पार्स पूरा हो गया है नहीं चला है का मतलब है।

आप defer उपयोग नहीं किया है और आप अपने script टैग डाले जाने बेहतर, का उपयोग कर defer में मदद करता है एपीआई स्क्रिप्ट डोम के निर्माण से पहले स्क्रिप्ट यह हेरफेर करने के लिए कोशिश करता है ब्राउज़र खत्म की अनुमति से ठीक से व्यवहार करते हैं।

लोगों का एक बहुत अभी भी दस्तावेज़ के head खंड में script टैग रखा, भले ही उस आम तौर पर उन्हें जब तक आप defer (या async) का उपयोग डाल करने के लिए सबसे खराब जगह है। ज्यादातर मामलों में, सबसे अच्छी जगह (जब तक आप कुछ और करने का कोई कारण है) बहुत अंत में, यह है कि एक तो) आपकी साइट जल्दी से प्रस्तुत हुई है, स्क्रिप्ट का इंतजार किए बिना है बस से पहले बंद करने </body> टैग; और बी) डीओएम पूरी तरह से बनाया गया है इससे पहले कि आप इसे कुशल बनाने की कोशिश करें। defer की सिफारिश करने से उन्हें HTML में बहुत जल्दी script टैग डालने वाले लोगों से समर्थन परेशानी बचाई जा सकती है।

+0

मुझे लगता है कि मैं देख रहा हूँ। तो ऐसा लगता है कि [लेख] (http://www.sitepoint.com/non-blocking-async-defer/) जिसे मैंने डिफर और एसिंक गुणों को समझने के लिए पढ़ा है ** ** पूरी तरह से गलत ** है, और यहां तक ​​कि ** spec ** contradicts। शर्मिंदा है कि यह बहुत अधिक है [Google पर अत्यधिक] (https://google.com/?q=javascript+defer+async)। – dotancohen

+0

@ डॉटनकोहेन: नहीं, यह सही है, यह थोड़ा अस्पष्ट है जब यह कहता है "... में कोई दस्तावेज़ नहीं है। लिखना या डोम संशोधन नैस्टनेस:"। यह * क्या कहना चाहिए "कुछ ऐसा है ..." में कोई दस्तावेज़ नहीं है। लिखने या डीओएम संशोधनों को पार्सर के साथ इनलाइन चलाने के लिए कहा जाता है। " (चूंकि ऐसी अन्य चीजें हैं जो आप कर सकते हैं, न केवल 'document.write', जो आपके स्क्रिप्ट को चलाने के लिए प्रतीक्षा कर रहे पार्सर पर भरोसा करेगी)।इसे इंप्रेशन नहीं दिया जाना चाहिए ** सभी ** डोम संशोधन तालिका से बाहर थे। –

2

Google मानचित्र उदाहरण async और defer झंडे दोनों का उपयोग करते हैं।

  • async झंडा स्क्रिप्ट डोम पार्स करने के लिए समानांतर में लोड करने के लिए, और के रूप में एपीआई के लिए तैयार है के रूप में जल्द अमल करने के लिए अनुमति देता है।
  • defer ध्वज स्क्रिप्ट को DOM पार्सिंग के समानांतर में लोड करने की अनुमति देता है, लेकिन गारंटी देता है कि डोम समाप्त होने तक स्क्रिप्ट निष्पादित नहीं होगी।

async आधुनिक HTML5 ब्राउज़र द्वारा समर्थित है, जबकि defer समर्थन सार्वभौमिक है। टैग एक साथ इस्तेमाल कर रहे हैं, defer सिर्फ पुराने ब्राउज़र के लिए फ़ॉलबैक है, और अगर async समर्थित है नजरअंदाज कर दिया जाएगा।

इन सरल उदाहरणों में, async या defer काम करेगा, हालांकि न तो आवश्यक है। इस मामले में यह केवल प्रदर्शन के लिए है।

Refs:
Speed up Google Maps(and everything else) with async & defer
async vs defer attributes - Growing with the Web

संबंधित मुद्दे