CODEWITHSUNDEEP
javascriptdombenchmarking
Andrea
Andrea

Reputation: 20493

Benchmarking the DOM on the fly

I have a page where a large number of DOM elements are animated. This mostly works on modern hardware and software, but I worry that it may be too sluggish on older computers with slow javascript interpreters.

What I would like to do is to get some information about the performance of the DOM and disable some of the animations if this is under a certain threshold. A naif way could be by adding 10000 or so transparent elements and removing them and measuring the time needed. Before going to implement this, I would like to know whether something of this kind, maybe more refined, already exists.

Do you know of any tool that gives a resonable measure of the DOM performance?

Upvotes: 2

Views: 297

Answers (2)

Douglas
Douglas

Reputation: 37763

If you measure the actual frame rate of your animation, you can compare that to the frame rate you are trying to animate at. If the actual frame rate is significantly lower, then you can draw at a slower rate, or draw less. There's a description of Google doing that in this answer.

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

You can implement a prototype and profile it in a WebKit-based browser (Chrome/Safari) using Chrome Developer Tools or Web Inspector (the Profiles panel). This will give you an insight into what's actually slowing down your app: the JavaScript code or the WebKit internals.

Upvotes: 0

Related Questions