Question

I’m running a fairly large web application which contains an increasing amount of JQuery code for both UI polish and making AJAX requests.

Larger chunks of code live in their own, dedicated .js file, but there are an increasing number of pages (primarily forms) which use a small sprinkling of JQuery for showing/hiding form elements, modifying classes etc. Presently I put this code in the $(document).ready() block in my main application.js file.

Given this, on any given page view application.js is loaded and all the JQuery code in this ready() block is executed despite the fact that only one or two calls will be relevant to the current page. Are there any performance implications of doing this or is it actually quite negligible? If there are performance implications, what is the recommended alternative way of managing these page-specific JQuery (or indeed any type of Javascript) snippets in large Rails apps?

Despite being considered bad-practice, wouldn’t it make more sense to define simply JQuery rules which are specific only to a single form inside the form partial itself?

Answer 1

The advantage of having everything in one file (application.js) is that the client will have cached this file, and it will serve them locally on consequent HTTP requests.

The performance hit you may get is related to your jQuery code itself. Specifically, on searching DOM elements that you later act on. Sizzle, the new selector engine in jQuery 1.3, parses your selectors from right-to-left, just like browsers parse CSS. Therefore it’s best to try to narrow down your selection as much as possible on the right of the selector query. jQuery itself is optimized for #id selectors too (skips going through Sizzle), which is good to have in mind. For this reason, doing $(‘#id’).find(‘div’) is much faster than doing $(‘#id div’). Other than that, most warnings that apply to google page speed regarding CSS selectors will apply to your jQuery selectors.

Regarding page specific js, here’s one way to do it:

Add a <%= yield :javascripts %> on your layout, right before your closing body tag. Then you can add this to your view, after your html:

<% content_for :javascripts do %>
  <% javascript_tag do %>
    //your js here
  <% end %>
<% end %>

This saves an HTTP request and keeps your view behavior close to your view which is a win, although it doesn’t minify your javascript. That is a compromise that has worked well for me.