Показать Меню
falbar JavaScript compressor

JavaScript compressor, правильное сжатие кода

JavaScript compressor

Доброго времени суток, в этой статье я хотел бы описать работу сервиса JavaScript compressor, который был добавлен на сайт. Описание я решил сделать в виде ответов на вопросы, которые возможно могут возникнуть.

Вот собственно ссылка на - JavaScript compressor.

Зачем я его написал?

Мне довольно часто приходиться сжимать JavaScript код для оптимизации сайтов - лишние символы разметки машине ни к чему. Для этого я пользовался сторонними js компрессорами, и в итоге, для собственного удобства, я решил создать свою реализацию на Фалбаре.

Зачем сжимать JavaScript?

Сжатие кода значительно уменьшает скрипт по сравнению с исходником за счёт удаления комментариев и элементов форматирования кода, что, в свою очередь, ускоряет загрузку скрипта на сайте и уменьшает нагрузку на браузер.

Принципы работы JavaScript компрессора?

Очистка происходит в несколько этапов:

  • Анализ исходного кода;
  • Удаление комментариев как однострочных, так многострочных;
  • Удаление символов форматирования, после чего исходный код приводится к единой строке.

Под текстовой областью результата можно увидеть статистику по работе js compressor, в которую входят: затраченное время на выполнение всех этапов работы и процент «мусора» который был удалён.

Важное правило: сжатый код не будет работать, если исходник отформатирован не качественно.

Как выглядит качественно отформатированный код?

Так как впоследствии обработки код приводится к единой строке, то вам самим необходимо изначально сообщить браузеру, где завершаются команды (инструкции), это касается и функций. Сервис выполняет только очистку кода!

До очистки:

// Функция №1
function getRandom(number){
	return Math.round(number * Math.random());
};

	// Функция №2
	function getRandomColor(){

		var red = getRandom(255);
		var green = getRandom(255);
		var blue = getRandom(255);

		var color = "rgb(" + red + "," + green + "," + blue + ")";

		return color;
	};

/*Функция №3*/
function clock_3(){

	var date 	= new Date();
	var hours 	= date.getHours();   // Строка №1
	var minutes = date.getMinutes();
	var seconds = date.getSeconds(); // Строка №2

	var clockHours 	 = document.getElementById('clockHours');
	var clockMinutes = document.getElementById('clockMinutes');
	var clockSeconds = document.getElementById('clockSeconds');

	/*
		Тут что-то
	*/
};

После:

function getRandom(number){return Math.round(number*Math.random())};function getRandomColor(){var red=getRandom(255);var green=getRandom(255);var blue=getRandom(255);var color="rgb("+red+","+green+","+blue+")";return color};function clock_3(){var date=new Date();var hours=date.getHours();var minutes=date.getMinutes();var seconds=date.getSeconds();var clockHours=document.getElementById('clockHours');var clockMinutes=document.getElementById('clockMinutes');var clockSeconds=document.getElementById('clockSeconds')};

Подписаться на обновления

Комментариев еще не оставлено