सभी जावास्क्रिप्ट को </ body> से पहले शामिल करें

Question

क्या किसी को पता है कि कैसे Magento के जेएस स्क्रिप्ट टैग के सभी है जैसे <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>समापन से पहले प्रस्तुत करना </body>?

मैंने एक बार पहले भी यह कोशिश की है, लेकिन मुझे एक त्रुटि दी गई थी जो मुझे लगता है कि addJS पद्धति की तर्ज पर उपलब्ध नहीं थी जहां मैंने इसका उपयोग किया था, संभवतः संदर्भ पाद में।

Comments

एक चुटकी नमक के साथ GTMetix और YSlow की सलाह लें। जिस समय आप इसमें निवेश करते हैं, वह प्रदर्शन में उल्लेखनीय वृद्धि नहीं करेगा और लगभग निश्चित रूप से आपके कोड (वसा को अलग करना) या बस एक बेहतर / तेज़ होस्ट ढूंढने में बेहतर खर्च होगा।

— बेन लेसानी - सोनासी

@sonassi एक वैध बिंदु है, JMax के जवाब को लागू करने के लिए आधे घंटे का समय कुछ भी नुकसान नहीं पहुंचा सकता है और फ्रंट-एंड परफॉर्मेंस एन्हांसमेंट के चयन का एक हिस्सा है जिसे एक बेस थीम में शामिल किया जा सकता है।

— ग्लोक

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

— बेन लेसानी - सोनासी

@sonassi यह कहने जैसा है कि आपको पहली बार आने वाले उपयोगकर्ताओं को अनदेखा करना चाहिए क्योंकि उनके पास जल्द ही प्राइम कैश होगा। बेशक वहाँ PHP संवर्द्धन कर रहे हैं और किया जाना चाहिए, लेकिन एक फ्रंट-एंडर के रूप में, यह मेरी चिंता का विषय है कि मैं कैसे न केवल परिसंपत्ति वितरण को गति दे सकता हूं, बल्कि उपयोगकर्ता के लिए लोड समय और लिपियों के निचले हिस्से को भी समझा जा सकता है ब्लॉकिंग रेंडरिंग को रोकने के लिए पेज उस रणनीति का हिस्सा है। आधुनिक ब्राउज़र ब्लॉक किए बिना स्क्रिप्ट को संभाल सकते हैं, लेकिन आप जानते हैं कि मैं उस मिलीसेकंड == पाउंड ईकॉमर्स में। बेशक, यह आम तौर पर स्क्रिप्ट लोडर के साथ एक मूट बिंदु है।

— ग्लो

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

— STW

Answer 1

यह आपके अनुरोध पर निर्भर करता है। उदाहरण के लिए, अंत में, मुझे HomepageMagento स्टोर से सभी प्रोटोटाइप स्क्रिप्ट हटा दिए गए थे, जो मुझे किसी भी समस्या का सामना नहीं करना पड़ा। लेकिन जैसा कि मैंने कहा, यह आपके विषय, एक्सटेंशन आदि पर निर्भर करता है।

स्क्रिप्ट को स्थानांतरित करने के लिए:

page.xmlअपने विषय की निम्नलिखित पंक्ति ज्ञात कीजिए

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

और निम्नलिखित को पहले डालें:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

Magento 1.9 के लिए यह प्रयोग करें:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

ऐप / डिज़ाइन / फ्रंटएंड / [पैकेज] / [थीम] /template/page/html/jsfooter.phtml में टेम्प्लेट फ़ाइल बनाएं और निम्नलिखित डालें

<?php echo $this->getCssJsHtml() ?>

</body>टैग बंद करने से ठीक पहले अपने टेम्पलेट में नीचे जोड़ें ।

<?php echo $this->getChildHtml('jsfooter') ?>

Comments

क्या आपको यकीन core/text_listहै कि कोई addJs()विधि है?

— एलेक्स

आप सही हैं @ एलेक्स, मेरे पास एक गलती थी, इसके बारे में क्षमा करें!

— ओयूयूज़ ikलीकडेमिर

चीयर्स मैन, यह काम करता है। इस कार्य को प्राप्त करने के बाद मैं जो कहना चाहता था, वह यह है कि जब आपके पास जेएस मर्जिंग चल रहा हो, तो यह वैसे भी इसे नकार देता है क्योंकि मर्ज की गई फाइल फिर सिर पर आ जाती है, लेकिन वास्तव में, मैगेंटो ने मेरे परीक्षण में क्या किया है दो मर्ज किए गए फ़ाइल बनाएँ, प्रत्येक पृष्ठ के लिए एक / html_head ब्लॉक और पाद लेख के लिए मर्ज की गई फ़ाइल को '</ body>' से पहले जोड़ा जाता है। यह संभवतः उपयोगी है। मेरे पास जेएस विलय और jQuery के साथ कुछ मुद्दे हैं जो jQuery.noConflict को शामिल नहीं करने के लिए नीचे था। अब मेरे पास जेएस मर्जिंग है जो '</ body>' से पहले js का काम कर सकता है।

— मार्क वेस्टन

Answer 2

टैग को ले जाने में दो समस्याएं हैं। सबसे बड़ी समस्या यह है कि किसी कारण से Magento ने JS को बहुत अधिक इंजेक्ट किया जो सीधे <body/>टैग में प्रोटोटाइप पर निर्भर है । दस्तावेज़ के अंत में लिपियों को स्थानांतरित करना (हालांकि लोड समय के लिए अच्छा है), Magento में बहुत सारे पृष्ठों को तोड़ देगा।

दूसरी समस्या वास्तव में यह कर रही है। <move />टैग, या समान कार्यक्षमता प्रतीत नहीं होती है । मैंने अपने द्वारा बनाई गई कस्टम स्क्रिप्ट के लिए क्या किया है, इस तरह से स्क्रिप्ट जोड़ रहा है। यह अधिक निरर्थक है, लेकिन यह काम करता है:

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>

Comments

@ Oğuz ikelikdemir ने सही लिखा क्योंकि वह अधिक विस्तृत उत्तर की आपूर्ति करता है जो काम करता है, लेकिन आपने मूल रूप से एक ही जवाब दिया है इसलिए बहुत धन्यवाद कि यह काम करता है।

— मार्क वेस्टन

किसी कारण के लिए आप एक जावास्क्रिप्ट फ्रेमवर्क का उपयोग कर रहे हैं, वास्तव में कई। उन्हें उचित पेज रेंडरिंग के लिए जल्दी निवासी होना चाहिए। शरीर के अंत से पहले कुछ javascripts को शामिल करने के कारण हैं। यदि आपको यह समझ में नहीं आता है और आँख बंद करके यह सब नीचे की ओर कर रहे हैं, तो आप कार्गो पंथ प्रोग्रामिंग में संलग्न हैं। डमी रेडियो और हेडसेट्स के साथ थोड़ा शेड सेट करना मैगेंटो के साथ बहुत बार किया जाता है और कभी-कभी ऐसे लोगों द्वारा भी किया जाता है जिन्हें वेब डेवलपर माना जाता है। कुछ सामान ठीक उसी जगह का है जहाँ उसे रखा गया था।

— फियास्को लैब्स

Answer 3

Magento 1.x में यह एक मूर्खतापूर्ण कार्य है। मैगेंटो में टेम्प्लेट फाइलों में बहुत सारी इनलाइन स्क्रिप्ट्स होती हैं, जो अगर आप जेएस फाइलों को इन से हटा दें तो वे टूट जाएंगी <head>। Magento 2 में संभावित रूप से, यह स्थिति बदल जाएगी, लेकिन यह प्रोटोटाइप और jQuery का विरोध कर रहा है क्योंकि Magento प्रोटोटाइप से दूर चला जाता है।

अन्य लिपियों के लिए, आपको उन्हें </body>तत्व से पहले रखना चाहिए । मैंने Magento के <action method="addJS|addItem">XML को अनदेखा करना और प्रत्येक स्क्रिप्ट के लिए एक नई टेम्पलेट फ़ाइल बनाना उपयोगी पाया है , जिसमें एक सादा HTML स्क्रिप्ट संदर्भ शामिल है:

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

फिर आप इस टेम्पलेट फ़ाइल को कहीं भी एम्बेड कर सकते हैं (और फिर भी / आदेश को नियंत्रित करने के लिए पहले / बाद का उपयोग करें) जैसे:

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />

Answer 4

बाहरी जावास्क्रिप्ट को नीचे ले जाना ज्यादातर मामलों में पर्याप्त नहीं है। यदि आप इनलाइन जावास्क्रिप्ट के साथ किसी भी टेम्प्लेट का उपयोग करते हैं, जैसे कि डिफ़ॉल्ट थीम में, तो आपको इन पर अमल करने में देरी करनी होगी, जब तक कि सभी निर्भरता (प्रोटोटाइप, js, varien.js, ...) लोड नहीं हो जाती।

एक तरीका यह है कि <script>प्रेक्षक का उपयोग करके प्रदान किए गए ब्लॉकों से सभी इनलाइन तत्वों को निकाला जाए http_response_send_beforeऔर बाहरी स्क्रिप्ट के बाद उन्हें दाईं ओर ले जाया जाए। जब आप इस पर होते हैं, तो आप इनलाइन ही नहीं, सभी स्क्रिप्ट तत्वों को स्थानांतरित कर सकते हैं। यह आपको लेआउट मॉडल के माध्यम से उन्हें स्थानांतरित करने की परेशानी से बचाता है, जो स्पष्ट रूप से Magento द्वारा लक्षित नहीं था।

टॉम राबर्टशॉ ने एक एक्सटेंशन बनाया जो ठीक यही करता है, एक एकल पर्यवेक्षक के साथ जो नियमित अभिव्यक्ति का उपयोग करके प्रतिक्रिया HTML को बदलता है: https://github.com/bobbyshaw/magento-footer-js

वह core_block_abstract_to_html_afterघटना का उपयोग करता है लेकिन केवल तभी कार्रवाई करता है जब वर्तमान ब्लॉक रूट ब्लॉक होता है। इसका मतलब है, पर्यवेक्षक को अधिक बार कहा जाता है, लेकिन इसे कुछ हद तक ब्लॉक कैशिंग का लाभ उठाना चाहिए।

Comments

ओबीसी कार्ट के पेमेंट पैनल को छोड़कर, रॉबर्टशॉ एक्सटेंशन पूरी साइट पर वास्तव में अच्छी तरह से काम करता है। पूरी तरह से पैनल को खाली करता है। मुझे लगता है कि यह पेमेंट गेटवे सत्यापन स्क्रिप्ट है। यह बंद </body>टैग से पहले सब कुछ नीचे तक ले जाता है ।

— Fiasco Labs

Answer 5

मैं आपको अपने जावास्क्रिप्ट (और सीएसएस) को अनुकूलित करने और Google पेजस्पीड इनसाइट रैंकिंग में सुधार करने में मदद करने के लिए मीडियाॉक्स पेजस्पीड मॉड्यूल की अत्यधिक अनुशंसा करता हूं।

यह Magento द्वारा HTML आउटपुट पार्स करके और फिर HTML कोड के नीचे जावास्क्रिप्ट को स्थानांतरित करने के लिए कोड पर कट और पेस्ट क्रिया का प्रदर्शन करता है। प्रक्रिया तेज है, लेकिन HTML परिवर्तनों को कैश करने के लिए एक पूर्ण पृष्ठ कैश के साथ संयोजन में उपयोग किया जाता है।

यह मॉड्यूल कैसे काम करता है इस बारे में अधिक जानकारी और यहां पेजपेड रैंक को बेहतर बनाने में आपकी मदद कर सकता है:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

Answer 6

Magento v1.6 + (पुराने संस्करणों में परीक्षण करने की आवश्यकता) के लिए;

1 - page/html/footer/extras.phtmlइस सामग्री के साथ एक टेम्पलेट फ़ाइल बनाएँ :

<?php echo $this->getCssJsHtml() ?>

2 - इस HTML नोड को अपने लेआउट xml में जोड़ें:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - यही है!

Answer 7

इस अन्य स्क्रिप्ट (उत्पाद / सूची.phtml में) के साथ एक समस्या के कारण <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> मुझे अपने पृष्ठ के अंत में कुछ JS स्थानांतरित करना पड़ा।

मैं वह काम करने में सक्षम नहीं था जो काम के ऊपर इंगित किया गया है इसलिए मुझे प्राप्त करने का एक और तरीका मिल गया है:

मैं Mage/page/Block/Html/Footer.php controllerउसी पथ के साथ इसे पुनः बनाकर ओवरराइड करता हूं app/local folder।

यदि मौजूद नहीं है, तो यहां पूर्ण पथ बनाया जाएगा:

एप्लिकेशन / स्थानीय / दाना / पेज / ब्लॉक / html / footer.php

इस फ़ाइल में, मैं Head.php से फ़ंक्शंस जोड़ता हूं जो Magento के कोर (यानी Mage / पृष्ठ / ब्लॉक / Html / Head.php) के एक ही फ़ोल्डर में पाया जा सकता है।

कार्य करने के लिए आपको जो कार्य करने की आवश्यकता होती है, वे हैं (जाहिर है कि पूर्ण कार्य, यहां मैं केवल संक्षिप्त नाम रखने का संकेत देता हूं):

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

फिर मैं अपने कस्टम (मेरे विषय में एक) पृष्ठ / html / footer.phtml को इसके लिए कॉल करता हूं:

<?php echo $this->getCssJsHtml() ?>

अंत में, मैं अब अपने फूटर में जेएस को किसी भी लेआउट में कॉल करके जोड़ सकता हूं

<action method="addJs"><script>yourscript.js</script></action>

Comments

दिलचस्प दृष्टिकोण, लेकिन यह Magento आर्किटेक्चर के लिए एक बहुत ही गलत तरीका है।

— बेंच

github.com/pratikmage/magento-defer-javascript

— प्रतिक