Question

我有以下代码，用于我的自定义表格排序预处理

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

Google Chrome

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只包含简单的浮点数XX.XX，舍入为2位小数（即43.21）。

Answer 1

非常确定缓慢的是访问DOM（activeTRTable.rows[i].cells[DURATIONTYPE].innerText）和不 parseFloat。

引用MDN（强调我的）https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

HTMLTableElement.rows只读属性返回表中所有行的实时HTMLCollection 。

我认为它是在您访问属性时生成的，并且始终没有为您做好准备。您不应该直接使用DOM，而是将所有内容缓存在您自己的数据结构中，并将DOM视为只写。

编辑：作为快速修复，尝试在循环之前缓存rows属性。但是，cells属性的行为类似。

Mozilla Firefox parseFloat性能缓慢

1 个答案: