Question

我有一个包含100列的表格。我正在运行所有th元素的循环，以明确设置每个元素的宽度。

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

对于100列，这需要花费太多时间（超过60秒）。每个“获取宽度”调用需要500-700毫秒。这是因为每次都需要生成布局，我得到宽度。

问题 - 是否有更快的方法来获得宽度？

原因 - 我正在冻结标题。为此，我需要将每个标题的宽度设置为固定的像素宽度。一切都是动态的，并且预先设置px中每列的宽度不是一种选择。

Answer 1

您可以考虑为此编写简单的vanilla javascript。可能会减少几毫秒的时间。

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

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

因为您正在使用offsetWidth you're not going to be able to get away from reflow。但是，根据TH中的字符数量来估计单元格宽度（假设文本没有换行，并且您使用的是固定的单型字体）和creatively applying CSS can greatly reduce reflow latency。

// 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) };

你可以通过使用文档片段（great writeup on performance benefits by John Resig）来进一步实现这一点，在运行时通过渲染DOM之外的所有内容并在加载DOM之后交换片段...但是严肃地说，此时你真的要问问自己果汁是否值得挤压。

Answer 2

您可以在设置宽度的每个列中单独添加一个onload回调。这样，它不是在循环中而是在加载时发生。只是一个想法，但它可以工作。

jquery / javascript如何更快地计算宽度

2 个答案: