Как снизить нагрузку при выведении на несколько элементов в jQuery


У меня есть динамическая страница заказа , которая должна обновить несколько элементов, когда значение изменяется.

Вот основная функция, которая делает это. Обратите внимание, это только обновляет значения, если они отличаются от того, что уже есть. Так, например, он не обновляет с галочкой, если там уже стоит "галочка" есть.

  function reput(element, content, animate) {
        target = $(element);
        target_check = target.html().indexOf("check_mark");
         //checks if target already has a check mark
        content_check = content.indexOf("check_mark");
         //checks if new value has check mark
        th = target.html();
        if(th == content || (target_check == content_check && target_check != -1)) {
            return true;
            //if any of the values match, then don't do anything 
        }
        else {
            //values didn't match so update the element
            if (animate || animate == undefined)
                target.fadeOut(100).empty().fadeIn(200).append(content);
            else
                target.empty().append(content);
        }
    }

Эта функция вызывается несколько раз в нескольких местах вот так:

reput(("#email"),   (cp.email));
reput(("#chat"),    (cp.chat));
reput(("#voice"),   (cp.voice));
reput(("#member"),  (cp.member));
reput(("#price"),   ('$' + cp.price), false);

Что бы быть лучшим способом, чтобы улучшить время загрузки эта функция? Имея его принять массив, переборем и добавления значения по одному? Это экономит ресурсы, чтобы просто использовать fadeIn вместо затухания/fadeIn?

Бонусный вопрос: Какие есть способы, чтобы проверить, сколько вычислительной мощности функции скрипта/использует?



741
3
задан 30 октября 2011 в 12:10 Источник Поделиться
Комментарии
1 ответ

для оптимизации этой функции - будет лучше, если вы дадите пример рабочего кода. Просто загрузите некоторый образец для того чтобы http://jsfiddle.net/.

В любом случае, чтобы уменьшить нагрузку на какие-либо анимации, использовать CSS-переходы по умолчанию.

-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;

А затем измените непрозрачность от 1 до 0, или изменить класс. Вот рабочий пример http://jsfiddle.net/x6fxx/ , работает гораздо быстрее, чем в jQuery скрипт, это на основе CSS решение, которое использует аппаратное ускорение ( в современных браузерах ).

5
ответ дан 30 октября 2011 в 09:10 Источник Поделиться