2012-06-15 16 views
29

मैं अपनी स्क्रिप्ट पर कुछ async विशेषताओं को डालकर अपने पृष्ठों को अनुकूलित करने का प्रयास करता हूं। ऐसा लगता है कि सभी स्क्रिप्ट लोड होने से पहले $(document).ready निष्पादित होने के बाद से मेरी जावास्क्रिप्ट तोड़ दी गई है!Async और दस्तावेज़ तैयार

मैंने देखा कि $(document).ready के बजाय $(window).load डालकर मैं अपनी समस्या का समाधान कर सकता हूं लेकिन मैं सोच रहा था कि कोई बेहतर समाधान है या नहीं। मेरे मामले में यह समाधान ट्रिगर 2 समस्याओं:

  1. मैं सभी $(document).ready बदल सकते हैं और सभी developpers बता इसे अब और का उपयोग नहीं करने के लिए
  2. के बाद सभी छवियों को लोड किए गए हैं स्क्रिप्ट निष्पादित किया जाएगा करने के लिए है। मेरी वेबसाइट में बहुत सारी भारी छवियां हैं और मुझे वास्तव में डोम तैयार होने के बाद ASAP निष्पादित करने के लिए कुछ स्क्रिप्ट की आवश्यकता है।

क्या आपके पास कुछ जादू की चाल है? शायद अंत में सभी स्क्रिप्ट डालने? async के बजाय defer का उपयोग करें?

उत्तर

26

कुछ व्यापक शोध के बाद, मैं निश्चित रूप से कह सकता हूं कि पृष्ठ के अंत में स्क्रिप्ट डालने का सबसे अच्छा अभ्यास है।

याहू मेरे साथ भी इससे सहमत हैं: http://developer.yahoo.com/performance/rules.html#js_bottom

Google इस अभ्यास के बारे में बात नहीं करते और async स्क्रिप्ट पसंद करते हैं लगता है:, https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

IMHO पृष्ठ के अंत में स्क्रिप्ट डाल async पर कई फायदे हैं/स्थगित:

  • यह सब ब्राउज़र के लिए काम करेंगे (हाँ, यहाँ तक कि आईई;))
  • आप निष्पादन आदेश की गारंटी
  • आप उपयोग करने के लिए की जरूरत नहीं है $(document).ready या $(window).load
  • अपनी छवियों को लोड किया जाता है इससे पहले कि
  • async/ठुकराने के रूप में, अपने पृष्ठ प्रदर्शित किया जाएगा आपका आलेख निष्पादित कर सकते हैं जल्दी
  • डोम तैयार घटना, सभी स्क्रिप्ट को गति प्रदान करते हैं लोड किए गए हैं
  • समस्या के बिना एक फ़ाइल में सभी js विलय

केवल दोष यह है कि मैं देख सकता हूँ कि ब्राउज़र डाउनलोड साथ में करने के लिए सक्षम नहीं होगा है (mod_pagespeed की तरह एक उपकरण के द्वारा) द्वारा अनुकूलित किया जा सकता है । इसके बजाय async/defer का उपयोग करने का एक अच्छा कारण यह है कि जब आपके पास एक स्क्रिप्ट है जो पूरी तरह से स्वतंत्र है (निष्पादन आदेश पर भरोसा करने की आवश्यकता नहीं है) और उसे किसी विशिष्ट समय पर निष्पादित करने की आवश्यकता नहीं है। उदाहरण: गूगल विश्लेषिकी।

+0

यह डीओएम में उन्हें डालने से निष्पादन की पूर्ण गारंटी नहीं देता है। यदि आपको ब्राउज़र के लिए बहुत अधिक जावास्क्रिप्ट और/या HTML मिल गया है, तो आपको इसके लिए requjs या किसी अन्य सिस्टम लोडर की आवश्यकता है। मैंने डिज़ाइन देखा जो केवल संपीड़ित जावास्क्रिप्ट के साथ काम करता था, क्योंकि यह बहुत अधिक था। पृष्ठ को स्क्रॉल करते समय यह प्रभाव के साथ बूटस्ट्रैप 3.x respsonsive विषय था। – alpham8

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