CODEWITHSUNDEEP
javascriptfirefox
Smarty77
Smarty77

Reputation: 1348

Mozilla Firefox parseFloat slow performance

I have following code, used in my custom table sort preprocessing

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)

This code seems to result into very insufficient behavior in Mozilla browser, especially the parseFloat part. There are results from various browsers:

Opera

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

Edge

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

Preprocessing ended in 31678.250000000004 milliseconds.
T1B: 31622.514999999778
T2B: 17.620000000077198
T3B: 21.96500000006563

What is going on!? How to fix this code for mozilla?

cells[DURATIONTYPE].innerText contains just simple floating point number XX.XX, rounded on 2 decimals (i.e. 43.21).

Upvotes: 1

Views: 223

Answers (1)

Prinzhorn
Prinzhorn

Reputation: 22508

Pretty sure the slow thing is accessing the DOM (activeTRTable.rows[i].cells[DURATIONTYPE].innerText) and not parseFloat.

Quoting MDN (emphasis mine) 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.

I assume it is generated as you access the property and not kept ready for you at all times. You should not work on the DOM directly but cache everything in your own data structures and treat the DOM as write only.

Edit: as a quick fix try caching the rows property before the loop. However, the cells property behaves similar.

Upvotes: 4

Related Questions