-
Notifications
You must be signed in to change notification settings - Fork 358
Description
🐛 data-turbo-track: "reload" causes persistent performance degradation in Rails 8.0.2
Environment
- Rails: 8.0.2
- turbo-rails: 2.0.x
- Ruby: 3.4.1
- Environment: Development (affects all environments)
- Asset Pipeline: Propshaft
Problem Description
Using data-turbo-track: "reload" on CSS files causes persistent performance degradation that affects subsequent page requests, even after navigating away from the page that loaded the tracked CSS file.
Symptoms
- Normal page loads: 150-250ms
- After visiting page with
data-turbo-track: "reload": All subsequent pages become 2-5x slower - Performance contamination persists until application restart or cache clearing
- Specific symptom: Active Storage image requests jump from ~50ms to 600ms+ after visiting affected routes
Root Cause Analysis
When data-turbo-track: "reload" is applied to large CSS files (300+ lines), Turbo's asset state management becomes corrupted and persists across subsequent requests. This affects:
- Asset pipeline performance
- Active Storage request handling
- Overall Turbo navigation speed
- Browser asset caching behavior
Reproduction Steps
-
Create a Rails 8.0.2 application with turbo-rails
-
Create a large CSS file (300+ lines) with complex styling:
/* app/assets/stylesheets/pages/heavy_styles.css */ /* ...300+ lines of CSS with animations, backdrop-filters, etc... */
-
Add this CSS to a view with reload tracking:
<!-- app/views/some_page/index.html.erb --> <% content_for :head do %> <%= stylesheet_link_tag "pages/heavy_styles", "data-turbo-track": "reload" %> <% end %>
-
Test the performance pattern:
- Visit other pages → Fast (150-250ms)
- Visit the page with tracked CSS → Slow initially
- Visit other pages again → Now permanently slow (500ms+)
- This slowness persists until restart
Expected Behavior
data-turbo-track: "reload" should only affect the asset loading behavior for that specific page, without contaminating the performance of subsequent page requests.
Actual Behavior
Visiting any page with data-turbo-track: "reload" permanently degrades the performance of all subsequent requests until application restart.
Workaround
Remove data-turbo-track: "reload" from CSS files:
<!-- Instead of: -->
<%= stylesheet_link_tag "pages/heavy_styles", "data-turbo-track": "reload" %>
<!-- Use: -->
<%= stylesheet_link_tag "pages/heavy_styles" %>Impact
- Development productivity: Developers need to frequently restart servers
- Production implications: Could affect production apps using asset reload tracking
- User experience: Degraded performance across the entire application
- Debugging difficulty: Hard to trace since the cause and effect are separated
Additional Context
This issue appears to be undocumented and may be specific to Rails 8.0.2 with Propshaft and the new asset pipeline. The problem is most severe with large CSS files containing complex styling (animations, backdrop-filters, complex selectors).
The issue was discovered during a Rails 8.0.2 upgrade where multiple mission-planning related views used data-turbo-track: "reload" on a large CSS file, causing systematic performance degradation.
Potential Investigation Areas
- Turbo's asset state management and how reload tracking affects internal state
- Interaction between Propshaft and Turbo asset tracking
- Memory leaks or persistent objects in Turbo's asset monitoring
- Browser asset caching conflicts caused by reload tracking
Priority Justification
This issue is critical for Rails 8.0.2 applications because:
- Silent Performance Killer: Developers may unknowingly use
data-turbo-track: "reload"and suffer mysterious performance issues - Hard to Debug: The cause (visiting a page with tracked CSS) and effect (slow subsequent pages) are separated, making it nearly impossible to trace
- Production Impact: Could severely affect production applications using asset reload tracking
Note: After reviewing all current open issues, this bug appears to be completely undocumented, making this report valuable for the Rails 8.0.2 community.
Additional Context - Potential Anti-Pattern
Note: The usage of data-turbo-track: "reload" on large CSS files may be an anti-pattern. However, even anti-patterns should not cause persistent performance degradation that affects the entire application until restart.
Expected behavior for anti-patterns: Poor performance on the specific page using the anti-pattern, but no contamination of subsequent requests.
Actual behavior: Persistent application-wide performance degradation.