Webamator Blog

jQuery для ускорения работы сайта
MENU
Home » Сайтостроителю » jQuery для ускорения работы сайта

jQuery для ускорения работы сайта

На первый взгляд, довольно странная фраза – как может дополнительная библиотека, которую многие используют исключительно для “украшательств” и визуальных эффектов, ускорить работу сайта? Особенно если вспомнить о ее значительном размере – JQuery последних версий весит под сотню килобайт? Давайте попробуем посмотреть на jQuery немного под другим углом.

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

jquery для ускорения работы сайта

выбор брендов с помощью jquery

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

Казалось бы ничего сложного нету – где-нить в базе будем держать соответствие брендов и категорий, а перед выводом страницы просто получим список нужных брендов. Я тоже вначале так подумал – более того, при нескольких десятках категорий и брендов такое решение даже неплохо работало ;)

Но увеличение количества производителей до нескольких сотен сделало время генерации всей страницы неприемлимым. Первое, достаточно распространенное решение – делать запрос для брендов не перед выводом страницы, а при нажатии посетителем на поле “все бренды”. И действительно, сама страница стала генерироваться быстрее. Но при нажатии поле выпадало не сразу, а спустя некоторое время, и это “некоторое время” было четко заметно. Можно было использовать банальный преаплодер – анимированную gif-ку или слово loading перед выводом результата…

А вот захотелось чего-то необычного, а то преаплодеры есть у всех ;) Смотрите, большинство использующих jQuery модулей делают запрос при событии click, т.е. получаются примерно такие конструкции:

$('.myclass').click(function(){
//тут необходимый код
});

Но ведь перед тем, как посетитель нажмет на элемент – он обязательно должен навести мышку на этот элемент, не так ли? Ну или покажите мне, как можно нажать куда-то, не наведя на это “куда-то” мышкой (вариант с навигацией по клавиатуре не подходит, поскольку клавиатуру можно отследить отдельно).
Т.е. простая замена click на mouseover в нашем примере позволит совершать запрос до того, как посетитель нажал кнопку мыши – а при click-е мы просто покажем готовый результат.

Именно для этого я и предлагаю использовать jQuery – запрос к базе делается в тот момент, когда посетитель наводит мышкой на нужный элемент, а показываем готовый результат тогда, когда он нажал кнопку мышки.

Получается, что мы экономим время на генерацию всей страницы (при генерации не происходят доп. запросы к базе) и экономим время на показе результата (пользователь сразу видит список вместо надоедливого “loading”). Возможно, не совсем стандартное использование jQuery, но если он уже загружен, то почему бы и нет?

Насколько увеличится скорость загрузки – сказать сложно, т.к. зависит от слишком многих вещей – в моем случае это было количество товаров, категорий, производителей. Но если взять этот конкретный случай, то скорость генерации увеличилась более чем в 2 раза. Я считаю что это неплохой результат, а вы?

Popularity: 10%

Добавлено 7 октября 2012
Рубрика: Сайтостроителю
Метки:

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Также рекомендую публикации, похожие на "jQuery для ускорения работы сайта"

Подключение JS только там, где это необходимо

Один из методов ускорения скорости загрузки сайтов на вордпресс – подключение дополнительных файлов только там, где это необходимо. Если судить по тем сайтам, которые меня просили оптимизировать, проблема достаточно [...]

Single Load Only. Избавляемся от дублирования js

В данной статье я расскажу об одной из проблем Wordpress – повторному подключению javascript. Подключение скрипта несколько раз приводит к его повторному выполнению, т.е. страдает производительность. Кроме того, [...]

Интернационализация плагинов Wordpress

Итак, предположим мы написали некий плагин, который уже успешно работает. Один из способов сделать его более популярным – это добавить возможность перевода на другие языки. Интернационализация и транслитерация. Для начала [...]

Настраиваемое лого в шаблоне WordPress

Многие премиум-шаблоны WordPress имеют страницу настроек шаблона, которая является весьма удобным инструментом для тех, кто не знаком с языками разметки или программирования. Как правило, на странице настроек можно изменить [...]

Нет комментариев

No comments yet.

RSS feed for comments on this post.

Leave a comment