Pindahkan semua Javascript ke sebelum </body>

35

Adakah yang tahu cara membuat semua tag skrip JS Magento, mis., <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>Render sebelum penutupan </body>?

Saya sudah pernah mencoba ini sebelumnya, tetapi saya diberi kesalahan yang menurut saya sejalan dengan metode addJS yang tidak tersedia di mana saya menggunakannya, mungkin dalam referensi footer.

magento-1 performance theme layout javascript Mark Weston
sumber
4
Ambil rekomendasi GTMetix dan YSlow dengan sedikit garam. Waktu yang Anda habiskan untuk berinvestasi dalam hal ini tidak akan mendapatkan peningkatan yang nyata dalam kinerja dan hampir pasti akan lebih baik dihabiskan untuk membuat profil kode Anda (menghilangkan lemak) atau hanya mencari host yang lebih baik / lebih cepat.
Ben Lessani - Sonassi
1
@sonassi Sementara poin yang valid, mengambil setengah jam untuk mengimplementasikan jawaban JMax tidak akan membahayakan apa pun dan merupakan bagian dari pilihan peningkatan kinerja front-end yang dapat dimasukkan ke dalam tema dasar.
Glo
1
@ Selamat Kita semua untuk peningkatan kinerja. Tetapi "manfaat" yang akan dihasilkan ini sama sekali tidak ada. Pemuatan halaman pertama adalah satu-satunya waktu JS akan dimuat dan setelah itu disajikan dari cache browser. Memblokir pada muatan awal jauh lebih mungkin untuk menghasilkan PHP lambat daripada pengiriman JS; dan bahkan tetap saja, transit server atau konektivitas pengguna jarak tempuh terakhir akan memainkan peran yang lebih besar dalam berapa lama yang diperlukan untuk benar-benar melakukan pull-down.
Ben Lessani - Sonassi
1
@sonassi Itu seperti mengatakan bahwa Anda harus mengabaikan pengguna kunjungan pertama karena mereka akan memiliki cache prima segera. Tentu saja ada peningkatan PHP yang dapat dan harus dilakukan tetapi, sebagai front-ender, adalah tugas saya untuk khawatir tentang bagaimana saya tidak hanya dapat mempercepat pengiriman aset tetapi juga mempersepsikan waktu muat untuk pengguna dan memuat skrip di bagian bawah halaman untuk mencegah pemblokiran render adalah bagian dari strategi itu. Browser modern dapat menangani skrip tanpa memblokir tetapi Anda juga tahu bahwa milidetik == £ £ di e-niaga. Tentu saja, ini umumnya merupakan titik diperdebatkan dengan skrip loader.
Glo
Saya dengan @ Glo, ini adalah sedikit penyetelan efisiensi, dan mungkin tidak membuat perbedaan malam dan siang, tetapi seharusnya tidak diabaikan. Mendapatkan konten di layar dengan cepat untuk pengunjung pertama kali adalah penting.
STW

Jawaban:

22

Itu tergantung permintaan Anda. Sebagai contoh, terakhir, saya telah menghapus semua skrip Prototipe dari Homepagetoko Magento yang tidak saya hadapi masalah. Tapi seperti yang saya katakan, itu tergantung pada tema Anda, ekstensi dll.

Untuk memindahkan skrip:

Temukan baris berikut dalam page.xmltema Anda

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

Dan masukkan yang berikut sebelum:

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

Untuk Magento 1.9 gunakan ini:

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

Buat file templat di app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml dan masukkan yang berikut ini

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

Tambahkan di bawah ini di templat Anda tepat sebelum </body>tag penutup .

<?php echo $this->getChildHtml('jsfooter') ?>
Oğuz Çelikdemir
sumber
Anda yakin core/text_listpunya addJs()metode?
Alex
Anda benar @Alex, saya salah, maaf soal itu!
Oğuz Çelikdemir
Cheers man, ini berhasil. Apa yang sebenarnya saya harapkan harus katakan setelah mendapatkan ini berfungsi adalah bahwa ketika Anda memiliki JS penggabungan berjalan, itu tetap meniadakan ini karena file yang digabungkan kemudian ditambahkan ke kepala, tetapi sebenarnya, apa yang tampaknya dilakukan Magento dalam pengujian saya adalah buat dua file yang digabungkan, satu untuk setiap blok halaman / html_head dan file yang digabung untuk footer js ditambahkan sebelum '</body>'. Itu berpotensi bermanfaat. Saya punya beberapa masalah dengan penggabungan JS dan jQuery yang tidak termasuk jQuery.noConflict. Sekarang saya memiliki JS yang menggabungkan mengerjakan js sebelum '</body>' mungkin berguna.
Mark Weston
20

Ada dua masalah dengan memindahkan tag. Masalah terbesar adalah bahwa untuk beberapa alasan Magento menyuntikkan banyak JS yang bergantung pada prototipe langsung ke <body/>tag. Memindahkan skrip ke akhir dokumen (walaupun bagus untuk memuat kali), akan memecah banyak halaman di Magento.

Masalah lainnya sebenarnya melakukannya. Tampaknya tidak ada <move />tag, atau fungsi serupa. Apa yang saya lakukan untuk skrip khusus yang saya buat adalah menambahkan skrip seperti ini. Itu lebih berlebihan, tetapi berhasil:

<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 di SwiftOtter
sumber
Ditandai @ Oğuz Çelikdemir benar karena dia memberikan jawaban yang lebih terperinci yang berfungsi, tetapi pada dasarnya Anda memberikan jawaban yang sama jadi terima kasih banyak.
Mark Weston
2
Untuk beberapa alasan adalah bahwa Anda menggunakan kerangka kerja javascript, bahkan beberapa. Mereka harus tinggal lebih awal untuk rendering halaman yang benar. Ada alasan untuk memasukkan javascript tertentu sebelum tubuh berakhir. Jika Anda tidak memahami ini dan secara membuta mendorong semuanya ke bawah, Anda terlibat dalam pemrograman pemujaan kargo. Menyiapkan gudang kecil dengan radio dummy dan headset banyak dilakukan dengan Magento dan kadang-kadang oleh orang-orang yang seharusnya berpengalaman pengembang web. Beberapa barang berada tepat di tempatnya.
Fiasco Labs
15

Dalam Magento 1.x ini adalah tugas orang bodoh. Ada terlalu banyak skrip inline yang berserakan di seluruh file templat di Magento yang akan pecah jika Anda memindahkan file inti JS dari <head>. Berpotensi di Magento 2, situasi ini akan berubah tetapi mengangkangi Prototipe dan jQuery ketika Magento bermigrasi menjauh dari Prototipe.

Untuk skrip lain, Anda harus menempatkannya di depan </body>elemen. Saya merasa terbantu untuk mengabaikan Magento's <action method="addJS|addItem">XML dan cukup membuat file templat baru untuk setiap skrip, yang menyertakan referensi skrip HTML sederhana seperti:

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

Kemudian Anda dapat menyematkan file template ini di mana saja (dan masih menggunakan sebelum / sesudah untuk mengontrol pesanan) seperti:

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

Memindahkan JavaScript eksternal ke bawah tidak cukup dalam banyak kasus. Jika Anda menggunakan templat apa pun dengan JavaScript sebaris, seperti pada tema default, Anda perlu menunda eksekusi ini sampai semua dependensi (prototype.js, varien.js, ...) dimuat.

Pendekatannya adalah mengekstraksi semua <script>elemen sebaris dari blok yang diberikan menggunakan pengamat untuk http_response_send_beforedan memindahkannya ke ujung tepat setelah skrip eksternal. Saat melakukannya, Anda dapat memindahkan semua elemen skrip, tidak hanya sebaris. Ini menghemat kerumitan Anda memindahkan mereka melalui model tata letak, yang jelas tidak dimaksudkan oleh Magento.

Tom Robertshaw membuat ekstensi yang melakukan hal ini, dengan satu pengamat yang mengubah respons HTML menggunakan ekspresi reguler: https://github.com/bobbyshaw/magento-footer-js

Dia menggunakan core_block_abstract_to_html_afteracara tetapi hanya mengambil tindakan jika blok saat ini adalah blok root. Ini berarti, pengamat dipanggil lebih sering, tetapi harus meningkatkan caching blok sampai batas tertentu.

Fabian Schmengler
sumber
Ekstensi Robertshaw berfungsi dengan sangat baik di seluruh situs, kecuali pada panel pembayaran keranjang OPC. Benar-benar mengosongkan panel. Saya pikir ini adalah skrip validasi Payment Gateway. Ini memindahkan semuanya ke bawah tepat sebelum </body>tag penutup .
Fiasco Labs
2

Saya sangat merekomendasikan modul halamanpeed mediarox untuk membantu Anda mengoptimalkan javascript (dan css) Anda dan meningkatkan peringkat wawasan halamanpeed google.

Ia bekerja dengan mem-parsing output html oleh Magento dan kemudian melakukan tindakan cut and paste pada kode untuk memindahkan javascript ke bagian bawah kode html. Prosesnya cepat tetapi paling baik digunakan bersamaan dengan cache halaman penuh untuk menyimpan perubahan html.

Informasi lebih lanjut tentang cara kerja modul ini dan dapat membantu Anda meningkatkan peringkat kecepatan halaman di sini:

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

paj
sumber
-1

Untuk Magento v1.6 + (perlu menguji dalam versi yang lebih lama);

1 - buat file templat page/html/footer/extras.phtmldengan konten ini:

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

2 - Tambahkan simpul html ini ke tata letak Anda 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 - Itu dia!

Marcio Maciel
sumber
-2

Karena ada masalah dengan skrip lain ini (dalam produk / list.phtml) <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> saya harus memindahkan beberapa JS di akhir halaman saya.

Saya tidak dapat membuat apa yang ditunjukkan di atas berfungsi, jadi saya menemukan cara lain untuk mencapai:

Saya menimpa Mage/page/Block/Html/Footer.php controllerdengan membuatnya kembali dengan jalur yang sama di app/local folder.

Inilah path lengkap yang harus dibuat jika tidak ada:

app / local / Mage / halaman / Blok / Html / Footer.php

Dalam file ini, saya menambahkan fungsi dari Head.php yang dapat ditemukan di folder yang sama dengan inti Magento (mis. Mage / page / Block / Html / Head.php).

Fungsi yang Anda butuhkan untuk membuatnya bekerja adalah (jelas fungsi penuh, di sini saya hanya menunjukkan nama untuk tetap singkat):

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

Lalu saya tambahkan ke halaman kustom saya (yang ada di tema saya) / html / footer.phtml panggilan untuk ini:

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

Pada akhirnya, saya sekarang dapat menambahkan JS di footer saya dengan memanggilnya dalam tata letak apa pun oleh 

<action method="addJs"><script>yourscript.js</script></action>
twi_cy
sumber
Pendekatan yang menarik, tetapi ini adalah pendekatan yang sangat, sangat salah untuk arsitektur Magento.
patokan
github.com/pratikmage/magento-defer-javascript
Pratik