Rails Partial Performance
Partials can help keep your Rails views organized. They can split up a large template into manageable pieces and make it easy to share code.
But they can be surprisingly inefficient. This becomes most noticeable in loops.
Let's say I have a states#index page where I need to show a list of info about all 50 U.S. states. So I start to write a view like:
<% @states.each do |state| %>
<div><%= state.name %></div>
<% end %>
For this example I'm just printing the state name, but you could imagine that the content for a given state would be more involved than this.
What if I need to display this content on the states#show page in exactly the same way? I could extract this into a new partial:
<div><%= state.name %></div>
And change the index page to use that:
<% @states.each do |state| %>
<%= render partial: 'states/summary', locals: { state: state } %>
<% end %>
When I do this, the time it takes to render my index page goes from ~7ms to ~21ms. 🤔 The overhead of using a partial made the page load 3 times slower. In this case, it's only a few milliseconds different, but this can start to add up depending on how frequently partials are used and how much info you're required to display on the page.
What are some alternatives?
We could use the collection option for the partial. This will let Rails render the collection in a more efficient way:
<%= render partial: 'states/summary', collection: @states %>
Or we could skip the partial altogether and define a helper method that uses Ruby to build HTML:
def display_state(state)
content_tag :div, state.name
end
And then use that on the index page:
<% @states.each do |state| %>
<%= display_state(state) %>
<% end %>
Here are some benchmarks that give an idea of how these options compare. I created a brand new Rails 6.1 app and added these example view templates to display the numbers from 1 to 50:
<%# app/views/example/_value.html.erb %>
<div><%= value %></div>
<%# app/views/examples/single_view_template.html.erb %>
<% values = (1..50).to_a %>
<% values.each do |value| %>
<div><%= value %></div>
<% end %>
<%# app/views/examples/partial.html.erb %>
<% values = (1..50).to_a %>
<% values.each do |value| %>
<%= render partial: 'examples/value', locals: { value: value } %>
<% end %>
<%# app/views/examples/partial_collection.html.erb %>
<% values = (1..50).to_a %>
<%= render partial: 'examples/value', collection: values %>
<%# app/views/examples/helper_method.html.erb %>
<% values = (1..50).to_a %>
<% values.each do |value| %>
<%= show_value(value) %>
<% end %>
This is the show_value helper method:
def show_value(value)
content_tag :div, value
end
Then I ran benchmarks with:
require 'benchmark'
Rails.logger.level = :fatal # Turn off logging of view info
def test_render(template)
100.times { ApplicationController.render(template: template) }
end
Benchmark.bmbm do |b|
b.report('Single View Template') { test_render('examples/single_view_template') }
b.report('Partial') { test_render('examples/partial') }
b.report('Partial Collection') { test_render('examples/partial_collection') }
b.report('Helper Method') { test_render('examples/helper_method') }
end
These are the results:
Rehearsal --------------------------------------------------------
Single View Template 0.347008 0.138744 0.485752 ( 0.593323)
Partial 0.485201 0.112485 0.597686 ( 0.635593)
Partial Collection 0.283788 0.099981 0.383769 ( 0.411720)
Helper Method 0.279053 0.100516 0.379569 ( 0.408297)
----------------------------------------------- total: 1.846776sec
user system total real
Single View Template 0.259254 0.100171 0.359425 ( 0.389293)
Partial 0.447392 0.101954 0.549346 ( 0.579761)
Partial Collection 0.299114 0.104745 0.403859 ( 0.449048)
Helper Method 0.274448 0.101476 0.375924 ( 0.404484)
And here were the results when I updated the views to print 100 values instead of 50:
Rehearsal --------------------------------------------------------
Single View Template 0.292736 0.110953 0.403689 ( 0.453713)
Partial 0.650573 0.109569 0.760142 ( 0.793807)
Partial Collection 0.306908 0.100607 0.407515 ( 0.434600)
Helper Method 0.290522 0.099390 0.389912 ( 0.417302)
----------------------------------------------- total: 1.961258sec
user system total real
Single View Template 0.260891 0.099110 0.360001 ( 0.385955)
Partial 0.635798 0.105802 0.741600 ( 0.773008)
Partial Collection 0.302778 0.100124 0.402902 ( 0.431215)
Helper Method 0.286351 0.099417 0.385768 ( 0.413537)
Keeping everything in a single view template is the fastest. Refactoring code with helper methods is almost as fast. Refactoring with partials that can take advantage of the collection option is also fast. But rendering a large number of independent partials can slow things down in a hurry.
Organizing view code is a balance between what's easy to maintain and what performs at an acceptable level.
| Pros | Cons | |
|---|---|---|
| Large View Template | Fast, Easy to read | Not DRY, Frequent merge conflicts |
| Partials | Easy to read, DRY | Noticeably slows page loads if overused |
| Helper Methods | Fast, DRY | Difficult to read when building complex HTML, Easy to forget to escape values |
Sometimes a blend of these different options is the best approach.
