Tüm Javascript içeriklerini önceye taşı </body>

35

Magento'nun JS betik etiketlerinin hepsinin nasıl <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>kapatılacağını bilen var </body>mı?

Bunu daha önce bir kez denedim, ancak addJS yönteminin satırları boyunca kullandığım ve muhtemelen referans altbilgisinde kullanamadığım bir hata verildi.

— Mark Weston
kaynak

4

Bir tutam tuzla GTMetix ve YSlow'un tavsiyesine uyun. Buna harcadığınız zaman, performansta gözle görülür bir artışa neden olmayacak ve neredeyse kesinlikle kodunuzu belirlemek (yağları çıkarmak) veya sadece daha iyi / daha hızlı bir ana bilgisayar bulmak için harcanacak.

— Ben Lessani - Sonassi,

1

@sonassi Geçerli bir nokta olsa da, JMax'ın cevabını uygulamak için yarım saat almak hiçbir şeye zarar vermeyecek ve temel bir temaya dahil edilebilecek bir dizi ön uç performans geliştirmesinin bir parçası olacak.

— Glo

1

@Glo Hepimiz performans iyileştirmeleri için varız. Ancak, bunun getireceği “yarar” basitçe mevcut değildir. İlk sayfa yükleme, JS'nin yükleneceği ve bundan sonra tarayıcı önbelleğinden sunulduğu tek zamandır. İlk yükte engelleme, PHP sürümünün JS dağıtımından daha yavaş olması muhtemeldir; ve yine de, sunucu geçişi veya kullanıcıların son mil bağlantısı, gerçekte ne kadar sürdüğü konusunda daha büyük bir rol oynayacaktır.

— Ben Lessani - Sonassi,

1

@sonassi Bu, ilk ziyaret eden kullanıcıları görmezden gelmeniz gerektiğini söylüyor, çünkü yakında kullanıma hazır bir önbellekleri olacak. Tabii ki gerçekleştirilebilecek ve yapılması gereken PHP geliştirmeleri var, ancak bir ön uç olarak, sadece varlık teslimatını nasıl hızlandıracağımı değil, aynı zamanda kullanıcı için algılanan yükleme süresini ve altındaki komut dosyalarını yükleme konusunda endişelenmek benim işim. Blokaj oluşturmayı önleyen sayfa bu stratejinin bir parçasıdır. Modern tarayıcılar komut dosyalarını engellemeden kaldırabilir ancak benim kadar iyi biliyorsunuz ki ben de o milisaniye == ££ e-ticarette. Tabii ki, bu genellikle script yükleyicileri ile bir tartışma noktasıdır.

— Glo,

@Glo ile birlikteyim, küçük bir verimlilik ayarı parçası ve gece ve gündüz farkını yaratmayabilir, ancak göz ardı edilmemesi gerekir. İlk kez gelen ziyaretçiler için ekranda hızlı bir şekilde içerik almak önemlidir.

— STW

22

İsteğinize bağlıdır. Örneğin, son olarak, Homepageherhangi bir sorunla karşılaşmadığım tüm Prototip komut dosyalarını Magento mağazasından kaldırmıştım . Ama dediğim gibi, temanıza, uzantılarınıza vb. Bağlı.

Komut dosyasını taşımak için:

Aşağıdaki satırı bulun page.xmlTemanızın

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

Ve hemen önce aşağıdakileri ekleyin:

<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 için şunu kullanın:

<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>

Şablon dosyasını app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml dizininde oluşturun ve aşağıdakileri koyun

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

</body>Etiketi kapatmadan hemen önce şablonunuza ekleyin .

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

— Oğuz Çelikdemir
kaynak

core/text_listbir addJs()metodu olduğuna emin misin ?

— Alex

haklısın @Alex, yanıldım, bunun için üzgünüm!

— Oğuz Çelikdemir

Şerefe dostum, bu işe yarıyor. Aslında bu çalışmaya başladıktan sonra söylemek istediğim şey, eğer JS birleştirmeye çalıştığınızda, birleştirilmiş dosya daha sonra başa eklendiği için bunu yine de olumsuzlar. Fakat aslında Magento'nun testimde yaptığı gibi. her sayfa / html_head bloğu için bir tane olmak üzere iki birleştirilmiş dosya oluşturun ve js'nin altbilgisi için birleştirilmiş dosya '</body>' dan önce eklenir. Bu potansiyel olarak yararlıdır. JS birleştirme ve jQuery.noConflict dahil değil aşağı oldu jQuery ile bazı sorunları yaşadım. Şimdi JS'leri js ile çalışarak birleştirmeden önce '</body>' faydalı olabilir.

— Mark Weston

20

Etiketi taşımanın iki sorunu var. En büyük sorun, bir nedenden ötürü, Magento'nun prototiplere bağlı olan birçok <body/>etiketi doğrudan etikete enjekte etmesidir . Komut dosyalarını belgenin sonuna taşıma (yükleme süreleri için iyi olsa da), Magento'da bir çok sayfayı kıracak.

Diğer sorun aslında yapıyor. <move />Etiket veya benzeri bir işlevsellik görünmüyor . Oluşturduğum özel komut dosyaları için yaptığım şey, böyle komut dosyaları eklemek. Daha fazla gereksiz, ancak işe yarıyor:

<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>

— Joseph SwiftOtter'da
kaynak

@ Oğuz Çelikdemir doğru yazdı çünkü işe yarayan daha detaylı cevabı verdi, ama aynı cevabı verdiniz, bu yüzden işe yaradığı için çok teşekkürler.

— Mark Weston

2

Bazı nedenlerden dolayı , javascript çerçevesi kullanıyorsunuz, aslında birkaç tanesi. Düzgün sayfa görüntülemesi için erken oturmaları gerekir. Vücudun sona ermesinden önce bazı javascriptleri eklemek için sebepler vardır. Bunu anlamadıysanız ve körü körüne körüklüyorsanız, kargo kültü programlamasına katılıyorsunuz. Sahte bir telsiz ile küçük bir kulübe kurarak kulaklıklar Magento ile ve bazen de web geliştiricileri olması gereken kişiler tarafından çokça yapılır. Bazı şeyler tam olarak yerleştirildiği yere ait.

— Fiasco Labs

15

Magento 1.x'de bu bir aptalın işidir. Magento’daki şablon dosyalarının üzerinde bulunan çok sayıda satır içi komut dosyası vardır <head>. Potansiyel olarak Magento 2'de, bu durum değişecektir, ancak Magento Prototip'ten uzaklaştıkça değişmeyen Prototip ve jQuery'dir.

Diğer komut dosyaları için, onları </body>öğenin önüne koymalısınız. Magento'nun XML'sini yok saymayı <action method="addJS|addItem">ve her komut dosyası için basit bir HTML komut dosyası referansı içeren basit bir şablon dosyası oluşturmayı yararlı buldum :

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

Sonra bu şablon dosyasını herhangi bir yere gömebilirsiniz (ve sırayı kontrol etmek için önce / sonra kullanabilirsiniz) şöyle:

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

— Brendan Falkowski
kaynak

6

Harici JavaScript'i en alta taşımak çoğu durumda yeterli değildir. Varsayılan temalarda olduğu gibi, satır içi JavaScript içeren şablonlar kullanıyorsanız, tüm bağımlılıklar (prototype.js, varien.js, ...) yükleninceye kadar bunların yürütülmesini geciktirmeniz gerekir.

Bir yaklaşım, <script>bir gözlemci kullanarak tüm satır içi öğelerini işlenen bloklardan çıkarmak http_response_send_beforeve dış komut dosyalarından hemen sonra bunları sonuna kadar taşımaktır. Siz onun yanındayken, tüm satır öğelerini yalnızca satır içi değil taşıyabilirsiniz. Bu, onları Magento tarafından açıkça tasarlanmadığı düzen modeliyle taşıma zorluğundan kurtarır.

Tom Robertshaw, tam olarak bunu yapan ve normal ifadeleri kullanarak yanıt HTML’sini değiştiren tek bir gözlemciyle birlikte bir uzantı oluşturdu: https://github.com/bobbyshaw/magento-footer-js

core_block_abstract_to_html_afterEtkinliği kullanır, ancak yalnızca geçerli blok kök blok ise eylemde bulunur. Bu, gözlemciye daha sık denilen anlamına gelir, ancak bir dereceye kadar blok önbellekleme kaldıraç gerekir.

— Fabian Schmengler
kaynak

Robertshaw uzantısı, OPC arabasının ödeme paneli hariç, site genelinde gerçekten iyi çalışıyor. Paneli tamamen boşaltır. Sanırım Payment Gateway doğrulama betiği. Her şeyi kapanış </body>etiketinden hemen önce en altına taşır .

— Fiasco Labs

2

Javascript'inizi (ve css) optimize etmenize ve google pagespeed içgörü sıralamasını iyileştirmenize yardımcı olmak için mediarox pagespeed modülünü tavsiye ederim.

Javento'yu html kodunun altına taşımak için html çıktısının Magento tarafından ayrıştırılması ve ardından kod üzerinde bir kes ve yapıştır işlemi yapılmasıyla çalışır. İşlem hızlıdır, ancak en iyi html değişikliklerini önbelleğe almak için tam sayfa önbellekle birlikte kullanılır.

Bu modülün nasıl çalıştığı hakkında daha fazla bilgi ve burada sayfa hızını artırmanıza yardımcı olabilir:

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

— paj
kaynak

-1

Magento v1.6 + için (eski sürümlerde test etmeniz gerekir);

1 - page/html/footer/extras.phtmlBu içeriğe sahip bir şablon dosyası oluşturun :

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

2 - Bu html düğümünü xml mizanpajınıza ekleyin:

<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 - İşte bu!

— Marcio Maciel
kaynak

-2

Bu diğer komut dosyasındaki bir sorun nedeniyle (product / list.phtml dosyasında) sayfamın <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> sonunda bazı JS'leri taşımak zorunda kaldım.

Yukarıda belirtilenleri yapamadım, bu yüzden başarmanın başka bir yolunu buldum:

Mage/page/Block/Html/Footer.php controllerAynı yolu ile yeniden oluşturarak geçersiz kılar app/local folder.

Var değilse yaratılacak tam yol:

Uygulamanın / yerel / Büyücü / sayfa / Blok / Html / footer.php

Bu dosyaya, Magento'nun çekirdeğinin aynı klasöründe bulunabilecek Head.php işlevlerini ekledim (örn. Mage / sayfa / Blok / Html / Head.php).

Çalışmasını sağlamak için ihtiyacınız olan işlevler şunlardır (açıkçası tam işlev, burada sadece özlü kalmam gereken adı belirtiyorum):

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)
{...}

Sonra benim özel (benim temamda olan) sayfasına / html / footer.phtml bu çağrıyı eklerim:

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

Sonunda, artık herhangi bir düzende arayarak altbilgime JS ekleyebilirim.

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

— twi_cy
kaynak

İlginç bir yaklaşım, ancak bu Magento mimarisi için çok, çok yanlış bir yaklaşım.

— Benmarks

github.com/pratikmage/magento-defer-javascript

— Pratik