我有一个有 100 列的表。我正在遍历所有 th 元素,以显式设置每个 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 为单位预先设置每列的宽度。
您可以考虑为此编写普通的 JavaScript。可能会节省您的时间几毫秒。
var cells = myTable.rows[0].children;
for ( var i = 0; i < cells.length; i++ ){
cells[i].style.width = cells[i].offsetWidth + "px";
}
因为您使用的是 offsetWidth,你将无法摆脱回流 https://stackoverflow.com/questions/510213/when-does-reflow-happen-in-a-dom-environment。但是,根据 TH 中的字符数量来估计单元格宽度(假设文本不换行并且您使用的是固定的单色字体)并且创造性地应用CSS可以大大减少回流延迟 http://jonraasch.com/blog/javascript-style-node.
// 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 撰写的关于性能优势的精彩文章 http://ejohn.org/blog/dom-documentfragments/)通过在运行时渲染 DOM 之外的所有内容并在加载 DOM 后交换片段...但说真的,此时您真的必须问自己是否值得挤压。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)