«Ускоряем» код на jQuery (vol.1).

На днях мне потребовалась простейшая «Карусель» (для показа изображений). В сети, на эту тему я нашел много готовых решений, однако сложность и громоздкость последних вынудила меня отказаться от таких решений. В конечном счете я решил использовать собственную заготовку (у меня уже была простейшая карусель, реализованная на «чистом» JavaScript, т.е. без каких-либо фреймворков). Поскольку карусель предназначалась для очередного проекта на CMS/CMF Drupal, я решил перенести ее на jQuery фреймворк.

После недолгих усилий я «перенес» весь «карусельный код» на jQuery (благо работы оказалось не много). В результате я получил простое и легкое решение, которое меня вполне устраивало. Однако после внедрения карусели в реальный проект я увидел странную особенность – скорость ее работы значительна снизилась. Я начал анализировать причину такого поведения и понял, что проблема заключалась в конструкции $('.classname') – через setTimeout я многократно вызывал одну и туже функцию в которой и находилась такая jQuery-конструкция. Суть проблемы оказалась в следующем: поскольку после внедрения карусели количество контента на странице многократно возросло (DOM увеличился), то и скорость выполнения запросов $('.classname') или $('#id') увеличилась, при этом последовательный вызов таких запросов стал еще больше тормозить их обработку.

Решение такой ситуации оказалось простым, вместо кода:

  function BZ_carusel_scroll(){
    $('.bz_carusel-content-Acc')[0].scrollLeft += ...;
    setTimeout('BZ_carusel_scroll()', 10);
  }

я задействовал код:

  bz_carusel_dataObj = $('.bz_carusel-content-Acc')[0];
  function BZ_carusel_scroll(){
    bz_carusel_dataObj.scrollLeft += ...;
    setTimeout('BZ_carusel_scroll()', 10);
  }

Отличие первого кода от второго в следующем: использование / определение запроса вида $('.classname ') вынесено за пределы функции (цикла) – т.е. в данном случае запрос $('.bz_carusel-content-Acc')[0] реализован в глобальной области, при этом конструкцией [0] мы указываем, что желаем использовать непосредственно объект, а не класс-обертку от jQuery. Кстати scrollLeft в чистом jQuery пока не реализован (реализован только в сторонних библиотеках), впрочем как и многие другие параметры, поэтому для того что бы изменить этот параметр, необходимо обращаться непосредственно к DOM объекту.

К слову сказать, многие популярные Drupal-модули, использующие в своей основе jQuery (например меню) также не учитывают такие мелочи, а в результате неоправданные перегрузки и как следствие – задержки.

В прикрепленных к этой странице архивах содержится реализованная карусель.