Memory layout in Javascript - data-oriented vs object-oriented design [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 5 years ago.

Coming from a background of C/C++, memory layout of objects with regards to reducing cache misses is something that is crucial especially when working on consoles. Data-oriented design is often favored over object-oriented design, in order to help keep related objects close to each other in memory (especially in performance critical areas).

Recently, I've been doing some Javascript development, and I'm wondering what the general consensus is within the Javascript community.

With my limited experience in Javascript, I've often been surprised to see completely unexpected results when profiling. The internal memory layout and implementation of Javascript objects/structures varies so greatly from browser to browser, that I wonder if it is worth the effort to attempt to optimize.

I created a simple test case (http://jsperf.com/object-vs-data) on jsPerf to compare the performance of the two methods, and while it shows performance gains on Chrome, there is no noticeable speedup on Safari.

In Javascript, should I even concern myself with the memory layout of objects? Or is it more of a 'implement it one way and then optimize if needed' type thing?

This second option seems kind of wasteful (in terms of development time), especially if there is some good guideline to follow.

Thanks~

Supplemental Information: This is basically how I would implement the two approaches in Javascript. The jsPerf test case above is implemented like this.

var objectOriented = [
    { foo: 1, bar: 2 },
    { foo: 3, bar: 4 }
];

var dataOriented = {
    foos: [1, 3],
    bars: [2, 4]
};

// Object-oriented access:
var a = objectOriented[0].bar;

// Data-oriented access:
var b = dataOriented.bars[0];

Answer 1

You're working from a fundamental assumption that objects in Javascript work like they do in C++. They don't.

In C++, the primary purpose of a type is to act as a "lens" over a chunk of memory. The class layout directly defines the contents of the memory that the object describes, in a well defined way. C/C++ arrays specifically require a linear, continuous layout of homogeneous types.

In JavaScript, an object is a collection of name/value pairs. An array is just an object with a special "length" property. Note that there's NO description or definition of memory layout here. There's nothing stopping a Javascript interpreter from implementing arrays as a hash table rather than a linear chunk of memory; in fact, I'm sure they are JS implementations that do just that.

JavaScript implementations are free to lay out memory however they want, and there's no correspondence between anything you do in source and what actually ends up in the machine.

In addition, JavaScript arrays are heterogeneous, not homogeneous. That is, assuming that it was laid out in contiguous memory, your equivalent type in C would be JSObject **, not int ** (or float ** or whatever). A JS array is a collection of references to data stored elsewhere, so even if the references were in your cache line, your data won't be.

So, in summary - this kind of thinking will gain you nothing but pain. JavaScript is a much higher level language than C++, and part of that is giving up the control you're used to. That kind of low-level optimization if possible will be done by the interpreter. Concentrate on writing code with efficient algorithms that naturally express your solution; that's hard enough as it is. :-)

Answer 2

Ok. Fiddled with some numbers and test cases..

Firstly I created this test case http://jsperf.com/object-vs-array-creation-for-so In this case, creating Object is way more faster then creating an Array

Secondly I created this test case http://jsperf.com/accessing-speed In this, there was hardly any difference between them..

So, what I infer from this profile is that using objects more than arrays will be faster if the project is really huge.. as, from the first case, it's clear that object creation is faster than array creation.

But..

Javascript is a highly developed & performant language and you shouldn't be worried with such micro-optimizations. All you should focus is on the semantics. You should choose the structure which best describes your intention..

_{Testing in Chrome 36.0.1985.125 on Windows NT 6.3}