4

コンテナ要素の高さと一致するように、絶対配置されたアイテムの高さを設定しようとしています。問題は、これらの要素が何百もあるということです。タイトルの標準コードは chrome では問題なく動作しますが、IE では非常に遅くなります。この問題を軽減するにはどうすればよいですか?

    //Too SLOW in IE
    var starttime = new Date().getTime();
    $("#grdSchedule > tbody > tr").each(function(i) {
        thisRow = $(this);
        thisRow.children(".stickyCol").height(thisRow.height());
        //thisRow.children().slice(0, 1).css('height', thisRow.css('height'));            
    });
        var taskTime = (new Date().getTime() - starttime) / 1000;
        alert("cell height stretch: " + taskTime);

高さを設定するだけではそれほど遅くないように見えますが、他の何かの .height() から高さを設定すると、IEがチョークします。

代わりに .css() を試してみましたが、少しブーストしましたが、それほど多くはありませんでした。

ここにいじるフィドルがあります：Fiddle AWAY!!!

4

4 に答える 4

3

IE9 では、1.6 秒から 0.031 秒になりました。Chrome では、0.302 秒から 0.018 秒になりました。

detach() を使用した作業例(最速ですが、テーブルの再挿入を遅らせた場合、つまり、DOM にテーブルなしでページを再レンダリングできるようにした場合、レイアウトの問題が発生します)。

プレーンな DocumentFragment クローンを使用した作業例

重要なのは、テーブルを DocumentFragment として複製することです(または一時的に DOM からテーブルを削除しdetach()、複製されたテーブルのセルの高さを操作します (つまり、テーブルが DOM の一部になる前))。その後、すべての高さの計算が行われた後、元のテーブルをクローン テーブルに置き換えます。

.height()計算が遅くなったわけではありません。それは、大きなループで DOM をトラバースして操作していたという事実です。3 大ブラウザーの中で、Internet Explorer は DOM 操作が最も遅いです。

さらに読むために、しばらく前に、DOM との相対的なブラウザー パフォーマンスを適切に測定するDOM 挿入ベンチマークをいくつかまとめました。John Resig は DocumentFragments と DOM 操作の使用についても書いています: http://ejohn.org/blog/dom-documentfragments/

于 2013-01-18T17:41:47.133 に答える
0

行に対して別のオブジェクトを作成することを避け、行の高さをキャッシュします。

 $('#grdSchedule > tbody > tr').each(function () {
    var height = $.css(this, height);
    $('.stickyCol', this).css('height', height );           
});
于 2013-01-18T16:30:09.887 に答える
0

事前計算だけで十分スピードアップできるようです

    var starttime = new Date().getTime();
    var stickyCols = 1;
    //get row heights
    var rowHeights = new Array();
    $("#grdSchedule > tbody > tr").each(function(i) {
        rowHeights[i] = $(this).css('height');
    });

    //Now SUPERDUPERFAST in IE
    //var $table = $("#grdSchedule").detach();            
    $("#grdSchedule > tbody > tr").each(function(i) {
    //$(" > tbody > tr", $table).each(function(i) {
        thisRow = $(this);
        thisRow.children("td").slice(0, stickyCols).css('height', rowHeights[i]);              
    });
    //$("#scrollDiv_top").append($table);
    var taskTime = (new Date().getTime() - starttime) / 1000;
    alert("cell height stretch: " + taskTime);

フィドル

于 2013-01-18T17:23:12.693 に答える
0

height:100%絶対配置要素を設定するだけで何が問題なのですか?

更新されたフィドル

于 2013-01-18T18:02:31.410 に答える