मैं अपनी परियोजनाओं में से एक के हेड सेक्शन में उपयोग की जाने वाली बाहरी स्क्रिप्ट के लिए डिफर विशेषता जोड़ने पर काम कर रहा हूं। मेरे पास एकाधिक डिफर्ड स्क्रिप्ट टैग के निष्पादन आदेश पर एक क्वेरी थी।ब्राउज़र पर डिस्क्रिप्ट स्क्रिप्ट और निष्पादन आदेश
नीचे मेरी अवलोकन कर रहे हैं में मदद मिलेगी जो हमें अपनी क्वेरी को समझने बेहतर:
के अनुसार 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 फ़ाइल भारी और छोटा हो और रेंडर करने में समय लगे।
क्या डिफर के साथ समान अनुभव में से कोई भी मेरी मदद कर सकता है? यदि कोई अन्य जानकारी की आवश्यकता है, तो कृपया मुझे बताएं।
पीएस: पृष्ठ के निचले हिस्से में स्क्रिप्ट को स्थानांतरित करने जैसे अन्य समाधान इस क्षण को कुछ नहीं देख रहे हैं।
जब आप फ़ाइलों को स्थगित करते हैं, तो उन्हें तत्व पर दिखाई देने के लिए निष्पादित करने के लिए गारंटी दी जाती है (यदि ब्राउज़र में सही ढंग से कार्यान्वित किया जाता है)। इस मुद्दे का मेरा पसंदीदा स्पष्टीकरण: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html –
@ निनो स्कोपैक मैं आपके साथ सहमत हूं। उन्हें आदेश में निष्पादित करना चाहिए। लेकिन एफएफ कभी-कभी अलग-अलग व्यवहार करता प्रतीत होता है, निष्पादन प्रारंभ आदेश समान होता है, लेकिन निष्पादन अंत क्रम समान नहीं होता है। क्रोम पर एक ही कार्यान्वयन ठीक काम करता है। अजीब। –
क्या आप एफएफ के नवीनतम संस्करण का उपयोग कर रहे हैं? –