2

私は、大きなテーブルで発生しているパフォーマンスの問題を追跡しようとしている jQuery 初心者です。とりわけ、列幅をヘッダー幅または行幅の最大値に設定する自家製のテーブル ウィジェットがあります。

10 行 x 500 列のテーブルでは、テーブルが 1 秒未満でレンダリングできることを考えると、これにはほぼ 40 秒 (!) かかることがあります。

関数全体は次のとおりです。

  var dataTable = this._div.find('.data-table');
  var headerTable = this._div.find('.data-header-table');
  if (dataTable.length === 0 || headerTable.length === 0) {
    return;
  }
  dataTable = dataTable[0];
  headerTable = headerTable[0];

  if (dataTable.rows.length === 0) {
    return;
  }

  var dataTr = dataTable.rows[0];
  var headerTr = headerTable.rows[headerTable.rows.length - 1];

  var marginColumnWidths =
    $(dataTr.cells[0]).outerWidth(true) +
    $(dataTr.cells[1]).outerWidth(true) +
    $(dataTr.cells[2]).outerWidth(true) -
    DOM.getHPaddings($(headerTr.cells[0])) + 1;

  $(headerTable)
    .find('> tbody > tr > td:first-child')
    .width('1%')
    .children()
      .first()
      .width(marginColumnWidths);

  for (var i = 1; i < headerTr.cells.length; i++) {
    var headerTd = $(headerTr.cells[i]);
    var dataTd = $(dataTr.cells[i + 2]);
    var commonWidth = Math.max(
      Math.min(headerTd.width(), 100),
      dataTd.width()
    );
    headerTd.width('1%').find('> div').width(commonWidth);
    dataTd.children().first().width(commonWidth);
  }

交換したら

    var commonWidth = Math.max(
      Math.min(headerTd.width(), 100),
      dataTd.width()
    );

定数で

    var commonWidth = 100;

実行時間は 38 秒から 1 秒未満に短縮されました。これは、新しい幅の設定ではなく、現在の幅の読み取り/計算に問題があることを示しています。私が行ったプロファイリング/サンプリングから、jQuery は CSS の計算をいじるのに途方もない時間を費やしているようです。

これを行うためのより効率的な方法を推奨できる人はいますか?

編集：

css("width") と outerWidth() の両方を試しましたが、パフォーマンスに大きな変化はありませんでした。jQuery 1.7.2 を使用していましたが、1.8.1 にアップグレードしてもパフォーマンスは大幅に変わりませんでした。

4

3 に答える 3

9

.css("width")の代わりに使用してください。メソッド.width()が変更されたため.width()、パフォーマンスが低下しました。詳細については、こちらをお読みください: http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

var commonWidth = Math.max(
  Math.min(parseFloat(headerTd.css("width")), 100),
  dataTd.width()
);
于 2012-09-13T20:24:23.413 に答える
2

私が知っているように-.width()実際の幅（CSSで常に設定されているとは限りません）を取得しており、それを取得するには、ブラウザーがそれを計算する必要があります（ページの強制再描画と幅の計算自体）。今、幅を設定しています。ブラウザはすべてを再描画する必要があります。少し遅れてそれが行われるかもしれませんが、次のステップで再び幅を取ります - ブラウザは実際の幅を得るためにページを再描画しなければなりません. 最初に幅をカウントし、別のループで計算値を設定します。私はこれが助けるべきだと思う

編集：

これをケルビン Bアプローチと比較してテストしました。違いは重要ではありません。css("width") が使用されている場合が最適のようです。ここにテストがあります: うーん。これをテストしました。私が提案したアプローチと比較します。その差は大きくないように見えました。ここにテストがあります: width one loops 、css width one loops 、css two loops、width two loops。結果 - ほとんど違いはありません。最も遅い - 「幅 1 ループ」。最速 - css. 私にとっては時々違います。

注: js perf がテスト ケース間で html 状態をクリアしないように見えるため、ケースを使用した 4 つの異なるテスト。

あなたの場合に何ができるかわかりませんが、奇妙なのは .width('1%')あなたが使用していることです。私にとっては必要ないように見えるので、削除してみてください。

于 2012-09-13T20:44:30.517 に答える