admin Опубликовано 25 марта, 2022 Поделиться Опубликовано 25 марта, 2022 Выкладываю для разработчиков скрипт для сборки необходимых стилей для страницы. Лично моему сайту он помог сократить стили почти в 2 раза. Возможно кому-то нужно будет скрипт доработать на сохранение списка стилей не попадающие на экран или не применяемые на странице, или обработку определённых файлов. busCritical v0.1 - первая версия скрипта для сборки критических стилей Спойлер bus_critical.js Пример работы: var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_critical.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); window.addEventListener('busCritical', function() { busCritical.setting['html_all'] = true; busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']']; setTimeout(function() { var start = new Date().getTime(); var critical = busCritical.critical('body'); if (critical) { busCritical.Ajax(window.location.href, { metod: 'post', data: {bus_cache_critical:critical}, success: function(data) { //console.log(data); } }); } var end = new Date().getTime(); console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.', critical); }, 1); }); busCritical v0.5+ - новая версия скрипта для сборки критических стилей и busAjax v0.3 - скрипт для возможности отправки запросов на сервер на чистом JavaScript busCritical - сборка критических стилей для страницы на чистом JavaScript Должно работать даже на IE9, но это неточно. bus_ajax.jsbus_critical (1).js Установка Подключите скрипт, установив в "<head></head>": <script src="bus_ajax.js" type="text/javascript"></script> <script src="bus_critical.js" type="text/javascript"></script> Пример работы: var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_ajax.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_critical.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); window.addEventListener('busCritical', function() { busCritical.setting['html_all'] = true; busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']']; setTimeout(function() { var start = new Date().getTime(); var critical = busCritical.critical('body'); if (critical) { window.addEventListener('busAjax', function() { busAjax(window.location.href, { metod: 'post', data: {bus_cache_critical:critical}, success: function(data) { //console.log(data); } }); }); } var end = new Date().getTime(); console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.', critical); }, 1); }); Пример 100% работы, если хотите сделать, чтобы можно было отложить загрузку двух скриптов Спойлер Вариант 1 var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_ajax.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_critical.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); var window.myCritical = function() { window.busCritical.setting['html_all'] = true; window.busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']']; setTimeout(function() { var start = new Date().getTime(); var critical = window.busCritical.critical('body'); if (critical) { window.busAjax(window.location.href, { metod: 'post', data: {bus_cache_critical:critical}, success: function(data) { //console.log(data); } }); } var end = new Date().getTime(); console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.'); }, 1); } window.addEventListener('busCritical', function() { if ('busAjax' in window) { window.myCritical(); } else { window.addEventListener('busAjax', window.myCritical); } }); Спойлер Вариант 2 var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_ajax.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = 'catalog/view/theme/default/javascript/bus_critical.js'; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); window.addEventListener('busCritical', function() { window.busCritical.setting['html_all'] = true; window.busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']']; setTimeout(function() { var start = new Date().getTime(); var critical = window.busCritical.critical('body'); if (critical) { var myAjax = function() { window.busAjax(window.location.href, { metod: 'post', data: {bus_cache_critical:critical}, success: function(data) { //console.log(data); } }); } if ('busAjax' in window) { myAjax(); } else { window.addEventListener('busAjax', myAjax); } } var end = new Date().getTime(); console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.'); }, 1); }); То есть логика такова: Скрипты после загрузки совершают событие, мы проверяем существование главной переменной скрипта, если нету переменной, то ждём события. if ('busAjax' in window) { myAjax(); } else { window.addEventListener('busAjax', myAjax); } Обозначения параметров настроек: busCritical.setting['html_all'] - брать в обработку все элементы страницы, если false, то будет брать элементы попадающие в поле зрения экрана; busCritical.setting['html_elements'] - указывается массив элементов, если нужно взять из стилей; Внимание! Стили собирать должен только администратор сайта, не делайте генерацию критических стилей любым пользователем в целях безопасности. 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.