Метод обмена JQuery время дорогостоящим - PullRequest
2 голосов
/ 30 ноября 2010

Я запустил профилировщик в firebug и обнаружил, что самая дорогостоящая функция, выполняемая в нашем пользовательском интерфейсе, - это jswery .swap ().Я вижу, что это должно быть связано с методом .css ().

Вот изображение моего профилировщика:

alt text

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

Есть ли лучшеспособ ускорить это?

Я использую jquery.1.4.2.Я не смог перейти на 1.4.4, потому что по какой-то причине он ломает довольно много моих скриптов.Было бы полезно расширить метод обмена с 1.4.4 до 1.4.2?Или это приведет к большей несовместимости?

Что такое метод обмена и почему это так дорого?

1 Ответ

4 голосов
/ 30 ноября 2010

Из того, что я вижу, глядя на код пользовательского интерфейса jQuery, .swap() напрямую не вызывается им, единственное место в самой структуре jQuery, которое напрямую использует .swap(), - это вызовы .height() и .width() получение вычисленной высоты / ширины элемента.

То, что он делает для расчета размеров, когда он недоступен непосредственно из браузера, временно меняет стиль на следующее:

cssShow = { position: "absolute", visibility: "hidden", display: "block" };

Затем выполняет обычную внутреннюю функцию getWH(), находясь в этом измененном состоянии стиля, и восстанавливает.

Частичный код, заимствованный из jQuery:

jQuery.each(["height", "width"], function( i, name ) {
    jQuery.cssHooks[ name ] = {
        get: function( elem, computed, extra ) {
            var val;

            if ( computed ) {
                if ( elem.offsetWidth !== 0 ) {
                    val = getWH( elem, name, extra );

                } else {
                    jQuery.swap( elem, cssShow, function() {
                        val = getWH( elem, name, extra );
                    });
                }

                   // etc.

jQuery UI везде использует функции height() и width(), поэтому неудивительно, что функция .swap() занимает высокое место в профиле.

...