2015-09-05 16 views
9

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

नीचे मेरी अवलोकन कर रहे हैं में मदद मिलेगी जो हमें अपनी क्वेरी को समझने बेहतर:

के अनुसार http://www.w3.org/TR/html5/scripting-1.html

आस्थगित करें विशेषता, मौजूद है तो स्क्रिप्ट जब पृष्ठ को पार्स समाप्त हो गया है निष्पादित किया जाता है

डिफर विशेषता विशेषता काम करती है। लेकिन, मैं निष्पादन आदेश पर संदिग्ध हूँ। ऐसा लगता है कि यह एफएफ और क्रोम पर अलग है।

मेरी porject के अनुसार:

<script defer="defer" src="{SERVER_PATH}/deps.js?1441452359"></script> 
<script defer="defer" src="{SERVER_PATH}/script1.js?1440067073"></script> 
<script defer="defer" src="{SERVER_PATH}/script2.js?1441451916"></script> 

यहाँ, deps.js, 120kb के आसपास (Gzipped) की भारी फ़ाइल है, जबकि, script1-3 20-50kb (Gzipped) के नियमित आकार के हैं।

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

निष्पादन आदेश का परीक्षण करने के लिए, मैंने प्रत्येक स्क्रिप्ट की पहली और आखिरी पंक्ति में console.log डाला था, उदाहरण के लिए

Execution Start: deps 
Execution Start: script1 
Execution Start: script2 
// Script Error as script1 needs deps to render completely. 
// Script Error as script2 needs deps to render completely. 
Execution End: deps 

सांत्वना उत्पादन नीचे क्रोम पर:

Execution Start: deps 
Execution End: deps 
Execution Start: script1 
Execution End: script1 
Execution Start: script2 
Execution End: script2 

हालांकि, एफएफ पर व्यवहार हमेशा की तरह ऊपर दिखाए नहीं है deps.js

console.log("Execution Start: deps"); 
// minified deps script content. 
console.log("Execution End: deps"); 

Firefox पर सांत्वना उत्पादन नीचे में । कभी-कभी यह क्रोम की तरह काम करता है। यह एक ऐसी समस्या की तरह दिखता है जो केवल फ़ायरफ़ॉक्स है। या, हो सकता है कि deps.js फ़ाइल भारी और छोटा हो और रेंडर करने में समय लगे।

क्या डिफर के साथ समान अनुभव में से कोई भी मेरी मदद कर सकता है? यदि कोई अन्य जानकारी की आवश्यकता है, तो कृपया मुझे बताएं।

पीएस: पृष्ठ के निचले हिस्से में स्क्रिप्ट को स्थानांतरित करने जैसे अन्य समाधान इस क्षण को कुछ नहीं देख रहे हैं।

+3

जब आप फ़ाइलों को स्थगित करते हैं, तो उन्हें तत्व पर दिखाई देने के लिए निष्पादित करने के लिए गारंटी दी जाती है (यदि ब्राउज़र में सही ढंग से कार्यान्वित किया जाता है)। इस मुद्दे का मेरा पसंदीदा स्पष्टीकरण: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html –

+1

@ निनो स्कोपैक मैं आपके साथ सहमत हूं। उन्हें आदेश में निष्पादित करना चाहिए। लेकिन एफएफ कभी-कभी अलग-अलग व्यवहार करता प्रतीत होता है, निष्पादन प्रारंभ आदेश समान होता है, लेकिन निष्पादन अंत क्रम समान नहीं होता है। क्रोम पर एक ही कार्यान्वयन ठीक काम करता है। अजीब। –

+0

क्या आप एफएफ के नवीनतम संस्करण का उपयोग कर रहे हैं? –

उत्तर

4

HTML5.0 कल्पना यह कहते हैं: तत्व एक src विशेषता है

हैं, और तत्व एक आस्थगित करें विशेषता है, और तत्व के रूप में "पार्सर वाली", और तत्व करता है चिह्नित किया गया है एसिंक विशेषता नहीं है

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

फ़ंक्शन कतार पर नेटवर्किंग कार्य स्रोत स्थान प्राप्त करने के बाद कार्य करने वाले एल्गोरिदम पूर्ण होने के बाद तत्व को "पार्सर-निष्पादित होने के लिए तैयार" ध्वज सेट करना होगा। पार्सर स्क्रिप्ट निष्पादित करने में संभाल लेंगे।

तो यह कहता है कि यह स्क्रिप्ट निष्पादन को तब तक रोकता है जब तक संबंधित Document पार्स नहीं किया जाता है, यह भी कहता है कि इसे सूची में धकेल दिया गया है। इसलिए सूची का क्रम होना चाहिए क्योंकि स्क्रिप्ट ऑर्डर को पार्स-डाला जा रहा है।

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

मुझे स्पेस में जो नहीं मिला वह दस्तावेज़ पार्सिंग के बाद स्क्रिप्ट निष्पादन को कवर करने वाला मामला है। क्या यह सूची क्रम में स्क्रिप्ट निष्पादित करता रहता है क्योंकि वे "पार्सर-निष्पादित होने के लिए तैयार" बन जाते हैं? या यह तब तक इंतजार करेगा जब तक सूची में सभी स्क्रिप्ट "पार्सर निष्पादित होने के लिए तैयार नहीं हैं" फिर उन्हें निष्पादित करें।

युक्ति (चरण 15): http://www.w3.org/TR/html5/scripting-1.html#script-processing-src-prepare

+0

इससे यह ध्वनि लगता है कि उन्हें क्रम में निष्पादित किया जाता है। यदि यह सभी को डाउनलोड करने की प्रतीक्षा करता है या नहीं, तो कार्यान्वयन परिभाषित किया जा सकता है, और ऑर्डर करने के लिए जरूरी होने तक इंतजार नहीं करना बेहतर कार्यान्वयन संभव है? –

+0

मैं मानता हूं कि यह बेहतर कार्यान्वयन की संभावना है। जब मैंने यह उत्तर लिखा था तो ब्राउजर के बीच संभावित अलग-अलग व्यवहार की ओर इशारा करते हुए कि उन्हें कैसे निष्पादित किया गया था। हालांकि यह संभवतः मामला नहीं था। – MinusFour

0

मैं यह वास्तव में संभव नहीं है जब तक कि कहेंगे "निष्पादन अंत" लॉग की तुलना में "निष्पादन प्रारंभ" लॉग अलग घटना पाश में होता है।

क्या आप हमें इस पर सुनिश्चित कर सकते हैं? अन्यथा इसका मतलब यह होगा कि फायरिक्स यहां कुछ बहुप्रचारित करता है, और जैसा कि हम जानते हैं, उसके लिए जेएस में कोई समर्थन नहीं है।

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