ズームインしたときの問題の問題

StackOverflow https://stackoverflow.com/questions/3698787

質問

私は、私が開発しているサイトのために、Mootoolsを広範囲に使用しています。しかし最近、私はサイトにズーム（ブラウザを使用して）ズームするときにアニメーションが大いに遅くなることに問題があることに気付きました。この問題の理由は何ですか？または、この問題はMootools自体に継承されていますか。これは、Chrome 6.0.472およびFirefox 3.6.8で発生します。

ありがとう、ニティン

役に立ちましたか？

解決

ここでは、最適化の速度に関して多くのことが間違っています。

遅くなるように見えるこのマウスオーバーコードを見てみましょう。

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'});

明らかにこれはそうであるように機能しますが、それはとても間違っているので、どこから始めればいいのかわかりません。

アイデアは、繰り返しのタスクを抽象化してセットアップして、それらが1つのものとして行われるようにすることです。

上記のコードを行ごとに考えてみましょう。

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

とにかくMootoolsアプリにとってこれは間違っています、それは this.getFirst().setStyle("left", 0);

this.getFirst() ルックアップであり、キャッシュする必要があります - それは遅いものではありませんが。

その後、悪い部分が来ます。

すべての子Divsを3回選択し、すべてのスパンを2回選択します。選択は適用できません。 非常に高価です

FX.MORPHオプションをリセットしてください。すべてのマウスオーバーイベントが変更されていません（マウスエンテルとムーセリーブには異なる期間があるようですが、これは高価です）

このコードを検討してください：

[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 APIを実際に使用していない場所がたくさんあります。

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/intervalの文字列を使用しないでください

など

あなたは本当にこれをすべてリファクタリングし、それを「素敵」にするのに一日を作ることができますが、それはそれだけの価値があるでしょう。

また、チェーンについて学びます

$("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 Elementメソッドは元の要素を返す傾向があるため、最後の関数の応答を取得し、さらに適用できます。

1は読みやすさの方が優れており、2はより速くなります。

また。グローバル変数が多すぎるため、スコープチェーンの検索がより高価になります。これは、多くのコールアップや場所に影響を与えます。機能や閉鎖から実際のグローバルなVARにアクセスする必要がある場合は、window.varnameなどを使用する必要がある場合は、適切に名前を付けてください。

ここでのもう1つの可能な改善は、イベント委任の使用です（イベントの泡立ちによりイベントが両親にDOMツリーを発射します。MootoolsにはAPIがあり、親要素に特異なイベントを追加し、NNNを添付する必要はありません。すべての子供へのイベント） - それを調べてください。

PSこれを間違った方法で取ってはいけません - それはあなたの作品をくすぐることを意図したものではなく、それを次のレベルに持ち込むのに役立つ建設的な（私が願っています）アドバイスです。幸運を ：）

他のヒント

Mootoolsや、ブラウザがアニメーション中にズームしているかどうかをチェックする他のライブラリで特定のコードを見たことがないので、ブラウザがより多くのCPUを使用してズームプロセスを計算するため、アニメーションが遅くなると思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top