jQuery Selector Performance Monitor - jqspm

posted by sacah on javascript, jquery, programming,

In my job as a contract front end developer, I work with large existing code bases. Many times I've started at a company and been asked, "Why does Page X take so long to load?".

There are plenty of tools to figure out other aspects of the pages load/render time, but one I haven't found is to see if there are any poorly written jQuery selectors. An actual example I've found in production code was a selector taking 8.5 seconds on an iPhone 5, tweaking the selector, it now takes 50ms.

So I wrote a small wrapper for jQuery and jQuery.find that will log selectors, the number of items they find, and how long it took to find them. This allows you to check an entire page of widgets, modules and plugins to find any inefficient selectors.

You can find my initial version over at bitbucket, jQuery Selector Performance Monitor - jqspm

I'll be posting a follow up entry explaining more about its use in the coming days. Read the more detailed post.

Here is an example of the output, showing the selector used, the number of elements found, and time to find them.