Porozmawiajmy trochę o optymalizacji ładowania strony w Joomla. Dzisiaj będzie to połączenie javascript. Najpierw zwrócę uwagę twórców układu na poprawność konstrukcji szablonu. Następnie rozważymy możliwość wykorzystania asynchronicznego ładowania skryptów zewnętrznych wbudowanych w silnik. Nie będę żądał optymalizacji.
Budowanie wzoru
Z reguły twórcy układu Joomla nie zwracają uwagi na kolejność ładowania stylów i skryptów, a to jest ważny aspekt optymalizacji w przypadku pobierania równoległego. Pliki CSS powinny zawsze znajdować się przed plikami JavaScript.
Jeśli twój szablon pobiera css i javascript wygląda tak:
<! DOCTYPE html> <html> <head> <link rel = "ikona skrótu" type = "image / x-icon" href = "/ favicon.ico"> <jdoc: include type = "head" /> <link rel = "arkusz stylów" href = "/ templates / beez_20 / css / style.css" type = "text / css" /> <skrypt src = "/ templates / beez_20 / js / jquery-latest.min.js" type = „text / javascript”> </ script> </ head>Chcę cię zapewnić, to nie w porządku! Ponieważ ładujesz zewnętrzne pliki po renderowaniu strony, co oznacza, że formowanie bloku głównego już minęło, stąd chaos ładowania w sposób rozłożony.
Ale jak poprawnie uwzględnić pliki w renderowaniu:
<? php zdefiniowany ('_JEXEC') lub die ('Ograniczony dostęp'); $ this-> addStyleSheet ($ this-> baseurl. '/ templates /'.$ this-> template.' / css / style.css '); $ this-> addScript ($ this-> baseurl. '/ templates /'.$ this-> template.' / js / jquery-latest.min.js '); ?> <! DOCTYPE html> <html> <head> <jdoc: include type = "head" /> </ head>Nie zwracamy uwagi na ważność doctype i html, pisał na przykład w skrócie.
Ładowanie asynchroniczne
I tutaj wyostrzę więcej uwagi i przeczytam artykuł do końca! Często klient musi zoptymalizować ładowanie asynchronicznego javascript w celu optymalizacji. Co dziwne, programiści Joomla zapewnili taką możliwość, ale twórcy komponentów, modułów i wtyczek innych firm zapominają o tej funkcjonalności, dlatego prawdopodobnie Jooml jest często krytykowany za niską optymalizację, z którą bym się sprzeczał.
Jak omówiono wcześniej w renderowaniu dokumentu, istnieje funkcja addScript (); . Ale najwyraźniej niektórzy nie podejrzewają, że ma cztery zmienne - $ url , $ type , $ defer , $ async .
Jeśli asynchroniczne ładowanie skryptów nie wystarcza, aby użyć jednego atrybutu $ url , pozostałe są domyślnie zastępowane ($ type = "text / javascript", $ defer = false, $ async = false)
$ this-> addScript ($ this-> baseurl. "/ templates / beez_20 / js / jquery-latest.min.js"); $ this-> addScript ($ this-> baseurl. "/ templates / beez_20 / js / script.js");Ale w naszym przypadku musimy załadować skrypty w kolejce przez przeglądarkę, w tym celu musimy użyć atrybutu async i / lub defer . Obie różnią się tylko tym, że odroczenie zachowuje kolejność wykonywania skryptów. Odroczenie jest potrzebne, jeśli framework jQuery jest używany przez skrypt.js , co uniemożliwi załadowanie go wcześniej niż sama biblioteka i jeśli trzeba zapisać jakąś sekwencję.
Aby włączyć ładowanie asynchroniczne, musisz użyć wszystkich zmiennych.
$ this-> addScript ($ this-> baseurl. "/ templates / beez_20 / js / jquery-latest.min.js", "text / javascript"); // lub $ this-> addScript ($ this-> baseurl. "/ templates / beez_20 / js / jquery-latest.min.js", "text / javascript", false, false); // Wyświetla <skrypt src = "/ templates / beez_20 / js / jquery-latest.min.js" type = "text / javascript"> </ script> $ this-> addScript ($ this-> baseurl. "/ Templates /beez_20/js/jquery-latest.min.js ("text / javascript", true, false); // Wyświetla <skrypt src = "/ templates / beez_20 / js / jquery-latest.min.js" type = "text / javascript" defer = "defer"> </ script> $ this-> addScript ($ this-> baseurl. "/ templates / beez_20 / js / jquery-latest.min.js (" text / javascript ", false, true); // Wyświetla <skrypt src = "/ templates / beez_20 / js / jquery-latest.min.js" type = "text / javascript" async = "async"> </ script>I jeszcze jeden mały momentik. Zasadniczo te atrybuty są elementami HTML5, dlatego nie ma sensu korzystanie z formy async = „async” i defer = „defer”, asynchroniczne i odroczone są wystarczające.
Dokonujemy zmian w bibliotece joomla. Otwórz site.ru / libraries / joomla / document / html / renderer / head.php
Szukamy (około 150 linii):
// Wygeneruj linki skryptów foreach ($ document -> _ scripts jako $ strSrc => $ strAttr) {$ buffer. = $ Tab. '<skrypt src = "'. $ strSrc. '"'; if (! is_null ($ strAttr ['mime'])) {$ buffer. = 'type = "'. $ strAttr ['mime']. '"'; } if ($ strAttr ['defer']) {$ buffer. = 'defer = "defer"'; } if ($ strAttr ['async']) {$ buffer. = 'async = "async"'; } $ buffer. = '> </ script>'. $ lnEnd; }zastąp:
// Wygeneruj linki skryptów foreach ($ document -> _ scripts jako $ strSrc => $ strAttr) {$ buffer. = $ Tab. '<skrypt src = "'. $ strSrc. '"'; if (! is_null ($ strAttr ['mime'])) {$ buffer. = 'type = "'. $ strAttr ['mime']. '"'; } if ($ strAttr ['defer']) {$ buffer. = 'defer'; } if ($ strAttr ['async']) {$ buffer. = 'async'; } $ buffer. = '> </ script>'. $ lnEnd; }Właśnie o to chodzi. Wszystkie manipulacje zostały wykonane przeze mnie w Joomla 2.5, jak będzie działać w 1.5 xs, nie rozważałem tego i nadszedł czas, aby o tym zapomnieć))). Tak, a powyższa technika nie jest panaceum, każde wymaga indywidualnego podejścia.
Dziękuję za uwagę!
