Is it better to have one large object in JavaScript or many smaller ones?

Question

I'm writing a JS lib that reads chess games to turn them into re playable games, in one single web page there can be many games (one in its own div), what I'm wondering is – thinking about performance – if it's better to have one large object that holds all the moves of all the games or many smaller objects each storing the moves of one game.

I realize that this is perhaps a small point in the whole optimization process but its the one that I want to address now.

Answer 1

Donald Knuth: "We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil"

Start by designing a data model for your game that is right and natural from a domain modelling point of view.

Build the software.

Then, when you're at a stage in development that analysing performance makes sense, work out some low performance environments you'd like your game to work in, and test in them.

You'll probably find you have no issues, as others have stated in answers to this question.

If you find an issue, profile your code and discover the cause. Optimise the code you need to. Even if you find a performance issue, it's unlikely to be caused by your data model, as long as you've designed it well.

If data model really is a performance issue, only then should you compromise your initial design only to the extent you need to in order to get the performance you need, documentating the compromises you've made, and why you had to.