Существуют достаточно много способов ускорения загрузки web-страниц, среди которых наиболее действенными можно назвать следующие:

1. Уменьшение количества HTTP запросов к серверу.
2. Использование кэширования
3. GZip сжатие страниц
4. Уменьшение размера файлов JavaScript и CSS

Конечно же, можно вручную уменьшить размер стилей, скриптов и самих web-страниц простым удалением пробелов, сжимать все это используя GZip (подробнее об этом здесь (англ.)), однако более практично использовать утилиту PHP Speedy. Как видно из названия, эта утилита написана для сайтов на PHP и предназначена для ускорения их загрузки. Она использует все вышеперечисленные методики: уменьшение количества запросов на сервер обеспечивается путем объединения нескольких скриптов (стилей) в один, который кэшируется для дальнейшего использования; скрипты, стили и сама страница сжимаются путем удаления лишнего форматирования (пробелов, табов, переноса строк), скрипты JavaScript сжимаются утилитой JSMin. Чтобы визуально продемонстрировать эффект применения утилиты, я разместил ниже 2 изображения с сайта PHP Speedy: первое показывает лог загрузки до использования PHP Speedy, сделанный в Firebug, второе – при использовании PHP Speedy.

Без использования PHP Speedy – 14 запросов, 4,44 секунды

При использовании PHP Speedy – 4 запроса, 1,1 секунды

<< читать дальше >>

WP-Prettify – это плагин для wordpress, созданный мной на основе google-code-prettify. Он предназначен для подсветки синтаксиса на web-страницах. Подсветка выполняется на стороне клиента, то есть в браузере пользователя при помощи скрипта JavaScript. В данный момент доступны следующие языки программирования: C/С++, C#, Java, Python, Bash, SQL, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl. HTML и XML также доступны, однако при использовании этих языков, нужно заменять открывающие тэги < на &lt;, в противном случае вместо тэгов вы можете увидеть соответствующие HTML элементы.

Главной целью, которая побудила меня создать такой плагин, это необходимость показывать одновременно форматированный и исходный текст, дабы дать возможность пользователю легко скопировать любой кусок кода на странице. Изменения, внесенные мной в google-code-prettify касались только добавления нумерации строк и создания табов для переключения между форматированным и исходным кодом.

Устанавливается плагин точно так же, как и любой другой плагин для wordpress: нужно просто распаковать дистрибутив в директорию с плагинами (/wp-content/plugins), затем активировать его из админ панели. Затем любой кусок кода, который необходимо отформатировать, нужно заключить в тэги pre, указав для них класс prettyprint:

<pre class="prettyprint">
   // далее код который нужно подсвечивать
   function hello(){
      alert('hello world');
   }
</pre>

В результате вы получите следующий отформатированный текст:

	// далее код который нужно подсвечивать
	function hello(){
		alert('hello world');
	}

Скачать скрипт можно здесь: wp-prettify-0.1.zip (19,8K). Страница проекта находится здесь.

Доброго времени суток.

Сегодня я добавил новый раздел – "Мои проекты" в котором я буду выкладывать мои разработки. Пока в нем только один проект – LightGallery – очень компактный и многофункциональный скрипт для просмотра изображений на странице, аналог популярного скрипта LightBox. Особый акцент я делаю на то, что мой скрипт не зависит от сторонних библиотек (Prototype, scriptaculous, jQuery). Надеюсь, будет очень полезен для вас.
До скорого!

Ранее я написал о том, как асинхронно отправлять файлы на сервер используя простой скрипт. Теперь я покажу, как то же самое можно сделать при помощи библиотеки YUI, которая предоставляет гораздо более удобный интерфейс.

В YUI, отправка асинхронных запросов на сервер осуществляет функция asyncRequest() модуля Connection Manager. Функции необходимо передать тип (GET или POST), URL запроса и объект callback, который будет обрабатывать полученные от сервера данные. Если нужно отправить на сервер данные формы, то необходимо указать объекту Connect вашу форму. Делается это при помощи функции setForm():

YAHOO.util.Connect.setForm(formObject, true);

Первый параметр – formObject – это указатель на форму. Однако, первым параметром может быть и ID формы. В этом случае Connection Manager сам получит указатель на форму при помощи getElementById. Второй параметр – это собственно то, что нам и нужно – это значение указывает на то, что нам необходимо отправлять файлы на сервер.

Далее нужно создать объект callback (если вам конечно нужно обрабатывать данные, которые возвращает сервер). Все члены объекта callback являются не обязательными, но желательно указать по крайней мере success и failure – функции, которые будут вызываться при успешной отправке (success) или ошибке (failure). Помимо этого, при отправке файлов, нужно также объявить функцию upload, которая будет вызываться при успешной отправке файла. Еще один очень важный параметр объекта callback это массив argument, в который нужно добавлять значения, необходимые для последующей обработки данных. Итак, пример:

var callback_obj = {
	argument : ['targetPre'],
	success: function(o) { alert('Файл успешно отправлен.'); },
	failure: function(o) { alert('Ошибка!!!'); },

	upload : function(response){
		var target = document.getElementById(response.argument[0]);
		target.innerHTML = response.responseText;
	}
}

В этом примере ответ от сервера (responseText) будет добавлен как содержимое в элемент с ID = targetPre (параметр, указанный в argument). После этого можно выполнять запрос:

var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.example.com', callback_obj);

Теперь пример простого web приложения, которое асинхронно отправляет файл на сервер и полученные от сервера данные помещает в элемент pre:

<html>
<head>
<script src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript">

function upload(){
	var formObject = document.getElementById('aForm'); 

	// аргумент true указывает на то, что нам нужно отправлять файлы
	YAHOO.util.Connect.setForm(formObject, true);
	// отправка формы
	var cObj = YAHOO.util.Connect.asyncRequest('POST', formObject.getAttribute('action'), callback_obj);
}

var callback_obj = {
	argument : ['targetPre'],
	success: function(o) { alert('Файл успешно отправлен.'); },
	failure: function(o) { alert('Ошибка!!!'); },

	upload : function(response){
		var target = document.getElementById(response.argument[0]);
		target.innerHTML = response.responseText;
	}
}
</script>
</head>
<body>
<form id="aForm" name="my_form" action="upload.php" onsubmit="upload(); return false;">
<input type="file" name="my_file" />
<input type="submit" name="submit_btn" value="Send" />
</form>
<pre id="targetPre"></pre>
</body>
</html>

Здесь указатель на форму получается при помощи getElementById(), аттрибут action которого используется как URL запроса. Функция upload() вызывается из хендлера onsubmit, а для того, чтобы форма не выполняла действие по умолчанию (чтобы не перезагружалась страница) возвращаем из onsubmit значение false.

Подробнее о модуле Connection Manager можно узнать из официальной документации библиотеки.

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

function insertData( name, value ){
	var table = document.getElementById('dataTable');
	table.innerHTML += '<tr><td>'+name+'</td><td>'+value+'</td></tr>';
}

Все работало отлично везде, кроме IE. После долгих поисков я все-таки обнаружил причину. Дело в том, что innerHTML нельзя использовать для добавления содержимого в тэги table, thead, tfoot, tr, которые в Internet Explorer доступны только для чтения (больше об этом можно узнать здесь). Поэтому эти элементы нужно создавать при помощи стандартных методов DOM. Однако и здесь хитро подложены грабли. Оказывается, что при создании таблицы в IE, элемент tbody является обязательным, т.е. структура таблицы должна иметь следующий вид table > tbody > tr > td. Например, следующий код будет работать везде, кроме Internet Explorer:

function createTable(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.createElement('table');
	table.setAttribute('border','2');
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	td.setAttribute('id','myCell');
	td.appendChild(document.createTextNode('Это таблица'));

	tr.appendChild(td);
	table.appendChild(tr);
	body.appendChild(table);
}

В IE таблица будет создана и добавлена в документ (это видно в IE Developer Toolbar), но отображаться она не будет! Теперь, если добавить в таблицу элемент tbody, то проблемы исчезнут:

function createTable(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.createElement('table');
	table.setAttribute('border','2');
	var tbody = document.createElement('tbody');
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	td.setAttribute('id','myCell');
	td.appendChild(document.createTextNode('Это таблица'));

	tr.appendChild(td);
	tbody.appendChild(tr);
	table.appendChild(tbody);
	body.appendChild(table);
}

Не правда ли, жесткий баг? И уж очень он смахивает на peekaboo баг, при котором элементы в IE точно так же не отображаются на странице.

И напоследок, интересная ссылка на сайт с описанием четырех багов innerHTML – Web bug track.
До встречи!