1924322 - Array.from() performances might have room for improvement (when running in the web developer console)

Status: RESOLVED INVALID

(Core :: JavaScript Engine, enhancement)

Description

[vlakoff]

Steps to reproduce:

For example, on this page: https://fr.wikipedia.org/wiki/MediaWiki:Common.js

Run this benchmark:

(function () {
    let i, nb = 1000;
    const list = $('#mw-content-text')[0].getElementsByClassName('s1');

    const T1 = new Date();
    for (i = nb; i--; ) {
        [].slice.call(list);
    }
    const T2 = new Date();
    for (i = nb; i--; ) {
        Array.from(list);
    }
    const T3 = new Date();

    console.log(T2 - T1);
    console.log(T3 - T2);
})();

(at the time of writing, there are 228 ".s1" elements)

Actual results:

For just 1000 iterations, benchmark results (less is better):

• [].slice.call(): 3 ms
• Array.from(): 176 ms

For comparison, results on Chrome:

• [].slice.call(): 22 ms
• Array.from(): 26 ms

(Results are similar whether the NodeList is "live" or not.)

(BTW, nice overtaking of Chrome with [].slice.call())

Expected results:

Array.from() performances should be on par with historical techniques such as [].slice.call().

Comment 1

[Mayank Bansal]

Were you running this code in the Web Developer Tool console? If yes, can you try running the code inside a page and post your results.

(For posterity, performance profile of the code running in the console: https://share.firefox.dev/3Y5pYFf)

Comment 2

[vlakoff]

Yes, I was running the code in the console.

Right now, I executed the benchmark with the console being closed, and the results are better.

For the same 1000 iterations:

Firefox:

• [].slice.call(): 3.17 ms
• Array.from(): 8.53 ms

Chrome:

• [].slice.call(): 19.83 ms
• Array.from(): 26.3 ms

That's very interesting: having the console closed, the performances are basically the same, except Array.from() on Firefox, that got its performance hit vastly alleviated.

Also, note that even with the console closed, Array.from() is something like 2.5x slower than [].slice.call(). But at least it's the same order of magnitude (and it's faster than Chrome!).

Comment 3

[Tooru Fujisawa [:arai]]

Opening a DevTools disables some optimization on the page, in order to make debugging easier,
and also the code executed from the DevTools Console can be slow in some case due to an unoptimized execution, especially when some console helper functions are used in the code, which requires additional environment chain for the script.

In general, this kind of micro benchmark doesn't represent the actual webpage's workload, and frequently results in wrong observation.
For example, the result is immediately discarded, and the operation is repeated unnecessarily.

If you observe a performance difference with actual website's code when switching between Array#slice vs Array.from, we can start by look into the actual code, not the minimal one.

Feel free to reopen if you have non-minimal testcase.