jquery / javascript如何更快地计算宽度 [英] jquery/javascript how to calculate width faster

问题描述

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

I have a table with 100 columns. I'm running a loop through all the th elements, to explicitly set the width of each th.

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

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

For 100 columns, this takes too much amount of time (more than 60s). Each "get width" call takes 500-700 ms. This is because it needs to generate layout every time, I get width.

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

Question - Is there a faster way to get width?

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

Reason - I'm freezing header. For that I need to set width of each header to fixed pixel width. Everything is dynamic and pre-setting the width of each column in px is not an option.

推荐答案

你可能会考虑写普通香草javascript为此。可能会减少你的时间几毫秒。

You might consider writing plain vanilla javascript for this. Might shave some milliseconds off your time.

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可以大大减少回流延迟。

Because you're using offsetWidth, you're not going to be able to get away from reflow. However, estimating the cell widths based on how many characters are in the TH (assuming the text doesn't wrap and you're using a fixed, monotyped font) and 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) };

您可以通过使用文档片段进一步实现这一点（ John Resig对性能优势的精彩写作）在运行时将所有内容呈现在DOM之外，并在DOM之后交换片段装载......但是说真的，在这一点上你真的要问问自己果汁是否值得挤压。

You could take this even further by using document fragments (great writeup on performance benefits by John Resig) by rendering the whole things outside of the DOM at runtime and swapping the fragment in after the DOM is loaded...but seriously, at this point you've really got to ask yourself if the juice is worth the squeeze.

这篇关于jquery / javascript如何更快地计算宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！