Why views present data in Ruby on Rails - Performance Evidence

Performance: Why views present data

MEDIUM IMPACT

This concept affects how quickly the page content appears and updates by controlling how data is rendered in the browser.

Rendering data in a Rails view efficiently

Ruby on Rails

<%= render partial: 'item', collection: @items %>

<!-- _item.html.erb -->
<div>
  <strong><%= item.name %></strong>
  <p><%= item.description %></p>
</div>

Using partials with collection rendering batches DOM updates and reduces repeated code, improving rendering efficiency.

📈 Performance GainSingle reflow for all items, reducing LCP and improving perceived load speed

Rendering data in a Rails view efficiently

Ruby on Rails

<% @items.each do |item| %>
  <div><%= item.name %></div>
  <div><%= item.description %></div>
<% end %>

Rendering many items with multiple elements causes the browser to process many DOM nodes and triggers multiple reflows.

📉 Performance CostTriggers N reflows where N is number of items, increasing LCP time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Loop with inline ERB	Many nodes (2 per item)	N reflows (N = items)	High paint cost	[X] Bad
Partial with collection rendering	Fewer nodes, grouped	Single reflow	Lower paint cost	[OK] Good

Rendering Pipeline

Rails views generate HTML that the browser parses and renders. Efficient view code reduces the number of DOM nodes and layout recalculations.

→HTML Generation

→DOM Construction

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive when many DOM nodes are created or updated.

Core Web Vital Affected

LCP

This concept affects how quickly the page content appears and updates by controlling how data is rendered in the browser.

Optimization Tips

1Avoid rendering large loops inline in views to reduce DOM complexity.

2Use partials with collection rendering to batch DOM updates.

3Minimize the number of DOM nodes generated to speed up layout and paint.

Performance Quiz - 3 Questions

How does rendering many items directly in a Rails view affect page load?

A It increases layout recalculations and slows down LCP

B It reduces DOM nodes and speeds up rendering

C It has no effect on performance

D It improves browser caching

DevTools: Performance

How to check: Record a performance profile while loading the page, then inspect the 'Layout' and 'Recalculate Style' events to see how many times they occur.

What to look for: Look for fewer layout recalculations and shorter total layout time indicating efficient view rendering.