我有以下代码,用于我的自定义表格排序预处理
var tstart = performance.now();
var sortablearr = new Array(Math.floor((activeTRTable.rows.length / 2)));
var arr_i = 0;
console.log("Starting preprocessing...")
//0 index is table head
var t1buff = 0
var t2buff = 0
var t3buff = 0
for (i = 1; i < activeTRTable.rows.length; i += 2) {
var t0 = performance.now();
var x = parseFloat(activeTRTable.rows[i].cells[DURATIONTYPE].innerText);
var y = parseFloat(activeTRTable.rows[i].cells[DURATIONTYPE].innerText);
var t1 = performance.now();
t1buff += (t1 - t0)
var content = new Array(4)
var t2 = performance.now();
t2buff += (t2 - t1)
content[TABLEITEM] = activeTRTable.rows[i]
content[HIDDENDETAILITEM] = activeTRTable.rows[i + 1]
content[HIDDENDETAILITEM + 1] = x
content[HIDDENDETAILITEM + 2] = y
sortablearr[arr_i] = content
arr_i += 1
var t3 = performance.now();
t3buff += (t3 - t2)
}
var tpreprocessed = performance.now();
console.log("Preprocessing ended in " + (tpreprocessed - tstart) + " milliseconds.")
console.log("T1B: " + t1buff)
console.log("T2B: " + t2buff)
console.log("T3B: " + t3buff)
此代码似乎导致 Mozilla 浏览器中的行为非常不充分,尤其是 parseFloat 部分。 有各种浏览器的结果:
歌剧
Preprocessing ended in 56.89500000000044 milliseconds.
T1B: 35.88000000001557
T2B: 4.690000000055079
T3B: 8.65999999995438
Internet Explorer
Preprocessing ended in 372.7204875779862 milliseconds.
T1B: 248.5273986186603
T2B: 17.503554555074515
T3B: 66.14627339602884
边缘
Preprocessing ended in 457.5451515628629 milliseconds.
T1B: 320.98263165675325
T2B: 9.163721063269804
T3B: 91.9268633019874
谷歌浏览器
Preprocessing ended in 51.73499999999876 milliseconds.
T1B: 33.16500000007545
T2B: 4.495000000026266
T3B: 7.229999999955908
Mozilla Firefox(55.0.3(32 位))
Preprocessing ended in 31678.250000000004 milliseconds.
T1B: 31622.514999999778
T2B: 17.620000000077198
T3B: 21.96500000006563
这是怎么回事!?如何为 mozilla 修复此代码?
cells[DURATIONTYPE].innerText
仅包含简单的 float XX.XX,四舍五入到 2 位小数(即 43.21)。
最佳答案
很确定缓慢的事情是访问 DOM (activeTRTable.rows[i].cells[DURATIONTYPE].innerText
) 而不是 parseFloat。
引用 MDN(强调我的)https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows
The HTMLTableElement.rows read-only property returns a live HTMLCollection of all the rows in the table.
我假设它是在您访问 属性时生成的,并且不会一直为您准备好。您不应直接在 DOM 上工作,而应将所有内容缓存在您自己的数据结构中并将 DOM 视为只写。
编辑:作为快速修复尝试在循环之前缓存 rows
属性。但是,cells
属性的行为类似。
关于javascript - Mozilla Firefox parseFloat 性能缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46490233/