Measure Javascript performance

Question

I'm trying to do a full analysis of our front end and I'd like to know if there are any tools that can measure Javascript automatically.

Eg:

• Execution of functions (without the need for me to manually put date objects before/after to record this)
• What script on my page is the slowest and why
• Find out which functions I need to optimize
• Are there any jQuery improvements I could make (other than through John Resig's jquery-profile.js )
  • Better selectors I could use
  • Memoization on certain objects
  • Use of a better function (eg: use find because it's faster)

I'm pretty much looking for a profiler for my JS (and something that also profiles jQuery stuff), other than things like Firebug, the Chrome Dev Tools, Yslow/Page speed plugins etc. I'm looking for something better than JSlint or jsPerf.

I have New Relic running on my app, but it doesn't tell me where my scripts are lacking.

I was hoping there was an easier way to profile my JS than to do it manually. I need a drop in solution that does full analysis and gives me a report with metrics.

Answer 1

I think you are looking for something like this:

https://developers.google.com/web-toolkit/speedtracer/

from doc intro to this:

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.

Answer 2

我最近遇到过这个，应该有助于衡量你的javascript代码性能 - http://www.html5rocks.com/en/tutorials/webperformance/usertiming/

Answer 3

你也可以通过Yahoo Boomrang检查一个javascript库。它是一个很棒的工具，用于捕获信标服务器上的用户体验并对其进行分类/分析。

Answer 4

Here is a tool I created : http://yellowlab.tools

It loads a page with PhantomJS and analyzes many things while the page is loading. Launch a test, then click on the "JS Timeline" tab. You will find a log of every JS function that interacts with the DOM, including jQuery functions.

I use it to audit JS code for my customers and it's the best existing tool when you need to untangle some spaghetti code, or understand some minified third party widgets!

Answer 5

I really doubt that you can do that automatically else it would not make sense to hire senior devs to identify such problems :) What you could do is use Chrome dev tools and manually check your pages with CPU profiler and Timeline tools just to see what's running slow or what's creating memory leaks.

Good luck