Sposta tutto ciò che Javascript include prima </body>

35

Qualcuno sa come rendere tutti i tag di script JS di Magento, ad es. <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>Renderizzati prima della chiusura </body>?

L'ho provato una volta prima, ma mi è stato dato un errore che penso fosse sulla falsariga del metodo addJS che non era disponibile dove l'ho usato, possibilmente nel footer di riferimento.

— Mark Weston
fonte

4

Prendi le raccomandazioni di GTMetix e YSlow con un pizzico di sale. Il tempo speso investendo in questo non determinerà un notevole aumento delle prestazioni e quasi sicuramente sarebbe meglio spendere meglio profilando il tuo codice (eliminando il grasso) o semplicemente trovando un host migliore / più veloce.

— Ben Lessani - Sonassi,

1

@sonassi Sebbene sia un punto valido, impiegare mezz'ora per implementare la risposta di JMax non danneggerà nulla e fa parte di una selezione di miglioramenti delle prestazioni del front-end che possono essere inclusi in un tema di base.

— Glo

1

@Glo Siamo tutti per il miglioramento delle prestazioni. Ma il "vantaggio" che questo produrrà semplicemente non esiste. Il caricamento della prima pagina è l'unica volta in cui JS verrà caricato e successivamente pubblicato dalla cache del browser. Il blocco sul caricamento iniziale è molto più probabile che sia una generazione PHP lenta rispetto alla consegna di JS; e ancora, il transito del server o la connettività dell'ultimo miglio degli utenti giocherà un ruolo maggiore nel tempo necessario per abbattere effettivamente.

— Ben Lessani - Sonassi,

1

@sonassi È come dire che dovresti ignorare gli utenti che visitano per la prima volta perché presto avranno una cache innescata. Naturalmente ci sono miglioramenti di PHP che possono e dovrebbero essere intrapresi ma, come front-end, il mio compito è preoccuparmi di come posso non solo velocizzare la consegna degli asset, ma anche percepire i tempi di caricamento per l'utente e caricare gli script nella parte inferiore di la pagina per impedire il blocco del rendering fa parte di tale strategia. I browser moderni sono in grado di gestire gli script senza bloccare, ma sai anche io che millisecondi == ££ nel commercio elettronico. Naturalmente, questo è generalmente un punto controverso con i caricatori di script.

— Glo

Sono con @Glo, è un piccolo pezzo di ottimizzazione dell'efficienza e potrebbe non fare la differenza giorno e notte, ma non dovrebbe essere ignorato. È importante ottenere rapidamente contenuti sullo schermo per un visitatore per la prima volta.

— STW,

22

Dipende dalla vostra richiesta. Ad esempio, infine, sono stato rimosso tutti gli script del prototipo dal Homepagenegozio Magento che non ho riscontrato alcun problema. Ma come ho detto, dipende dal tema, dalle estensioni ecc.

Per spostare lo script:

Trova la seguente riga nel page.xmltuo tema

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

E inserisci quanto segue appena prima:

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

Per Magento 1.9 usa questo:

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

Crea il file modello in app / design / frontend / [pacchetto] / [tema] /template/page/html/jsfooter.phtml e inserisci quanto segue

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

Aggiungi qui sotto nel tuo modello appena prima di chiudere il </body>tag.

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

— Oğuz Çelikdemir
fonte

sei sicuro di core/text_listavere un addJs()metodo?

— Alex

hai ragione @Alex, ho sbagliato, mi dispiace per quello!

— Oğuz Çelikdemir,

Saluti amico, funziona. Quello che mi aspettavo davvero di dire dopo aver fatto funzionare questo è che quando si esegue la fusione JS, questo lo nega comunque perché il file unito viene quindi aggiunto alla testa, ma in realtà, ciò che Magento sembra aver fatto nel mio test è creare due file uniti, uno per ogni blocco pagina / html_head e il file unito per il piè di pagina js viene aggiunto prima di '</body>'. Questo è potenzialmente utile. Ho avuto alcuni problemi con la fusione di JS e jQuery che non includevano jQuery.noConflict. Ora ho JS che si fonde lavorando con js prima che '</body>' possa essere utile.

— Mark Weston,

20

Esistono due problemi con lo spostamento del tag. Il problema più grande è che per qualche motivo Magento inietta un sacco di JS che dipende dal prototipo direttamente nel <body/>tag. Spostando gli script alla fine del documento (anche se buono per i tempi di caricamento), si romperanno molte pagine di Magento.

L'altro problema lo sta effettivamente facendo. Sembra che non ci siano <move />tag o funzionalità simili. Quello che ho fatto per gli script personalizzati che ho creato è l'aggiunta di script come questo. È più ridondante, ma funziona:

<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 a SwiftOtter
fonte

Contrassegnato @ Oğuz Çelikdemir corretto perché ha fornito la risposta più dettagliata che funziona, ma in pratica hai dato la stessa risposta, quindi grazie mille funziona.

— Mark Weston,

2

Per qualche ragione è che stai usando un framework javascript, in effetti diversi. Devono essere residenti all'inizio per un corretto rendering della pagina. Ci sono ragioni per includere alcuni javascript prima della fine del corpo. Se non lo capisci e lo stai spingendo alla cieca fino in fondo, ti stai impegnando nella programmazione di culto del carico. L'installazione di un piccolo capannone con una radio e delle cuffie fittizie è fatta molto con Magento e talvolta da persone che dovrebbero essere sviluppatori web esperti. Alcune cose appartengono esattamente dove sono state collocate.

— Fiasco Labs,

15

In Magento 1.x questa è una commissione folle. Esistono semplicemente troppi script incorporati disseminati nei file modello in Magento che si romperanno se si trasferiscono i file JS principali da <head>. Potenzialmente in Magento 2, questa situazione cambierà ma si trova a cavallo tra Prototype e jQuery mentre Magento migra da Prototype.

Per altri script, è necessario posizionarli prima </body>dell'elemento. Ho trovato utile ignorare l' <action method="addJS|addItem">XML di Magento e creare semplicemente un nuovo file modello per ogni script, che include un semplice riferimento di script HTML come:

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

Quindi puoi incorporare questo file modello ovunque (e comunque utilizzare prima / dopo per controllare l'ordine) in questo modo:

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

— Brendan Falkowski
fonte

6

Spostare JavaScript esterno verso il basso non è sufficiente nella maggior parte dei casi. Se si utilizzano modelli con JavaScript incorporato, come nei temi predefiniti, sarà necessario ritardare l'esecuzione di questi fino al caricamento di tutte le dipendenze (prototype.js, varien.js, ...).

Un approccio è quello di estrarre tutti gli <script>elementi incorporati dai blocchi renderizzati usando un osservatore per http_response_send_beforee spostarli alla fine subito dopo gli script esterni. Mentre ci sei, puoi spostare tutti gli elementi dello script, non solo in linea. Questo ti evita il fastidio di spostarli tramite il modello di layout, che chiaramente non era previsto da Magento.

Tom Robertshaw ha creato un'estensione che fa esattamente questo, con un singolo osservatore che modifica l'HTML di risposta usando espressioni regolari: https://github.com/bobbyshaw/magento-footer-js

Usa l' core_block_abstract_to_html_afterevento ma agisce solo se il blocco corrente è il blocco radice. Ciò significa che l'osservatore viene chiamato più spesso, ma dovrebbe sfruttare la cache di blocco in una certa misura.

— Fabian Schmengler
fonte

L'estensione Robertshaw funziona davvero bene in tutto il sito, ad eccezione del pannello di pagamento del carrello OPC. Elimina completamente il pannello. Penso che sia lo script di convalida di Payment Gateway. Sposta tutto in fondo appena prima del </body>tag di chiusura .

— Fiasco Labs

2

Consiglio vivamente il modulo mediarox pagepeed per aiutarti a ottimizzare il tuo javascript (e css) e migliorare il posizionamento delle informazioni sulla velocità della pagina di Google.

Funziona analizzando l'output HTML da Magento e quindi eseguendo un'azione taglia e incolla sul codice per spostare javascript nella parte inferiore del codice HTML. Il processo è veloce ma è meglio utilizzato insieme a una cache di pagina intera per memorizzare nella cache le modifiche html.

Maggiori informazioni su come funziona questo modulo e possono aiutarti a migliorare il ranking della velocità della pagina qui:

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

— paj
fonte

-1

Per Magento v1.6 + (è necessario testare nelle versioni precedenti);

1 - crea un file modello page/html/footer/extras.phtmlcon questo contenuto:

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

2 - Aggiungi questo nodo html al tuo xml di layout:

<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 - Questo è tutto!

— Marcio Maciel
fonte

-2

A causa di un problema con questo altro script (in product / list.phtml) <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> ho dovuto spostare alcuni JS alla fine della mia pagina.

Non sono riuscito a far funzionare quanto indicato sopra, quindi trovo un altro modo per ottenere:

Ho ignorato il Mage/page/Block/Html/Footer.php controllerricreando con lo stesso percorso in app/local folder.

Ecco il percorso completo da creare se non esiste:

app / local / Mage / page / blocchi / Html / footer.php

In questo file, aggiungo funzioni da Head.php che possono essere trovate nella stessa cartella del core di Magento (cioè Mage / page / Block / Html / Head.php).

Le funzioni necessarie per farlo funzionare sono (ovviamente la funzione completa, qui indico solo il nome per rimanere conciso):

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

Quindi aggiungo alla mia pagina personalizzata (quella nel mio tema) / html / footer.phtml la richiesta per questo:

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

Alla fine, ora posso aggiungere JS nel mio piè di pagina chiamandolo in qualsiasi layout di

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

— twi_cy
fonte

Approccio interessante, ma questo è un approccio molto, molto scorretto per l'architettura Magento.

— entro il

github.com/pratikmage/magento-defer-javascript

— Pratik