مشكلة موتوول عند التكبير

Question

أنا أستخدم Mootools على نطاق واسع لموقع أقوم بتطويره. لكنني لاحظت مؤخرًا مشكلة في أن الرسوم المتحركة تبطئ كثيرًا عندما أقوم بتكبير (باستخدام المتصفحات تكبير) في الموقع. ما الذي يمكن أن يكون سببًا محتملًا لهذه المشكلة؟ أم أن هذه المشكلة ترث في 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() هو بحث ، يجب أن يتم تخزينه مؤقتًا - على الرغم من أن هذا ليس بطيئًا.

ثم يأتي الجزء السيئ.

يمكنك تحديد جميع Divs Child 3 مرات وكل تمتد مرتين ، حيث لا ينبغي أن يكون الاختيار قابلاً للتطبيق. غالي جدا

يمكنك إعادة تعيين خيارات FX.Morph لكل حدث Mouseover حيث لا توجد تغييرات (على الرغم من أن لديك مدة مختلفة لـ Mouseenter و 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'
            });
        }
    });
});

سيوفر الكثير من المعالجة على الأحداث.

وبالمثل ، هناك الكثير من الأماكن التي لا تستخدم فيها حقًا واجهة برمجة تطبيقات 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);, ، لا تستخدم السلاسل مع setTimeout/الفاصل الزمني لأنه يجبر التقييم والتراجع ولكن وظائف 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 أسرع.

ايضا. لديك الكثير من المتغيرات العالمية مما يجعل عمليات البحث في سلسلة النطاق أكثر تكلفة ، وهذا سيؤثر على العديد من عمليات الاستدعاء والأماكن. حاول أن تسمي المساحة بشكل صحيح ، إذا كنت بحاجة إلى الوصول إلى Vars Global Real من الوظائف والإغلاق ، فاستخدم Window.Varname وما إلى ذلك.

هناك تحسن آخر محتمل هنا هو استخدام تفويض الأحداث (سوف يتسبب فقاعات الأحداث في قيام الأحداث بإطلاق شجرة دوم للآباء والأمهات ، لدى Mootools واجهة برمجة تطبيقات للتعامل معها حتى تتمكن أحداث لجميع الأطفال) - ابحث عنها.

ملاحظة: من فضلك لا تأخذ هذا بطريقة خاطئة - لا يُقصد به أن يطرد عملك وهي مجرد نصيحة بناءة (آمل) يمكن أن تساعدك في إحضارها إلى المستوى التالي. حظا طيبا وفقك الله :)

Answer 2

لم أر أي رمز محدد في Mootools أو أي مكتبة أخرى تتحقق مما إذا كان المتصفح يتكبير أثناء الرسوم المتحركة ، لذلك أعتقد أن الرسوم المتحركة تبطئ ، لأن المتصفح باستخدام المزيد من وحدة المعالجة المركزية لحساب عملية التكبير.