Пагаворым трошкі аб аптымізацыі загрузкі старонкі ў Joomla. На сёння гэта будзе падключэнне JavaScript. Во первых звярну ўвагу вярстальшчыкі, на правільнасць пабудовы шаблону. А потым разгледзім убудаваную ў рухавічок магчымасць выкарыстоўваць асінхронныя загрузку знешніх скрыптоў. Размаўляць для чаго патрэбна аптымізацыя не буду.
пабудова шаблону
Як правіла вярстальшчыкі на Joomla не звяртаюць увагу на парадак загрузкі стыляў і скрыптоў, а гэта важны аспект аптымізацыі для распаралельвання загрузкі. CSS файлы варта заўсёды ўключаць перад файламі JavaScript.
Калі ў Вашым шаблоне загрузка css і javascript выглядае наступным чынам:
<! DOCTYPE html> <html> <head> <link rel = "shortcut icon" type = "image / x-icon" href = "/ favicon.ico"> <jdoc: include type = "head" /> <link rel = "stylesheet" href = "/ templates / beez_20 / css / style.css" type = "text / css" /> <script src = "/ templates / beez_20 / js / jquery-latest.min.js" type = "text / javascript"> </ script> </ head>хачу вас запэўніць, гэта не правільна! Таму што вы загружаеце знешнія файлы пасля рэндэрынгу старонкі, а гэта значыць што фарміраванне блока head ўжо прайшло, адсюль узнікае хаос загрузкі ў шахматным парадку.
А вось як правільна ўключаць файлы ў рэндэрынг:
<? Php defined ( '_JEXEC') or die ( 'Restricted access'); $ 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>Не зважаем на валіднасць doctype і html, пісаў скарочана для прыкладу.
асінхронная загрузка
А вось тут я б больш завастрыў увагу і дачытаў артыкул да канца! Часта заказчык на аптымізацыю патрабуе рэалізоўваць асінхроннага загрузку javascript. Як ні дзіўна распрацоўшчыкі Joomla прадугледзелі і такую магчымасць, а вось распрацоўшчыкі іншых кампанентам, модуляў і ўбудоў забываюць пра дадзены функцыянал, мабыць таму Jooml'у часта і крытыкуюць за нізкую аптымізацыю, з чым бы я і паспрачаўся.
Як разглядаўся раней у рэндэрынгу якога існуе функцыя addScript (); . Але мабыць некаторыя і не падазраюць што яна мае чатыры зменныя - $ url, $ type, $ defer, $ async.
Калі асінхронная загрузка скрыптоў нам не патрэбна дастаткова выкарыстаць адзін атрыбут $ url, астатнія падстаўляюцца па змаўчанні ($ 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");Але ў нашым выпадку нам неабходна загрузку скрыптоў браўзэрам паставіць у чаргу, для гэтага неабходна выкарыстоўваць атрыбут async і / або defer. Абодва адрозніваюцца толькі тым што defer захоўвае парадак выканання скрыптоў. Defer патрэбен у тым выпадку калі script.js выкарыстоўваецца фреймворк jQuery, які прадухіліць яго загрузку раней самой бібліятэкі, ну і калі неабходна захаваць нейкую паслядоўнасць.
І так што б уключыць асінхроннага загрузку неабходна выкарыстоўваць усе зменныя
$ This-> addScript ($ this-> baseurl. "/ Templates / beez_20 / js / jquery-latest.min.js", "text / javascript"); // або $ this-> addScript ($ this-> baseurl. "/ Templates / beez_20 / js / jquery-latest.min.js", "text / javascript", false, false); // Выводзіць <script 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); // Выводзіць <script 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); // Выводзіць <script src = "/ templates / beez_20 / js / jquery-latest.min.js" type = "text / javascript" async = "async"> </ script>І яшчэ адзін маленькі моментик. У прынцыпе дадзеныя атрыбуты гэта элементы HTML5, такім чынам няма сэнсу выкарыстоўваць выгляд async = "async" і defer = "defer", досыць async і defer адпаведна.
Занясем карэктывы ў бібліятэку joomla. Адкрываем сайт.ру / libraries / joomla / document / html / renderer / head.php
Шукаем (прыкладна радок 150):
// Generate script file links foreach ($ document -> _ scripts as $ strSrc => $ strAttr) {$ buffer. = $ Tab. '<Script 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; }замяняем на:
// Generate script file links foreach ($ document -> _ scripts as $ strSrc => $ strAttr) {$ buffer. = $ Tab. '<Script src = "'. $ StrSrc. '"'; if (! is_null ($ strAttr [ 'mime'])) {$ buffer. = 'type = "'. $ strAttr [ 'mime']. '"'; } If ($ strAttr [ 'defer']) {$ buffer. = 'Defer'; } If ($ strAttr [ 'async']) {$ buffer. = 'Async'; } $ Buffer. = '> </ Script>'. $ LnEnd; }Вось і ўся соль. Усе маніпуляцыі мной праводзіліся ў Joomla 2.5, як гэта будзе працаваць у 1.5 хз, не разглядаў, ды і пара ўжо забыцца пра яе))). Ды і вышэйапісаная тэхніка зусім не панацэя, да кожнага патрэбен індывідуальных падыход.
Дзякуй за ўвагу!
