4

私はiCarouselを使用して、このカルーセルに取り組んでいました。MooToolsを使用すると、いくつかの画像で非常にうまく機能します。しかし、70枚の写真（それぞれ約30k）を追加すると、うまく機能しなくなりました。iCarouselのコードをじっくり見て回ったところ、かなりまともで安定しているように見えました。だからこれは私に考えさせられました：スクリプト（div内のdivをアニメーション化する）、MooTools、Ubuntu上のFirefoxに固有の問題overflow:hiddenですか、それともJavaScriptがあまり処理できないのですか？もしそうなら、いくらですか？

言うのは難しいと思いますが、JavaScriptがいつ遅くなり、使用できなくなるかを知ることは、できれば開発を始める前に、本当にまともです。

4

6 に答える 6

12

サンプルコードを見ると、次のようなことが行われていることに気づきました。

 $("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});  
 $("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});  
 $("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});  
 $("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});  
 $("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});  
 $("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});  
 $("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)});

70枚の画像（つまり70枚のサムネイル）がある場合、これは70個のイベントをDOMに接続することになります。これは実際には必要ではなく、観察している「鈍い」動作の原因である可能性が最も高いです。イベントの委任と、それがなぜ良いことなのかを読んでおくことをお勧めします。:) jQueryを使用している場合、これは関数を使用して簡単に実行できますlive。mootoolsにも同様の機能があると思います。そうでない場合でも、装備するのはかなり簡単です。私は過去にこことここでイベントの委任について議論しました。

于 2009-07-24T02:20:31.947 に答える
4

他の回答に加えて、ブラウザーで dom 要素を操作してアニメーション化するのは、canvas タグが提供するような直接描画 API と比較して非常に遅いという困難な経験から指摘します。JavaScript と DOM の間のブリッジだけでなく、属性が変更されるたびにコンテンツのリフロー ルーチンを実行するブラウザにも多くのオーバーヘッドがあります。

これを回避する方法としては、アニメーション化されたエレメントの css に display:absolute が設定されていることを確認する (したがって、ドキュメント フローから除外し、リフローの必要性を排除する) ことや、何かが発生したときにのみ DOM に触れることをコードで保証することなどがあります。実際に変更する必要があります。

dom ドキュメントフラグメントを操作してから dom に挿入することができます。これは、画面に表示されている dom の一部を操作するよりもはるかに高速です。

また、他の人が言及したイベント処理も。

Javascript スケーリング? はい、できます。ブラウザの DOM スケーリング? いいえ、おそらくそうではありません。たぶん、将来のブラウザはこれでより良くなるでしょう。

于 2009-07-24T03:24:19.060 に答える
3

Javascript は、言語として、適切にスケーリングします。実際、他のチューリング完全言語と同様です。

ただし、Javascript が最も頻繁に実行される環境である Web ブラウザーは、扱いにくく予測できない場所であり、カンボジアの 56K で IE6 を実行する Pentium III からクアッドコア EE まで、コードを実行する必要がある場合があります。 OC-12 に直接パッチが適用された Firefox 3.5 を実行しています。ブラウザーに組み込まれている Javascript インタープリターは、速度が大幅に異なります。

パフォーマンスの高い Javascript を記述することは、実際には、ユーザーが使用する可能性が高いブラウザーの予測可能な強みを活用しようとするプロセス、または少なくとも既知の弱点を回避するプロセスです。それは、ページを段階的にレンダリングおよびロードすることによって速度の錯覚を作成し、AJAX をインテリジェントに使用して応答性を高めることです。

スケーラビリティは、言語そのものよりも、Javascript が実行されている特定のシステムにどうしようもなく結びついています。

その上、あなたには選択肢がありません！Javascript は、どんな欠点があっても、非常に長い間存在することを期待すべき標準の 1 つです。

ところで-あなたの例で「スケーリング」しなかったのは帯域幅でした。2.1MB の画像をダウンロードすると、Javascript がどれほど高速であっても、カルーセルの速度が低下します。

于 2009-07-24T02:28:18.143 に答える
0

使用するブラウザに大きく依存します。50 行のフォームは Internet Explorer を無効にすると同時に、Opera または Firefox で非常に使いやすくなります。そのため、スケーリングはブラウザーに大きく依存する可能性があります。

于 2009-07-24T02:27:14.697 に答える
0

明示的なイベントとパラメーターを使用して行ごとに実行するのはばかげています。少しリファクタリングを検討する必要があります。明示的な ID を削除するには、クラスベースのハンドラーを設定するか、少なくとも親 ID をターゲットにして、子として添付する画像を見つけます。次のようにします。

<div id="example_6_frame">
    <ul>
        <li><a href="#"><img src="images/ex6_1t.jpg" alt="thumbnail 1" /></a></li>
        <li><a href="#"><img src="images/ex6_2t.jpg" alt="thumbnail 2" /></a></li>
        <li><a href="#"><img src="images/ex6_3t.jpg" alt="thumbnail 3" /></a></li>
        <li><a href="#"><img src="images/ex6_4t.jpg" alt="thumbnail 4" /></a></li>
        <li><a href="#"><img src="images/ex6_5t.jpg" alt="thumbnail 5" /></a></li>
        <li><a href="#"><img src="images/ex6_6t.jpg" alt="thumbnail 6" /></a></li>
        <li><a href="#"><img src="images/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
    </ul>
</div>

jsビット...

$("example_6_frame").getElements("img").each(function(el, i) {
    el.addEvents({
        click: function(e) {
            ex6Carousel.goTo(i);
        } 
    }); 
});

ここにも mootools の liveEvent 実装があります。http://dev.k1der.net/dev/live-events-pour-moootools/ - 上記に簡単に適応させることができます...

Element.implement({
    addLiveEvent: function(event, selector, fn){
        this.addEvent(event, function(e){
            var t = $(e.target);
            if (!t.match(selector)) return false;
            fn.apply(t, [e]);
        }.bindWithEvent(this, selector, fn));
    }
});

スクリプトが mootools scroll.js を使用して要素を見つけてスクロールする場合、最終的に特定の ID を残す必要がある場合があることに注意してください。そうは言っても、この iCarousel は iMask を書いたのと同じ男からのものなので、よく書かれているはずです...

于 2009-07-26T21:17:31.843 に答える
0

JavaScript は、XHR を使用して水平方向に非常にうまくスケーリングします。あなたが持っているのは、うまくスケーリングできない特定のアプリケーションです。ブラウザの JavaScript には、動作を遅くする特定の部分があります。この場合、処理されているイベントの数です。

于 2009-07-26T21:31:50.300 に答える