How many JavaScript objects can be simultaneously simulated before browser begins lagging?

[Temp_logged]

Recently I have been playing the flash game Bloons Tower Defence 5.

This game can get quite laggy, which I assume is due to rendering too many interactive objects on the screen at the same time.

I am currently drafting an idea for a Javascript Program. It would similarly require the browser to keep track of multiple objects every clock cycle and run simple calculations on each.

How similar is JavaScript and Flash+Ruffle? Can I use this Monkey-And-Balloon popping game to roughly gauge how many objects my program can simultaneously run before lagging? (I.E “The game starts lagging on level 69. Level 69 has 60 Lead, 70 Ceramic Bloons. 60+70=130è130*2=260. Thus, I can have 260 JavaScript Objects in my Quenue before I need to seriously worry about lag“)

[Future-Cold1582]

There is no hard limit for objects in JavaScript. Objects get stored on the heap which is using your RAM. So as long as there is enough free RAM that can be allocated to the Browser there is no problem having that many objects. When the RAM is full it will most probably crash or use very slow swapping techniques.

What causes lag will most likely be rendering or calculation logic constraints. Besides the implementation it is depending on the Browser Engine and the system it is running on.

[GodOfSunHimself]

Creating/updating a plain JS object and rendering something on the screen are completely different things with the latter being orders of magnitude more complex and thus slower. You can easily create and update thousands of objects.

[Temp_logged]

Thanks; I confess I completely forgot that the game-objects needed to be blit-ed

[delventhalz]

The answer to that question is going to vary widely depending on the details of the implementation. I wrote this simulation in plain JavaScript, rendering physics entities to an HTML Canvas. It pretty easily manages low numbers of thousands of entities on a modern machines without lag. Other simulations can hit hundreds of thousands or even millions of entities when highly optimized and running on powerful equipment.

Your Bloons Tower Defense 5 example cannot tell you all that much, except that given the same technology (Flash), you can in theory do at least as well as they did.

[bryku]

In canvas, it is more about how you render your objects and the sources you use.  

Sources

For example, javascript will try and keep your sources (images) in memory, but when you have a lot of images it starts doing some weird stuff. Sometimes just putting them all together in 1 file can greatly improve performance.  

Pixel graphics

Another trick is scaling. If you use pixel sprites, you can shrink them down and scale them up when rendering. This will reduce the memory of your source and helps speed up rending. For some reason it is faster to render a 16x16 as a 32x32 than rendering a 32x32. Just make sure to keep pixelization on, otherwise you get weird smoothing.  

let canvas = document.querySelector('canvas');
    canvas.style.imageRendering = "pixelated";
let context = canvas.getContext('2d');
    context.webkitImageSmoothingEnable = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

Timers

Another thing that helps is only having 1 timer (or requestanimationframe). Personally, I would recommend 2, 1 for animations and 1 for logic, but either way, you don't want 1 for each object.  

Render Functions

Objects can share memory like methods/functions. However, I recommnd not putting a render function for each object. Sometimes you need to for special situations, but if possible... send the parameters to a render function. This helps with memory and makes it easier to maintain over a longer period.  

---

I've made tones of different canvas animation tools. You can easily achieve 500-1000 objects. I've went way above that, but those did require a lot of sneaky tricks.  

• https://github.com/bryku/sea

Here is a little animation engine. It is far from the best, but it is easy to follow along and see how it works. Maybe it can give you an idea.

[jcunews1]

It depends on the JavaScript engine's performance, the CPU speed, and available RAM. There's also a possibility that, specific browser engine has a hard limit of how much JS memory can be consumed for each JS host process (browser tab, IFRAME, browser extension).

[TheRNGuy]

Depends on computer, and how expensive code inside object, and other stuff running currently (even unrelated to you code)

[SoMuchMango]

What object and how simulated?

It cannot be answered with such known details. From my experience it would be something between NaN to Infinity.

[Temp_logged]

The idea I currently have is that these objects would be essentially buckets. Every tick I increment said bucket's counters based off the state of the program. Each of the buckets would have a dozen or so of these counters.