2009-11-02 28 views
8

高度なJSインターフェイスとゲームを構築するときに、ブラウザがJSのメモリをどのように扱うかを詳しく調べなければならないことが分かりました。グラフィックスの多くがありブラウザでJavaScriptメモリはどのように機能しますか?

  • ページにJS-生成されたコンテンツ の多くがあり

    • :ときに、メモリおよびJavaScriptでの私の経験では、メモリがgloggedしまうことです(とアニメーションと計算が遅い/遅れになります)ページ上の (img-elements)?

    私は自分の記憶を新鮮に保つために、キャッシュされメモリに保持されないので、ドキュメントの先頭からできるだけ多くのHTMLコードを含める必要があると結論づけました。もちろん、現在使用されていない要素はすべて削除してください。

    これ以上の情報がありますか?リソース?リンク?

    +0

    「キャッシュされ、メモリに保持されていない」とは、具体的にはどういう意味ですか?それは私には意味をなさない。 –

    +0

    私はこのハードウェアのプロです。私は、ファイルがキャッシュまたはメモリから読み込まれる場合、違いがあると私は思っています。しかし、再び、キャッシュされたファイルはすべてメモリを通過するかもしれません。あるいは、この例ではメモリはキャッシュと同じかもしれません。私が言ったように、私はそれがどのように一緒に収まるかを本当に知らない。だからこそ私が尋ねる理由は次のとおりです。 – Jens

    答えて

    7

    心に留めておくべきいくつかのもの:

    • はIEがDOMの複雑さによって殺さここwebworkersには、いくつかのより多くのリンクがあります。より多くの要素がページの一部であるほど、それは遅くなります。私はそれらの上の3000要素(あなたが10の列と100の行を持つグリッドを持っているなら、それが1000の要素を右に持っている)で目立つようにページが減速するのを見ました。正しいアプローチは、通常、隠された部分をDOMからアンロードすることです(デタッチする)。
    • IEは、JavaScriptハンドラが接続されている場合、HTML要素を正しく解放していないという長い歴史を持っています。頻繁にリフレッシュされる長いページのページがある場合は、IEのメモリリークを読み、その問題を回避する方法をお読みください。
    • すべてのブラウザは、画像をメモリに非圧縮で保存します。したがって、バックグラウンドで膨大な画像があらかじめロードされている場合、それは一般的には悪い考えです。
    • DOMプロパティを更新するとページのリフローが発生し、複雑なページでは時間がかかることがあります。場合によってはDOMプロパティ(たとえばoffsetHeight)を取得することさえ非常に遅くなることがあります。

    一般に、JavaScript自体はパフォーマンスのボトルネックではありません。それを殺すのはDOMとのやりとりです。DOMに触れないコードはパフォーマンス上の問題がほとんどありません。ここでは、DOMとのやりとりを可能な限り少なくし、DOMの複雑さをできるだけ低く抑え、ページのリフローを繰り返さないようにしています。

    +0

    Allright。したがって、DOMとのやり取りも問題です。特に大きなもの。知っておいてよかった。 DOMツリーを変更/縮小するとどうなりますか?それはメモリに追加されますか(リビジョンを保存しますか?)それは負荷を本当に軽くしますか? "ページリフロー"とは、視覚的な書式設定モデルに従ってすべてのドキュメント要素の更新を意味しますか? – Jens

    +0

    これは役に立つかもしれません:http://www.slideshare.net/lsimon/go-with-the-reflow、また、これは:https://library.mozilla.org/Faster_HTML_and_CSS:_Layout_Engine_Internals_for_Web_Developers –

    +0

    DOMツリーはありません改訂されました。 DOMツリーから何かを切り離し、javascriptから参照が残っていない場合(プロトタイプチェーンのために聞こえるほど簡単ではない)、ガベージコレクションされます。 –

    3

    すべてのHTMLは、「最初からインクルード」されているかどうかに関わらず、メモリに保持されます。ほとんどの場合、現在のページのすべての画像コンテンツ。最小限の時間で、いつでも画面上に表示されているものは、その時点でメモリに保存されます。

    +0

    ブラウザがメモリをどのように処理するかには限界があります。つまり、遅れの問題に取り組む前に、JavaScriptで行うよりも、フラッシュでもっと激しいスクリプトをやり遂げることができます。何かが私のスクリプトを正しく保持していますか?一般的なブラウザスクリプトのいくつかの制限? – Jens

    +0

    非常に高速なスクリプトエンジンを備えているため、Flashでより強力なスクリプトを作成できます。そのエンジンの変種(Tamarin)は現在Firefoxに搭載されていますが、SafariとChromeはともに驚異的に速い新機能を備えています。ああ、Internet Explorerはやや遅れている。 –

    +0

    ああ、私はcです。だから、それは遅くて古いエンジンです。数字。私はChromesエンジンが本当に好きです。 – Jens

    2

    正直言って、あなたがしていることにもっと依存しがちです。あなたがそれらとやりとりしていない場合は、たくさんのグラフィックスがjavascriptにスクワットすることはありませんが、巨大なページにさまざまな要素が詰まっていて、ドキュメント全体を単一の要素で検索している場合は、物事は完全に。

    大量のイベントをページに追加するなどの問題がありました。 1つのページで非常に多くのループを実行し、タイマーが多すぎます。

    JavaScriptのパフォーマンスが問題で、集中的なjavascriptを使用する予定がある場合は、webworkersをご覧ください。

    +1

    ウェブワーカーを使用することはまだメインストリームではありません。現代のブラウザーはまだウェブの農村の世界に到達していません。 –

    +0

    興味深い読書。私のためにすべてのベータに:) – Jens

    関連する問題