0

私が計画しているプロジェクトは、ブラウザのビューポートが動き回ってさまざまなグラフィック環境を表示する「インタラクティブな世界」スタイルのエクスペリエンスに基づいています。すべてが流動的で、ページ間の区切りがあってはなりません。プロジェクトはjs/html5/css3にあります

これがもたらす問題は、「世界」全体がおそらく8〜15,000 pxの平方になることです(これも回転し、その上にさまざまなpngアルファオーバーレイがあります)

私はいくつかのテストを実行するつもりでしたが、これにアプローチする方法はたくさんあり、最も流動的なものを探しています。ブラウザのレンダリングエンジンの内部動作についての私の知識はあまりよくないので、周りに聞いてみようと思いました。

グーグルマップが十分に流動的ではない(ブロックが多すぎる)ため、「タイリング」アプローチを使用することはできません。回転すると頭痛が発生します。数学変換を実行して、どのタイルをどの角度でロードするかを決定します。これが2です。私がそれを要約した選択肢:

(1)「巨大な」画像アプローチ ここに画像の説明を入力してください

これの利点は、一度ロードするとすべてが簡単になることです。欠点は、画像キューが基本的に2つの画像(オーバーレイと巨大な画像)になるため、巨大になり、インクリメンタルプリローダーを表示できないことです。

(2)画像セグメント

ここに画像の説明を入力してください

利点は、10%の増分で画像キューを備えたプリローダーを表示できることです(10x画像)

質問:

2番目のアプローチでは、9つの個別の計算セットが実行されるため、ブラウザーのレンダリングエンジンにさらに負担のかかるオーバーヘッドが発生しますか、それともブラウザーエンジンは、最初にレンダリングされてから全体として更新されると、それらを1つのペイントされた領域と見なしますか?または、DOMが変更される(回転するなど)たびに、ブラウザーは同じ変換/再描画プロセスを9回実行する必要がありますか?

どうもありがとう。

4

1 に答える 1

0

後で多くのテストを行います: 結果: 大きな画像を使用してください。

于 2012-08-23T02:58:26.500 に答える