javascript - Mozilla Firefox parseFloat 性能缓慢

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

谷歌浏览器

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)。

Answer 1

很确定缓慢的事情是访问 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 属性的行为类似。