3

自分自身と多くの議論を重ねた結果、キャンバスをオーバーレイするdivを動的に作成することにしました。しかし、私は質問があります。divを動的に作成するのにどれくらいの費用がかかりますか？フルキャンバス（1000x1000）を16x16 divで埋めるとしたら、それはまったくの混乱でしょうか？そして、1000の隠されたdivがあったらさらに悪いでしょうか？（または表示：なし）？

または、マウスの座標をx、yの位置を保持し、画像をキャンバスにレンダリングする必要があるコンテナと比較する必要があります。

私は最初のものがより効率的であることに傾いていますが、私は確信が持てません。たぶん、これには中立的な立場があります。

返信にとても興味があります！御時間ありがとうございます。

（これが再投稿の場合、申し訳ありませんが、グーグルしようとしました）

4

2 に答える 2

4

それはすべて、DIV が DOM に挿入される方法に依存します。理想的には、メモリ内に DIV を構築し、単一のアクションでそれらを DOM に挿入する必要があります。これを行うにはさまざまな方法があります (さまざまな完全な例については、ベンチマーク テスト ケースを参照してください)。

jQuery を使用する場合、次のように要素をメモリ内に構築できます。

var i = 1000;
var aHTML = [];
while (i--) {
  aHTML.push("<div>a new div</div>");
}
var sHTML = aHTML.join("");
var domElmt = $(sHTML);

次に、その DIV を DOM に挿入します。

$('body').append(domElmt);

jQuery を使用しない場合はcreateDocumentFragment、cloneNode、appendChild、 などを使用する必要があります。これらはネイティブ ブラウザー メソッドであり、最速になります (Intel Q8200 で Chrome 21 を使用すると約 2 倍の速度を達成できます) が、これらのネイティブ メソッドを使用すると、複雑な DOM 構造を構築する必要がある場合は、使用が難しくなります。ネイティブ メソッドには、クロス ブラウザ サポートの問題もある可能性があります。

これがどのように機能するかに興味がある場合は、John Resig によるこの古い投稿をチェックしてください: http://ejohn.org/blog/dom-documentfragments/

これを、各 DIV で DOM にアクセスするメソッドと比較してください。

var i = 1000;
while (i--) {
    $('body').append("<div>a new div</div>");
}

コードの行数は少なくなりますが、非常に非効率的です。

jsPerf DOM 挿入ベンチマークを実行する

Chrome を搭載した私のコンピューターでのベンチマークでは、DIV をメモリにレンダリングして一度にすべて注入する方が、個々の DIV を DOM に個別に注入するよりも 38 倍高速です。

最終的に、DOM トラバーサル/操作は避けたいものです。反復的な DOM トラバーサル/操作はコストのかかる操作であり、DIV の 1000x1000 キャンバス (特に古いブラウザー) では確実に行き詰まります。

編集:この質問を投稿して以来、@RobG、@Devu と私は、さまざまな DOM 挿入方法のさまざまなベンチマーク テストをまとめました。一部のブラウザー (Chrome、Safari)createDocumentFragmentでは、cloneNode、 などを使用するのが最速の方法ですが、驚くべきことに他のブラウザー (FireFox 15、Internet Explorer など) では、 を介して長い HTML 文字列を作成し、array.join()via を挿入するinnerHTMLのが実際には最速の方法です。

于 2012-09-14T07:51:10.267 に答える
0

一般的な回答: 主にアプリケーションに依存し、これについてはほとんどわかっていません。一般に、HTML が複雑になればなるほど、ブラウザーでのレンダリングに時間がかかり、より多くのメモリが必要になり、DOM の変更にはより多くの費用がかかります。一致する CSS ルールと Javascript 操作についても同じことが言えます。

次のアプローチをお勧めします。いずれかのアプローチを試してください。小さなことから始めて、HTML の要素数を最終的に必要な数まで増やします。おそらくモバイルマシンなどで、さまざまなブラウザーで試してください。CPU とメモリの使用量を測定し、これから作業してみてください。

于 2012-09-14T07:51:47.247 に答える