Проблема MOOTOOLS при увеличении

Question

Я широко использую Mootools для сайта, который я работаю. Но недавно я заметил проблему, что анимации замедляют много, когда я увеличиваю (используя браузеры zoom in) в сайте. Что может быть возможной причиной этой проблемы? Или эта проблема наследует в самой Mootools. Это происходит в Chrome 6.0.472, а также Firefox 3.6.8.

Спасибо, нитин

Answer 1

Многие вещи здесь неверны в отношении оптимации скорости.

Позволяет взглянуть на этот код мыши, который, кажется, замедляется:

this.childNodes.item(1).style.left="0px";
this.getElements('div').setStyles({'opacity':'1'});
this.getElements('div').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('span').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('div').morph({'left':'-28px'});
this.getElements('span').morph({'left':'-30px','color':'#FFF'});

Очевидно, это будет работать, как это делает, но это так очень неправильно, я не знаю, с чего начать.

Идея состоит в том, чтобы аннотация и настроить повторяющиеся задачи, чтобы они были сделаны как от одного.

Рассмотрим строку по строке код выше:

this.childNodes.item(1).style.left="0px";

Это неправильно для приложения Mootools в любом случае, это должно быть this.getFirst().setStyle("left", 0);

то this.getFirst() Это поиск, он должен быть кэширован - хотя это не медленный.

Затем приходит плохая часть.

Вы выбираете всех детей Rivs 3 раза, и все промежутны дважды, где нет выбора не должно применимо. ОЧЕНЬ ДОРОГО

Вы сбрасываете параметры FX.Morph каждые события мыши, где нет никаких изменений (хотя у вас есть другая продолжительность к мышеменям и MouseLeave - это дорого)

Рассмотрим этот код:

[document.id("menu1"), document.id("menu2")].each(function(el) {
    // use element storage to save lookups during events
    el.store("first", el.getFirst());
    el.store("divs", el.getElements("div"));
    el.store("spans", el.getElements("span"));

    // store the fx.morph options once and for all, no need to do so
    // on every event unless you are changing something
    el.retrieve("divs").set("morph", {
        duration: 'normal',
        transition: 'sine:out',
        link: 'cancel'
    });

    el.retrieve("spans").set("morph", {
        duration: 'normal',
        transition: 'sine:out',
        link: 'cancel'
    });

    // add the events
    el.addEvents({
        mouseenter: function(e) {
            // retrieve the saved selectors from storage and do effects
            this.retrieve("first").setStyle("left", 0);
            this.retrieve("divs").morph({
                "left": -28
            });
            this.retrieve("spans").morph({
                'left': '-30px',
                'color': '#FFF'
            });
        }
    });
});

Это сэкономит много обработки на событиях.

Точно так же есть много мест, где вы на самом деле не используете API Mootools.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> Нет необходимости в $, это не jQuery.document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); -> Используйте MOOTOOLS var timer = (function() { ... }).delay(5000);, не используйте строки с Settime / интервал, когда он заставляет Eval и отразить, но чистые функции Anon

и т. Д.

Вы действительно можете сделать выходной день из рефакторинга всего этого и сделать его «приятно», но это будет того стоит.

Кроме того, узнайте о цепочке

$("ribbon").set('morph', {duration:'long',transition: 'bounce:out'});
$("ribbon").morph({'top':'-10px'});
$("ribbon").addEvents({

Это вызывает селектор 3 раза. вместо этого вы можете:

1. Храните его. var ribbon = $("ribbon"); ribbon.set...
2. цепь это. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - Методы элементов MOOTOOLS имеют тенденцию возвращать исходный элемент, чтобы вы могли получить ответ последней функции и применить больше к нему.

1 лучше для удодоровимости, 2 быстрее делать.

также. У вас есть слишком много глобальных переменных, которые создают вашу цепочку охвата цепочками более дорогими, это повлияет на многие вызов и места. Попробуйте правильно попробовать пространство пространства имен, если вам нужно получить доступ к реальным глобальным варкам из функций и закрытий, используйте окно. И т. Д. И т. Д.

Еще одним возможным совершенствованием здесь будет использование делегации событий (пузырька событий приведет к тому, что события выстрелили на дерево DOM для родителей, Mootools есть API для справиться с ним, чтобы вы могли добавить сингулярные события на родительские элементы, и не должны придавать NNN События всем детям) - посмотрите.

PS Пожалуйста, не принимайте это неправильно - это не предназначено для мусорной работы, и это просто некоторые конструктивные (я надеются) совет, который может помочь вам довести его на следующий уровень. удачи :)

Answer 2

Я не видел ни одного конкретного кода в Mootools или любой другой библиотеке, которая проверяет, увеличивается ли браузер во время анимации, поэтому я думаю, что анимация замедляет, поскольку браузер использует больше процессора для вычисления процесса масштабирования.