Mathias Bynens - V8 internals for JavaScript developers

What people said

Recommends jmrk · 2019-02 · Stack Overflow · on “How does V8 optimise the creation of very large arrays?”

V8 developer here. The first snippet is faster because new Array(max) informs V8 how big you want the array to be, so it can allocate an array of the right size immediately; whereas in the second snippet with [] / .push() , the array starts at zero capacity and has to be grown several times, which includes copying its existing elements to a new backing store. [this video] is a good presentation but probably should have made it clearer how small the performance difference between packed and holey elements is, and how little you should worry about it. In short: whenever you know how big you need an array to be, it makes sense to use new Array(n) to preallocate it to that size. When you don't know i

Recommends Bergi · 2019-09 · Stack Overflow · on “Throw exception before filtering?”

"*If you are still concerned about efficiency*" - then keep using `filter` because it has higher developer efficiency and the same performance [this video]

Recommends Bergi · 2020-08 · Stack Overflow · on “How to explain unexepctable perfomance in js-array loop?”

The problem is that let sum = 0 for (let i = 0, l = arr.length; i < l; ++i) { sum += arr[i] if (i === 100) arr.pop() } is now incorrect, as it loops beyond the end of the array. The sum will be NaN in the end. The correct solution would have l = arr.length - 1 so that this doesn't happen. Now why does it becomes so slow? Because array accesses in javascript are only fast (get compiled to a fast path with pointer addressing) when the element exists. When you miss, the code will get de-optimised. Since JSbench runs the same code multiple times, so even if the deoptimisation happens only at the last of 200000 iterations, the subsequent runs will be much slower. See this talk [this video] for details

Recommends Diego · 2020-08 · Stack Overflow · on “JavaScript - Difference between Array and Array-like object”

There is also a performance difference. In this video [this video] Mathias Bynens recommends to use array over array-like-object because V8 is optimized for common arrays.

Cites maaartinus · 2016-08 · Stack Overflow · on “Declaring a constant in a function”

I wonder if there's any performance difference between var DATA = {a: 1, b: 2, ....}; function f() { ... use but do not modify DATA; } and function f() { var DATA = {a: 1, b: 2, ....}; ... use but do not modify DATA; } in a modern Javascript engine. In theory, in the latter code, the structure has to be created on every function invocation. But the engine can see it doesn't get changed and keep it for reuse. I'm perfectly aware about the premature optimizations trap and readability being more important than performance; I'm just curious. As jsperf is down, I see no easy way to get some figures myself. Update Given this video [this video] , it looks like at least V8 can do Copy On Write, so it's p

Cites Derek Pollard · 2018-06 · Stack Overflow · on “V8: Heterogeneous Array Literals”

From this blog post [LINK] provided by Mathias [LINK] , a V8 developer: Common elements kinds While running JavaScript code, V8 keeps track of what kind of elements each array contains. This information allows V8 to optimize any operations on the array specifically for this type of element. For example, when you call reduce, map, or forEach on an array, V8 can optimize those operations based on what kind of elements the array contains. Take this array, for example: const array = [1, 2, 3]; What kinds of elements does it contain? If you’d ask the typeof operator, it would tell you the array contains numbers. At the language-level, that’s all you get: JavaScript doesn’t distinguish between int

Cites Bergi · 2018-06 · Stack Overflow · on “Should one use for-of or forEach when iterating through an array?”

I recommend to always use for … of in ES6. It works on any iterable [LINK] . It supports all kinds of control flow in the loop body, like continue , break , return , yield and await . Also I personally find it more readable, but that comes down to preference. Some people think forEach is a more functional style, but that's wrong – it has no result value and is all about doing side effects, so an imperative-looking loop fits that purpose better. Performance is not a concern: in modern engines all loop styles are equivalent [this video] .

Cites bugs · 2019-02 · Stack Overflow · on “How does V8 optimise the creation of very large arrays?”

Recently, I had to work on optimising a task that involved the creation of really large arrays (~ 10⁸ elements). I tested a few different methods [LINK] , and, according to jsperf, the following option seemed to be the fastest. var max = 10000000; var arr = new Array(max); for (let i = 0; i < max; i++) { arr[i] = true; } Which was ~ 85% faster than var max = 10000000; var arr = []; for (let i = 0; i < max; i++) { arr.push(true); } And indeed, the first snippet was much faster in my actual app as well. However, my understanding was that the V8 engine was able to perform optimised operations [this video] on array with PACKED_SMI_ELEMENTS elements kind, as opposed to arrays of HOLEY_ELEMENTS . So my

Cites Bergi · 2022-12 · Stack Overflow · on “How to make conditions and return a exception while resolving an array of promises”

@Kai It's unclear when the article you link was written, but `for … of` and `forEach` are optimised equally well in js engines [this video] since a few years already

Cites Bergi · 2023-06 · Stack Overflow · on “Fastest way to split object into smaller objects in Javascript?”

@jabaa "*`reduce` is written in a compiled language and it is much faster than a pure for loop.*" - no. `reduce` is (currently) written in Torque [LINK] , which may be compiled, but it's actually more complicated than that [LINK] . And that makes it no faster than a JIT-compiled `for` loop [this video] .