Перейти к содержанию

Скрипт для сборки критических стилей

admin

Автор admin,
в Полезные доработки

 Поделиться

Рекомендуемые сообщения

admin Grand Master

admin

Опубликовано
Опубликовано

Выкладываю для разработчиков скрипт для сборки необходимых стилей для страницы. Лично моему сайту он помог сократить стили почти в 2 раза.

Возможно кому-то нужно будет скрипт доработать на сохранение списка стилей не попадающие на экран или не применяемые на странице, или обработку определённых файлов.

image.png.f7d95773afc79ace78ef778f3a9b2aad.png

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
Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...