0

JavaScript で DOM 要素にアクセスするのは遅いため、より応答性の高いページを作成するには、次のことを行う必要があります。

  1. アクセスされた要素への参照をキャッシュする

  2. ノードを「オフライン」で更新し、ツリーに追加します

  3. JavaScript によるレイアウトの修正を避ける

最初の2つのことを行う方法を誰か教えてもらえますか?

ありがとうございました

4

1 に答える 1

2

これらはいくつかの抽象的な質問であり、必ずしも互いに関連しているとは限りません。

1. アクセスされた要素への参照をキャッシュする

参照をキャッシュすることは実践であり、必要になる場合もあります。要素への参照をローカルに (または、グローバルに) 維持する作業はかなり単純です。のような DOM メソッドを操作する場合document.createElement()、通常、保存先の変数があります。これは、後で使用するためにキャッシュできる参照です。document.getElementById要素への参照を返す、参照document.getElementsByTagNameのリストを返すdocument.querySelectorAll、など。

2. ノードを「オフライン」で更新し、ツリーに追加します

「オフライン」と言うとき、あなたが参照しているコンテキストがよくわかりません。これは、要素 ( のような文字列を含む<div>) が DOM に追加される前ですか?

要素を操作するには、主に次の 3 つの方法があります。

  • document.createElement(とelem.appendChild)

    やや遠い過去のある日、これがページのコンテンツを操作するための絶対的な方法でした。それは、DOM とその住人をアドレス指定して操作する API のようなプログラムによる方法に慣れている「Web 開発者」コミュニティのサブセットにアピールしました。それはほとんど本当のコードのように見えました。

    確かに、コードのいくつかはちょっととりとめのないものであり、それらを繰り返し作成し、追加し、追加することは、それを作成する必要のない人にとっては非常にクールに見えました.

    を賢くcloneNode使えば、DOM ノードでより妥当な結果を得ることができます。しかし、ここ数年までは良い選択肢ではなかったと思いcloneNodeます。私はそれ、カーゴカルトとすべてを誤って覚えているかもしれません。私が間違っている場合は修正してください。

    その後、IE がやってきて、私たちに...

  • elem.innerHTML

    サプライズ！これは非標準でした。どうして彼らは？唯一の問題は、それが本当に速かったことです。非常に高速です(IE6/7 も発生しなかったように、私たちは皆、忘れたいと思っています)。

    DOM は... とにかく、ブラウザは遅くて非効率的で、とにかく実際のコードを実際に実行していなかったので、DOM の遅さは許容されました。しかし、その後、何らかの理由で、innerHTMLステージ左とグルーヴィーに入りました、おい、それはDOMメソッドよりも高速でした. そして、「一日中DOMメソッドの代わりにマークアップを見つめるのが好き」な方法でエレガントに。

    最終的には誰もが.innerHTML時流に乗るようになり、現在では事実上の標準となっています。速いですよね？

    良い。依存します。やるのelem.innerHTML = "<p>Hey!</p>"が早かったです、うん。そうでしたelem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'。当然のことながら、人々はそれが財産であると考えました。

    for 1..500 element.innerHTML += '<p>Medusa!</p>';

    そこに疑似コード。問題はどこですか？私たちの活発な友人にとって、クリプトナイト+=のようなものです。とんでもなく悪い、絶対にやらない、考えてはいけない、悪い考えです。なんで？私の知る限り、内部コンテンツを攻撃する方法に関係しているため、毎回DOMを「解体」しています。か何か。これはDOMを泣かせます。innerHTML.innerHTMLelem.innerHTML += '...mayhem...'

    DOM を怒らせないでください。

  • documentFragment

    そのため、ある時点で (それは常に存在していたのでしょうか? DOM レベル 3、それが何かを意味する場合)、documentFragmentシーンがクラッシュしました。ただし、それに関するMDN の簡単なメモはそれを要約しています。メインDOMとはNode別のものです。お父さんの DOM に移動する前に、何かを入れた小さな箱のように。

    速度に関しては、ほとんどの場合遅れ.innerHTMLており、すべて DOM プログラムなどです。気の利いた。

キャッシングに関して言えば、その多くは、コードをどのように構造化し、スコープを有利に使用するかに関係しています。たとえば、次のとおりです。

window.addEventListener('load', function () {
  var target = document.getElementById('target'),
      source = document.getElementById('source'),
      ...

  source.addEventListener('click', function () {
    var words = source.getElementsByTagName('span'),
        total = words.length,
        word;

    while (word = words[--total]) {
      target.appendChild(word);
    }
  });

});

http://jsfiddle.net/userdude/T6YLZ/

ハンドラーのスコープの上にtargetandを保持するので、後でそれらにアクセスするときに既にそれらを持っています。to untilを追加しないので、 to move to untilが発生するまで、すべての要素を取得することはできません。sourceclickwordssourcewindow.onloadspanwordstargetsource.click

documentFragmentあなたはあなたの用語で s を説明しているようです。そして、彼らはクールです。私は最近彼らに出くわしたばかりですが、知っている人にとっては、彼らは数年以上そこにいたようです. したがって、あなたがその 1 人である場合は、非フラグメント DOM に挿入する前に smust.use.dom.methods(now)を使用してください。documentFragment

ただし...elemn.innerHTMLマークアップを追加しているため、 を使用する場合があることに注意してください。テンプレート、AJAX 応答マークアップなどがあるかもしれません。

+=するときはしないでくださいelem.innerHTML。

于 2013-01-12T13:43:53.033 に答える