5

たとえば、Javascript を使用して処理したい HTML ファイルがあるとします。例えば：

  • spanまたはdivラッパーなどのいくつかの DOM 要素を追加します。
  • 基本フォント サイズ、行の高さなど、ドキュメントのスタイルを少し変更します。
  • ハイフンターを使用してエンティティを追加し­ます。

これを行う最も効率的な方法は何でしょうか。つまり、最小限のリフローで行いたいと考えています。

理想的なケースは、最初のレイアウトの前に JS コードを実行することです。これは可能ですか？ページが表示される前に高価なスクリプトを実行するのは一般的に悪い考えです。これは、ページがしばらく空白に見えるため、非常に悪い経験です. ただし、オフラインで作業するにはこれが必要であり、これは私のプロジェクトの問題ではありません。

または、すべての dom の変更を一度に行う方法、つまり、すべての変更が完了した後にリフローをトリガーする方法はありますか?

4

4 に答える 4

6

いくつかの方法があります。それらすべての主な目標は、最終的に1つ（または少なくとも可能な限り少ない）のリフロー/リペイントを引き起こすことです。

オフDOM要素

DOMに追加せずに要素を操作し、すべてがセットアップされたら、すべてを一緒に追加することができます。

これに関する唯一の問題は、まだDOMにない要素にはオフセット寸法がないため、コードがオフセット寸法を参照する必要がある場合です。

var container = document.createElement('section'); //not in the DOM yet
//do some extensive work here to prepare the doc
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

Docフラグメント

このテーマのより形式化された、可能性のある改善されたバリエーションは、パフォーマンス上の利点をもたらすドキュメントフラグメントです（明らかに）。これらは事実上、表示されない2番目の別個のDOMです。

弦

おそらく、これらすべての中で最も速いのは、ドキュメントを文字列として作成することです。明らかな意味は、DOMメソッドを使用できないことですが、文字列の処理と正規表現（もちろん、HTMLでは理想的ではありません）に満足している場合は、検討する価値があります。

最後に、速度が重要であり、多くの計算や文字列処理を行う必要がある場合は、Webワーカーを利用することをお勧めします。これらはDOMと直接通信することはできませんが、タスクをそれらにアウトソーシングすることができ、重要なことに、それらは別のスレッドで非同期的に動作します。

于 2012-07-07T10:46:09.463 に答える
3

からを削除しdocumentElement、document変更して、に追加し直しdocumentます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>...</title>           
    </head>
    <body>
        <script type='text/javascript'>
var docElem = document.documentElement,
    parentNode = docElem.parentNode,
    nextSibling = docElem.nextSibling;
parentNode.removeChild(docElem); // reflow
// ...
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr'));
// ...
parentNode.insertBefore(docElem, nextSibling); // reflow
        </script>
    </body>
</html>

これにより、2回のリフローと、0〜2回の追加の再描画がトリガーされます。

jsFiddle

于 2012-07-07T11:32:58.020 に答える
0

コンテンツをリフローするかどうかはブラウザ次第だと思います。そして、スクリプトの実行が完了するまでそれを行わないようにしています。ここで重要なのは、たとえば、ドキュメントの本文に div を追加すると、DOM の再計算が発生することです。そのためには、documentFragment を使用して要素を追加し、それ自体を本文にフラグメント化できます。あなたの場合、1つの要素を異なるコンテナに追加する必要がある場合、それはあまり役に立ちません。

documentFragment に関する追加情報: http://ejohn.org/blog/dom-documentfragments/

于 2012-07-07T10:42:09.217 に答える
-1

ページが読み込まれる前に、スタイル要素やDOM要素を操作することはできないと思います。最初にロードされ、次にページの調整を開始します。私はページをロードして隠してそれを微調整して表示します。隠す方法：

  1. すべてが画面のX/Y座標の外側に読み込まれ、次にuを0,0に設定します
  2. コンテンツページデータのスタイルが設定されているDIV：表示：なしまたは可視性：非表示http://www.w3schools.com/css/css_display_visibility.asp詳細についてはこちらを確認してください。
  3. 親ページの所有者が子ページを制御できるため、1ピクセルのiframe内にページを読み込むことができます。微調整を終えたら、iframeのサイズを変更し、フレームを非表示にします。
  4. Zインデックスを使用し、すべてを隠すフルサイズの不透明なDIVを黒または白に配置します。準備ができたら取り外してください

あなたのスタイルに合ったものを選んでください。

于 2012-07-07T10:46:17.143 に答える