Как сжать данные при загрузке через AJAX?

Question

[Надим]

Здравствуйте. Использую jQuey.ajax() для подгрузки html-таблицы и из-за объема он грузится довольно медленно. Порекомендуйте пожалуйста наиболее простой способ уменьшить размер передаваемых данных. Как мне проще всего будет сжать передаваемые данные на стороне сервере, а потом все это в браузере расжать с минимальными затратами?

Размер таблицы в районе ~500 Кб и так как это просто текст, то его размеры можно уменьшить на порядок, если использовать сжатие. Осталось лишь разобраться, как это делается с чем и прошу помощи.

Пример JavaScript на клиенте:

jQuery.ajax({
	url:     '/',
	cache: false,
	type:     'POST',
	dataType: 'html',
	data: {get : 'table'},
	success: function(result) {
		document.querySelector('div.table').innerHTML = result;
	},
	error: function(result) {
		alert('Нет соединения! Попробуйте обновить страницу.');
	}
});

Пример PHP на сервере:

<?php

header('Content-Type: text/html; charset=utf-8');
echo file_get_contents('table.html');

?>

Comments

[Vitaliy K]

Можно gzip-сжатие на сервере настроить.
Можно слать не весь html а только сырые данные и собирать их на стороне клиента.
Можно разбить контент на блоки и подгружать их в процессе прокрутки.
Можно ....

[Sedbol]

У Вас скорей всего браузер не справляется.

[Надим]

Vitaliy K, да мне бы пример, а то я даже не знаю как подступится к задаче.

[Надим]

Sedbol, браузер справляется, сеть медленная. Да и размер таблицы в будущем будет только расти, а значит сжатие просто необходимо.

[Sedbol]

Надим Закиров, Прочтите может поможет вам

[Надим]

Sedbol, не помогло, все это и так мне известно, про сжатие там ни слова.

[Sedbol]

Надим Закиров, Я имел введу подгрузку. Дабы не все данные сразу подгужать. Либо JSON как вам посоветовали

[Vitaliy K]

Надим Закиров, сжатие раз и два

[Надим]

Vitaliy K, помогло, спасибо)

Answer 1

[Владимир Коротенко]

Включите сжатие на сервере для ваших скриптов, gzip на тексте может дать разницу в 5-6 раз

Comments

[Надим]

Попробую, вроде бы это через .htaccess делается. Остается лишь надеяться, что ajax() умеет сжатые файлы разбирать. Обязательно отпишусь о результатах.

[Владимир Коротенко]

Надим Закиров, Для браузера без разницы, он видит заголовок сжатия и разжимает прозрачно.

[Надим]

Владимир Коротенко, ага, действительно все работает. Спасибо за наводку)

Answer 2

[Александр]

Передавать таблицу в виде JSON или CSV и при получении генерировать ее из полученных данных.

Comments

[Надим]

Но JSON же не сжимает данные! Или я чего то не знаю и у него есть такая опция?

[Александр]

А что выглядит более компактно?

HTML

<table>
	<thead>
		<tr>
			<th>ID</th>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Age</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>John</td>
			<td>Doe</td>
			<td>30</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Emily</td>
			<td>Watson</td>
			<td>27</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jake</td>
			<td>Low</td>
			<td>25</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Alice</td>
			<td>Green</td>
			<td>28</td>
		</tr>
	</tbody>
</table>

JSON

[
	{ "id": 1, "fitrstname": "John", "lastname": "Doe", "age": 30 },
	{ "id": 2, "fitrstname": "Emily", "lastname": "Watson", "age": 27 },
	{ "id": 3, "fitrstname": "Jake", "lastname": "Low", "age": 25 },
	{ "id": 4, "fitrstname": "Alice", "lastname": "Green", "age": 28 }
]

Еще минифицировать можно.

CSV

ID,Firstname,Lastname,Age
1,John,Doe,30
2,Emily,Watson,27
3,Jake,Low,25
4,Alice,Green,28

[Надим]

Seasle, я понял к чему вы клоните, но решение не подходит, так как потребует много времени на реализацию.

[ProjectSoft]

Надим Закиров, сжать html (вытянуть в строку удалив переносы строк, лишние пробелы, табы). Каждый символ - это n число бит в зависимости от кодировки. Соответственно вы уменьшите вес на какое-то количество байт.
Ну и gzip для php на стороне сервера.

[BATPYIIIKOB]

Надим Закиров, делается данное решение с минимальными затратами. На практике вообще забудьте тянуть полные хэтемеэли через AJAX. Тяните JSON а далее на фронте распарсивайте в контент.

[Надим]

BATPYIIIKOB, чтобы тянуть JSON надо какую-никакую базу данных мутить. В рамках текущей задачи оно того не стоило, поэтому и сделано было максимально просто. Тем не менее, задачу я решил) Помогло gzip сжатие на стороне хостинга.

[Innoel]

Надим Закиров, зачем база данных для json?

[Надим]

Innoel, у меня не просто таблица, у меня таблица с которой пользователь может работать, а потом загрузить результаты обратно на сервер, перезаписав прошлую версию таблицы.

[Innoel]

Надим Закиров, ну это понятно, но в чем проблема? это строк 15 кода. и гигантская экономия

[Надим]

Innoel, 15 строк кода и много времени, чтобы эти 15 строк записать - особенно если у тебя нет опыта работы с базами данных (мой случай).

[Innoel]

Надим Закиров, при чем тут база данных, опять же, я не понимаю

[Надим]

Innoel, я понял к чему вы клоните. Вы вероятно предлагаете вместо готового html хранить json. И как ни странно, я до этого не додумался - мне всегда казалось, что если уж отдаем json, то мы его составные части изначально должны хранить в базе, чтобы потом генерировать все в нужном виде.

[Innoel]

Надим Закиров, да, именно это и имел в виду. такой вариант разве не лучше?

[Надим]

Innoel, да лучше. Обязательно применю этот вариант, если таблица чересчур разрастется =)

[Innoel]

Надим Закиров, ну полмегабайта уже многовато, как по мне. сравните ради интереса, насколько уменьшится объем.