Facetrollex

position: fixed;

Если очень примитивно, то пользователь работает с frontend, который собирает и отправляет данные backend-у, который, в свою очередь, делает что-то с этими данными. В контексте клиент-серверного ПО, то клиент это frontend, а сервер - backend. Между ними http (обычно restfull или soap интерфейс, которые служат транспортном для данных).

В более общем смысле, front-end является интерфейсом, который подготавливает данные для передачи на нижестоящий уровень (back-end). Причем уровней может быть сколь угодно много, так что на сервере так же может быть свой front-end и back-end к нему.

select p.*, p_g.*, p_i.*
from `product` p
left join `product_group` p_g ON p_g.id = p.group_id
left join `product_image` p_i ON p_i.product_id = p.id
ORDER BY p_i.`product_id` ASC
LIMIT 0, 200

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

Для начала уменьшить количество обращений к dom, заменив

for($i = 0; $n = 1; json["items"].length > $i; $i++){
           $(".content").append('<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>'+json["items"][i]["name"]+' - <span>'+json["items"][i]["date"]+'</span> - '+json["items"][i]["time"]+'</b></div>');
            }

на

var html = '';
for($i = 0; $n = 1; json["items"].length > $i; $i++){
           html += '<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>'+json["items"][i]["name"]+' - <span>'+json["items"][i]["date"]+'</span> - '+json["items"][i]["time"]+'</b></div>';
            }
 $(".content").append(html);

Или что-то подобное