javascript - HTML DOM のリフローと再描画 CSS 宣言されたプロパティ関数

Question

大量のCSSを設定するたびに再描画とリフローを行う代わりに、より優れたCSS関数を作成できるように関数を作成していたので（これは単なるテストケースである使用クラスを知っています）、最善の方法を見つけました1 つ目は、宣言された CSS スタイルを、インライン、埋め込み、または外部のいずれかで取得することです。こうしてexplicit_set_styles生まれた機能。それでも問題は、子要素を追加して再描画を作成していることです。これが仕組みです

1. 宣言されたcssプロパティを取得したい要素の計算されたスタイルを取得します
2. 同じタイプの要素を作成し、計算されたスタイルから「デフォルト」を取得します
3. それを繰り返し、違いがあるかどうかを確認します。それは、CSS 宣言の変更である可能性が最も高いことを意味します。
4. テスト用の type 要素を DOM から削除する

したがって、新しい DOM 要素を追加することで DOM を再描画しますが、追加しないと計算されたすべてのスタイルが 100% 空白になるため、これがデフォルトをテストできる唯一の方法です。では、比較値のデフォルト値を取得するソリューションはありますか?

function explicit_set_styles(){
    var elm_defaultView = (this.ownerDocument || document).defaultView;
    var elm_computedStyles = elm_defaultView.getComputedStyle(this,null);
    var element_test = document.createElement(this.tagName.toLowerCase());
    document.body.appendChild(element_test);
    var et_df = (element_test.ownerDocument || document).defaultView;
    var et_cs = et_df.getComputedStyle(element_test,null);
    var set_styles = null;  

    for(var prop in elm_computedStyles) {
        if( prop !== "cssText" && elm_computedStyles[prop] !== et_cs[prop] ) {
            if(set_styles === null) set_styles = {};
            set_styles[prop] = elm_computedStyles[prop];
          }
    }
    document.body.removeChild(element_test);
    return set_styles;
}

それで、私はそれをおそらく2つの方法で行うことを考えていましたか？iframe を作成して追加するのではなく、それにテスト要素を追加してデフォルトを取得することで、もし私が正しければ、ブラウザから不要な CPU を消費しませんか? これをテストしましたが、戻り値は次のようになります

{
    alignSelf: "stretch"
    height: "32px"
    left: "0px"
    perspectiveOrigin: "411px 16px"
    position: "absolute"
    right: "0px"
    top: "0px"
    transformOrigin: "411px 16px"
    webkitLogicalHeight: "32px"
}

インライン、埋め込み、および外部 CSS によって実際に宣言されているものは次のとおりです。

{
    height: 32px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}