jquery / javascript如何更快地计算宽度
我有一个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中每列的宽度不是一个选项。
你可以考虑为此编写简单的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，所以你无法摆脱回流 。 但是，根据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之后交换片段...但严重的是，此时你真的要问问自己果汁是否值得挤压。
您可以在设置宽度的每个列中单独添加一个onload回调。 这样，它不是在循环中而是在加载时发生。 只是一个想法，但它可以工作。