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.

— 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