3

100列のテーブルがあります。各要素の幅を明示的に設定するために、すべての要素に対してループを実行しています。

var $ths = $("table th");
$ths.each(function (i, th) {
    var $th = $(th);
    var width = $th.width();
    $th.width(width);
});

100 列の場合、これには時間がかかりすぎます (60 秒以上)。各「get width」呼び出しには 500 ～ 700 ミリ秒かかります。これは、毎回レイアウトを生成する必要があるためです。幅を取得します。

質問 - 幅を取得するより高速な方法はありますか?

理由 - ヘッダーをフリーズしています。そのためには、各ヘッダーの幅を固定ピクセル幅に設定する必要があります。すべてが動的であり、各列の幅を px で事前設定することはできません。

4

2 に答える 2

3

このためにプレーンなバニラJavaScriptを書くことを検討するかもしれません。あなたの時間を数ミリ秒短縮するかもしれません。

var cells = myTable.rows[0].children;

for ( var i = 0; i < cells.length; i++ ){
   cells[i].style.width = cells[i].offsetWidth + "px";
}

offsetWidthを使用しているため、リフローから逃れることはできません。ただし、THに含まれる文字数に基づいてセル幅を推定し（テキストが折り返されておらず、固定のモノタイプフォントを使用していると仮定）、CSSをクリエイティブに適用すると、リフローの待ち時間を大幅に短縮できます。 

// Appends CSS Classes to stylesheet in doc head
function appendStyle(styles) {
  var css = document.createElement('style');
  css.type = 'text/css';

  // Browser compatibility check
  if (css.styleSheet) css.styleSheet.cssText = styles;
  else css.appendChild(document.createTextNode(styles));

  document.getElementsByTagName("head")[0].appendChild(css);
}

var cells       = myTable.rows[0].children;
var cellWidth   = 0;
var letterWidth = 5; // let's assume each letter is 5px wide
var classname   = '';
var styles      = '';

for ( var i = 0; i < cells.length; i++ ){
   classname         = "Cell" + i;
   cell[i].className = classname;
   cellWidth         = (letterWidth * cells[i].innerHTML.length);
   styles           += "." + classname + "{width:" + cellWidth + "px}";
} 

window.onload = function() { appendStyle(styles) };

ドキュメントフラグメント（ John Resigによるパフォーマンス上の利点に関する優れた記事）を使用して、実行時にすべてをDOMの外部にレンダリングし、DOMがロードされた後にフラグメントをスワップインすることで、これをさらに進めることができます...しかし、真剣に、この時点であなたは本当にジュースが絞る価値があるかどうか自問する必要があります。

于 2012-07-12T01:08:37.633 に答える
0

幅を設定する各列に onload コールバックを個別に追加できます。このように、ループではなく、ロード時に発生します。単なるアイデアですが、うまくいく可能性があります。

于 2012-07-12T00:28:11.387 に答える