javascriptシリーズのDOM(二)
4476 ワード
原生DOM拡張
次に、2つの従来のDOM動作について述べた.文書セグメントを作成し、要素ノードを巡回する.私たちは雨後の竹の子のような倉庫を知っています.多くの仕事の一部は優れたDOM操作APIを提供しています.原生のいくつかの方法と属性が見えますが、まだ柔軟で素早く操作できません.いくつかの実用的な拡張方法をまとめました.after()とbefore()を含み、
A:after()とbefore()
B:text()
DOM性能最適化
DOM操作において、私たちはその期待される機能を完成させるとともに、最適化問題に最も関心を持つべきです.DOMの操作はとても性能を消費して、各位の前端達がとっくに耳にしたことがあることを信じて、前文の中で述べたcreateDockMentFraament()は1つの誘因ですと言えます.DOMの操作の効率はどうしてこんなに低いですか?遅いですか?なぜDOM操作は性能最適化の主攻点なのですか?reflowとrepaintという子供がいるからです.また、ブラウザは実行結果の正確性を確保するために、何かを求めたらすぐに実現します.もし彼が貪欲で飽きることがないなら、操作の範囲は比較的に大きくて、回数は比較的に頻繁です.この結果は一本だけで十分です.まず、この二人の悪い男の子を紹介してください.reflowは構造の変化を意味します.例えば、一つの要素の幅の高さを変えて、それぞれの元素の位置を変えます.repaintはスタイルの変化を意味しています.例えば、divは背景色を調整しました.しかし、位置は変わっていません.私たちが操作する元素だけを変えます.だから、通常はrepaintの価格はreflowより小さいです.それに比べて、スピードも速いです.
私たちは問題の根源を発見した以上、これらの問題を解決することです.結局この二人のおならは私達の実の息子ではないので、お尻をたたくべきです.私の原則の一つはもちろんDOMの操作をできるだけ減らすことです.彼らにもっと自由気ままな機会を与えません.ここにはいくつかの原則があります.まずはクリエートドームFraamentから話しましょう.
A:クリエートドームFraament()
実例は前の文を見て、もし私達はこの箱がないならばと考えてみて、そのdocumentは各構成要素ごとに、ページは再構成して順次で、結果は予想できます.薬の添加した元素をまず包んで、この所定の箱(文書の破片)に預けて、文書に一度に添付します.jQueryはこのようにしています.
B:display:none
displayを「none」に設定し、この元素を現在のDOM構造から一時的に削除するだけで、見えなくなります.このようにプライベートで彼をからかうことができて、この構造は大きい容器で、多くの事をすることができて、たとえば1山の元素を添加します.すべてが終わったら回復します.このようにして再構成は一回だけです.
C:クラス
これは分かりやすいです.属性を修正する時には、一つ一つ修正して何回も訪問しますが、クラスを交替するのは大量操作に相当します.一回DOMに訪問すればいいです.もちろん性能が向上します.
D:変数の保存
変数でDOMオブジェクトを何度も取得するのではなく、最も典型的なのはfor(var i=0;i＜list.length;i＋)とfor(var i=0、l=list.length;i＜＋)の効率比較で、サイクルごとに長さを取得しますが、気を悪くして体に傷をつけます.普段書いている時にこの細部に注意しましたか?
次に、2つの従来のDOM動作について述べた.文書セグメントを作成し、要素ノードを巡回する.私たちは雨後の竹の子のような倉庫を知っています.多くの仕事の一部は優れたDOM操作APIを提供しています.原生のいくつかの方法と属性が見えますが、まだ柔軟で素早く操作できません.いくつかの実用的な拡張方法をまとめました.after()とbefore()を含み、
A:after()とbefore()
1 function after(elem){
2 if(this.parentNode){
3 this.parentNode.insertBefore(elem,this.nextSibling)
4 }
5 }
6 function before(elem){
7 if(this.parentNode){
8 this.parentNode.insertBefore(elem,this)
9 }
10 }B:text()
1 function text(elem){
2 var str="";
3 //
4 elem=elem.childNodes||elem;
5 for(var i=0;i<elem.length;i++){
6 // ，
7 str+=elem.nodeType!=1?elem.nodeValue:text(elem.childNodes[i]);
8 }
9 return str;
10 }DOM性能最適化
DOM操作において、私たちはその期待される機能を完成させるとともに、最適化問題に最も関心を持つべきです.DOMの操作はとても性能を消費して、各位の前端達がとっくに耳にしたことがあることを信じて、前文の中で述べたcreateDockMentFraament()は1つの誘因ですと言えます.DOMの操作の効率はどうしてこんなに低いですか?遅いですか?なぜDOM操作は性能最適化の主攻点なのですか?reflowとrepaintという子供がいるからです.また、ブラウザは実行結果の正確性を確保するために、何かを求めたらすぐに実現します.もし彼が貪欲で飽きることがないなら、操作の範囲は比較的に大きくて、回数は比較的に頻繁です.この結果は一本だけで十分です.まず、この二人の悪い男の子を紹介してください.reflowは構造の変化を意味します.例えば、一つの要素の幅の高さを変えて、それぞれの元素の位置を変えます.repaintはスタイルの変化を意味しています.例えば、divは背景色を調整しました.しかし、位置は変わっていません.私たちが操作する元素だけを変えます.だから、通常はrepaintの価格はreflowより小さいです.それに比べて、スピードも速いです.
私たちは問題の根源を発見した以上、これらの問題を解決することです.結局この二人のおならは私達の実の息子ではないので、お尻をたたくべきです.私の原則の一つはもちろんDOMの操作をできるだけ減らすことです.彼らにもっと自由気ままな機会を与えません.ここにはいくつかの原則があります.まずはクリエートドームFraamentから話しましょう.
A:クリエートドームFraament()
実例は前の文を見て、もし私達はこの箱がないならばと考えてみて、そのdocumentは各構成要素ごとに、ページは再構成して順次で、結果は予想できます.薬の添加した元素をまず包んで、この所定の箱(文書の破片)に預けて、文書に一度に添付します.jQueryはこのようにしています.
B:display:none
displayを「none」に設定し、この元素を現在のDOM構造から一時的に削除するだけで、見えなくなります.このようにプライベートで彼をからかうことができて、この構造は大きい容器で、多くの事をすることができて、たとえば1山の元素を添加します.すべてが終わったら回復します.このようにして再構成は一回だけです.
C:クラス
これは分かりやすいです.属性を修正する時には、一つ一つ修正して何回も訪問しますが、クラスを交替するのは大量操作に相当します.一回DOMに訪問すればいいです.もちろん性能が向上します.
D:変数の保存
変数でDOMオブジェクトを何度も取得するのではなく、最も典型的なのはfor(var i=0;i＜list.length;i＋)とfor(var i=0、l=list.length;i＜＋)の効率比較で、サイクルごとに長さを取得しますが、気を悪くして体に傷をつけます.普段書いている時にこの細部に注意しましたか?