Всем привет! В попытках добиться максимальной скорости загрузки сайта перебираю различные практики и пытаюсь их применить в своих проектах.
Сейчас мой интерес пал на отложенную загрузки скриптов, которую можно заметить на сайте Ламоды, вообще, там множество интересных решений, который позволяют загружать страницу с невероятной скоростью. Например картинки обжимаются в webp. Но сейчас меня интересуют отложенная загрузка скриптов. По сути реализовать этот механизм не составит никаких трудов, достаточно использовать пару строк JS:
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
Если поискать различные антипримеры загрузки страниц, то можно привести в пример сайт Эльдорада.
В попытках реализовать что-то подобное как у ламоды, я попытался набросать следующий код, и
хотелось бы узнать ваше мнение
// Вешаем обработчик события и получаем код страницы
$eventManager->addEventHandler("main", "OnEndBufferContent", "deferredLoading");
// Наш обработчик
function deferredLoading(&$content){
// Паттерн который будет отделять названия файла
$getPattern = '/src=".*.js.*"/';
// Список паттернов по которым будем искать нужные нам скрипты, в данном примере ищем core_db.js и loadext.js
$arScripts = [
["del" => '/<script.+?src=".+?bitrix\/js\/main\/core\/core_db[^"]+"><\/script\>/'],
["del" => '/<script.+?src=".+?bitrix\/js\/main\/loadext\/loadext[^"]+"><\/script\>/']
];
// Ищем и находим
foreach ($arScripts as &$script){
preg_match($script["del"], $content, $res);
if($res[0]) {
preg_match($getPattern, $res[0], $res);
$res = str_replace("src=", "", $res);
$content = preg_replace($script["del"], "", $content);
$script["script"] = $res[0];
}
}
unset($script);
// Добавляем найденные скрипты
$strScr = '';
for($i = 0; $i < count($arScripts); $i++) {
$strScr .= ($i < count($arScripts)-1) ? "".$arScripts[$i]['script'].",\n " : "".$arScripts[$i]['script']."";
}
// JS Скрипт, который будет подключать все это дело
$string = "
<script>
function fastLoad() {
var scripts = [
$strScr
];
load = function (src) {
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
};
for (var i = 0; i < scripts.length; i++) {
load(scripts[i]);
}
}
fastLoad();
</script>";
// Ставим в нужном месте в шаблоне тег, вместо которого вставится наш JS код
$content = str_replace("<!-- add_js -->",$string, $content);
}
Ну вот и все, таким образом можно перетащить все Битриксовские скрипты, и не только их, в самый низ, позволив сначала прогрузиться фотографиям в каталоге, а уж затем им.
Осталось только понять какие скрипты стоит переносить, а какие - нет.
