Przenieś wszystkie zawarte w Javascript do poprzedniej </body>

35

Czy ktoś wie, jak wszystkie znaczniki skryptu JS Magento były <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>renderowane np. Przed zamknięciem </body>?

Próbowałem już raz, ale dostałem błąd, który według mnie był zgodny z metodą addJS, która nie była dostępna tam, gdzie go użyłem, być może w stopce referencyjnej.

magento-1 performance theme layout javascript Mark Weston
źródło

4

Weź GTMetix i zalecenie YSlow ze szczyptą soli. Czas poświęcony na inwestowanie w to nie spowoduje zauważalnego wzrostu wydajności i prawie na pewno lepiej byłoby poświęcić profilowanie kodu (usuwanie tłuszczu) lub po prostu znalezienie lepszego / szybszego hosta.

Ben Lessani - Sonassi

1

@sonassi Chociaż jest to słuszna kwestia, poświęcenie pół godziny na wdrożenie odpowiedzi JMax niczego nie zaszkodzi i jest częścią szeregu ulepszeń wydajności front-end, które można włączyć do podstawowego motywu.

Glo

1

@Glo Jesteśmy za ulepszeniami wydajności. Ale „korzyść”, którą to przyniesie, po prostu nie istnieje. Ładowanie pierwszej strony to jedyny czas, w którym JS zostanie załadowany, a następnie obsługiwany z pamięci podręcznej przeglądarki. Blokowanie przy początkowym ładowaniu jest o wiele bardziej prawdopodobne, że będzie powolne generowanie PHP niż dostarczanie JS; a mimo to tranzyt serwera lub łączność ostatniej mili użytkowników będzie odgrywać większą rolę w tym, jak długo trwa faktyczne zerwanie.

Ben Lessani - Sonassi

1

@sonassi To tak, jakby powiedzieć, że należy zignorować użytkowników odwiedzających pierwszą stronę, ponieważ wkrótce będą mieli przygotowaną pamięć podręczną. Oczywiście istnieją ulepszenia PHP, które można i należy podjąć, ale jako front-ender moim zadaniem jest martwić się, w jaki sposób mogę nie tylko przyspieszyć dostarczanie zasobów, ale także postrzegać czas ładowania użytkownika i ładowanie skryptów na dole strona zapobiegająca blokowaniu renderowania jest częścią tej strategii. Nowoczesne przeglądarki mogą obsługiwać skrypty bez blokowania, ale równie dobrze wiesz, że milisekundy == £$ w e-commerce. Oczywiście jest to zazwyczaj kwestia sporna z modułami ładującymi skrypty.

Glo

Jestem z @Glo, jest to niewielki element dostrajania wydajności i może nie mieć znaczenia dzień i noc, ale nie należy go ignorować. Ważne jest szybkie wyświetlanie treści na ekranie dla pierwszego użytkownika.

STW

22

To zależy od twojego żądania. Na przykład usunąłem wszystkie skrypty Prototypów ze Homepagesklepu Magento, z którymi nie miałem żadnych problemów. Ale jak powiedziałem, zależy to od twojego motywu, rozszerzeń itp.

Aby przenieść skrypt:

Znajdź następujący wiersz w page.xmlswoim motywie

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

I wstaw następujące przed chwilą:

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

W przypadku Magento 1.9 użyj tego:

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

Utwórz plik szablonu w app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml i umieść następujące

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

Dodaj poniżej w swoim szablonie tuż przed zamknięciem </body>tagu.

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

Oğuz Çelikdemir
źródło

są na pewno core/text_listma addJs()sposobu?

Alex

masz rację @Alex, pomyliłem się, przepraszam za to!

Oğuz Çelikdemir

Na zdrowie, to działa. To, czego właściwie spodziewałem się powiedzieć po uruchomieniu tej pracy, to to, że kiedy masz scalony JS, i tak to neguje, ponieważ scalony plik jest następnie dołączany do głowy, ale tak naprawdę to, co Magento zrobiło w moim teście, to: utwórz dwa scalone pliki, po jednym dla każdego bloku strony / html_head, a scalony plik dla stopki js zostanie dołączony przed „</body>”. To potencjalnie przydatne. Miałem pewne problemy z łączeniem JS i jQuery, co było spowodowane tym, że nie obejmowałem jQuery.noConflict. Teraz mam połączenie JS działające js, zanim „</body>” może się przydać.

Mark Weston

20

Istnieją dwa problemy z przenoszeniem znacznika. Największym problemem jest to, że z jakiegoś powodu Magento wstrzykuje dużą ilość JS, która zależy od prototypu bezpośrednio do <body/>znacznika. Przeniesienie skryptów na koniec dokumentu (choć dobre dla czasów ładowania), spowoduje uszkodzenie wielu stron w Magento.

Innym problemem jest robienie tego. Wygląda na to, że nie ma <move />tagu ani podobnej funkcjonalności. To, co zrobiłem dla niestandardowych skryptów, które utworzyłem, to dodawanie takich skryptów. Jest bardziej zbędny, ale działa:

<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 w SwiftOtter
źródło

Oznaczony jako @ Oğuz Çelikdemir poprawny, ponieważ dostarczył bardziej szczegółową odpowiedź, która działa, ale w zasadzie udzieliłeś tej samej odpowiedzi, więc dziękuję bardzo, że to działa.

Mark Weston

2

Z jakiegoś powodu używasz javascript, w rzeczywistości kilku. Muszą być rezydentami wcześnie, aby poprawnie wyświetlać strony. Istnieją powody, aby dołączyć pewne javascript przed końcem ciała. Jeśli tego nie rozumiesz i ślepo spychasz wszystko na dno, angażujesz się w programowanie kultu ładunku. Konfigurowanie małej szopy z fałszywym radiem i zestawami słuchawkowymi odbywa się w Magento, a czasem przez ludzi, którzy powinni być doświadczonymi programistami. Niektóre rzeczy należą dokładnie tam, gdzie zostały umieszczone.

Fiasco Labs

15

W Magento 1.x jest to zadanie głupca. W plikach szablonów w Magento jest po prostu zbyt wiele skryptów wbudowanych, które ulegną awarii, jeśli przeniesiesz podstawowe pliki JS z <head>. Potencjalnie w Magento 2 sytuacja ulegnie zmianie, ale stoi ona na granicy Prototypu i jQuery, gdy Magento migruje z Prototypu.

W przypadku innych skryptów należy umieścić je przed </body>elementem. Pomocne jest zignorowanie <action method="addJS|addItem">kodu XML Magento i po prostu utworzenie nowego pliku szablonu dla każdego skryptu, który zawiera zwykłe odniesienie do skryptu HTML, takie jak:

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

Następnie możesz osadzić ten plik szablonu w dowolnym miejscu (i nadal używać przed / po do sterowania kolejnością) w następujący sposób:

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

Brendan Falkowski
źródło

6

Przeniesienie zewnętrznego JavaScript na dół w większości przypadków nie wystarczy. Jeśli używasz szablonów z wbudowanym JavaScript, tak jak w domyślnych motywach, musisz opóźnić ich wykonanie do momentu załadowania wszystkich zależności (prototype.js, varien.js, ...).

Podejście polega na wyodrębnieniu wszystkich <script>elementów wbudowanych z renderowanych bloków za pomocą obserwatora http_response_send_beforei przeniesienie ich do końca zaraz po zewnętrznych skryptach. W tym momencie możesz przenosić wszystkie elementy skryptu, nie tylko wbudowane. To oszczędza kłopotów z przenoszeniem ich za pomocą modelu układu, co wyraźnie nie było zamierzone przez Magento.

Tom Robertshaw stworzył rozszerzenie, które robi dokładnie to, z jednym obserwatorem, który zmienia odpowiedź HTML za pomocą wyrażeń regularnych: https://github.com/bobbyshaw/magento-footer-js

Używa core_block_abstract_to_html_afterzdarzenia, ale podejmuje działanie tylko wtedy, gdy bieżący blok jest blokiem głównym. Oznacza to, że obserwator jest nazywany częściej, ale powinien w pewnym stopniu wykorzystywać buforowanie bloków.

Fabian Schmengler
źródło

Rozszerzenie Robertshaw działa naprawdę dobrze w całej witrynie, z wyjątkiem panelu płatności koszyka OPC. Całkowicie pusto panel. Myślę, że to skrypt sprawdzania poprawności Payment Gateway. Przenosi wszystko na dół tuż przed </body>tagiem zamykającym .

Fiasco Labs,

2

Bardzo polecam moduł mediarox Pagespeed, aby pomóc Ci zoptymalizować javascript (i css) i poprawić ranking wglądu w Google Pagespeed.

Działa poprzez parsowanie danych wyjściowych HTML przez Magento, a następnie wykonanie operacji wycięcia i wklejenia kodu, aby przenieść javascript na dół kodu HTML. Proces jest szybki, ale najlepiej go używać w połączeniu z pełną pamięcią podręczną strony, aby buforować zmiany HTML.

Więcej informacji o tym, jak działa ten moduł i które mogą pomóc Ci poprawić pozycję strony:

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

paj
źródło

-1

Dla Magento v1.6 + (trzeba przetestować w starszych wersjach);

1 - utwórz plik szablonu page/html/footer/extras.phtmlz tą zawartością:

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

2 - Dodaj ten węzeł HTML do swojego układu 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 - To jest to!

Marcio Maciel
źródło

-2

Z powodu problemu z tym innym skryptem (w produkcie / list.phtml) <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> musiałem przenieść JS na końcu mojej strony.

Nie byłem w stanie sprawić, aby powyższe wskazania zadziałały, dlatego znalazłem inny sposób na osiągnięcie:

Zastępuję Mage/page/Block/Html/Footer.php controller, odtwarzając go z tą samą ścieżką w app/local folder.

Oto pełna ścieżka do utworzenia, jeśli nie istnieje:

app / local / Mage / page / Block / Html / Footer.php

W tym pliku dodaję funkcje z Head.php, które można znaleźć w tym samym folderze rdzenia Magento (tj. Mage / page / Block / Html / Head.php).

Funkcje, które musisz zrobić, aby działały (oczywiście pełna funkcja, tutaj po prostu wskazuję nazwę, aby pozostać zwięzła):

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

Następnie dodaję do mojej niestandardowej (tej w moim motywie) stronie / html / footer.phtml wywołanie tego:

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

Na koniec mogę teraz dodać JS w stopce, wywołując ją w dowolnym układzie przez

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

twi_cy
źródło

Ciekawe podejście, ale jest to bardzo, bardzo niepoprawne podejście do architektury Magento.

zyskuje

github.com/pratikmage/magento-defer-javascript

Pratik

Przenieś wszystkie zawarte w Javascript do poprzedniej </body>

Odpowiedzi: