趣味のプロジェクトとして、パフォーマンスの高い方法でドラッグ可能な64*64タイルベースのマップのプロトタイプを作成しようとしています。これが機能する場合は、たとえば1024x1024タイルに拡張したいと思います。
現在のアプローチ
すべての「タイル」divを含む「マップ」div。このjqueryプラグインを使用して、マップdivをドラッグ可能にします。タイルdivにはcssスプライトの背景があるため、imgへの呼び出しは1回だけです。これは、いくつかのタイルではうまく機能しますが、タイルが増えると非常に遅くなります。
私が試し
たことこれらすべてのタイルのdomリフローを回避するために、それらをラッパーdivに配置して、別のレイヤーにレンダリングされ、1つとして移動できるようにしたいと考えました。動作しませんでした。
マップdivの親divオーバーフローを非表示に設定して、冗長なタイルがレンダリングされないようにしました。動作しませんでした。
jqueryへの依存関係を削除し、ドラッグ可能な実装を自分で実行してみました。同様に悪い働きをしました。だからうまくいきませんでした。
背景画像を背景色に切り替えてもパフォーマンスは向上しないため、問題はありません。
まだ実装方法がわからないアイデア
タイルがリフローをトリガーしないようにするにはどうすればよいですか？
見えないタイルを設定すると、見えないように設定されますか？少しの努力でこれを実装できますが、これによってパフォーマンスが向上するかどうかはわかりません。
助言がありますか？