How do you performance test JavaScript code?

by

Profilers are definitely a good way to get numbers, but in my experience, perceived performance is all that matters to the user/client. For example, we had a project with an Ext accordion that expanded to show some data and then a few nested Ext grids. Everything was actually rendering pretty fast, no single operation took a long time, there was just a lot of information being rendered all at once, so it felt slow to the user.

We ‘fixed’ this, not by switching to a faster component, or optimizing some method, but by rendering the data first, then rendering the grids with a setTimeout. So, the information appeared first, then the grids would pop into place a second later. Overall, it took slightly more processing time to do it that way, but to the user, the perceived performance was improved.

These days, the Chrome profiler and other tools are universally available and easy to use, as are console.time(), console.profile(), and performance.now(). Chrome also gives you a timeline view which can show you what is killing your frame rate, where the user might be waiting, etc.

Finding documentation for all these tools is really easy, you don’t need an SO answer for that. 7 years later, I’ll still repeat the advice of my original answer and point out that you can have slow code run forever where a user won’t notice it, and pretty fast code running where they do, and they will complain about the pretty fast code not being fast enough. Or that your request to your server API took 220ms. Or something else like that. The point remains that if you take a profiler out and go looking for work to do, you will find it, but it may not be the work your users need.

More Related Contents:

  1. Convert JSON to array in Javascript
  2. When to use Vanilla JavaScript vs. jQuery?
  3. Declaring multiple variables in JavaScript
  4. Array vs. Object efficiency in JavaScript
  5. Why is mutating the [[prototype]] of an object bad for performance?
  6. Controlling fps with requestAnimationFrame?
  7. regex.test V.S. string.match to know if a string matches a regular expression
  8. What is the cost of ‘$(this)’?
  9. Should CSS always precede Javascript?
  10. Javascript when to use prototypes
  11. Does use of anonymous functions affect performance?
  12. How to avoid freezing the browser when doing long-running computations in Javascript
  13. Why is bind slower than a closure?
  14. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  15. Is there a performance difference between ‘let’ and ‘var’ in JavaScript
  16. v8 JavaScript performance implications of const, let, and var?
  17. Object.keys() complexity?
  18. Javascript prototype operator performance: saves memory, but is it faster?
  19. JavaScript performance difference between double equals (==) and triple equals (===)
  20. Are JavaScript Arrays actually implemented as arrays?
  21. Best way to execute js only on specific page
  22. Is “Put Scripts at the Bottom” Correct? [closed]
  23. Why Array.forEach is slower than for() loop in Javascript? [duplicate]
  24. Does the tag position in HTML affects performance of the webpage?
  25. setTimeout() with string or (anonymous) function reference? speedwise [closed]
  26. Are ES6 template literals faster than string concatenation?
  27. Javascript (jQuery) performance measurement and best practices (not load time)
  28. How browser executes Javascript and renders asynchronously
  29. Javascript – insert an array inside another array
  30. Does using a document fragment really improve performance?

Leave a Comment