You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've run into a critical memory leak when integrating Turbo with my Shopify store. This seems to be a deeper conflict between Turbo and Shopify’s architecture, not limited to a specific theme. After each Turbo-driven navigation, the heap size increases exponentially due to thousands of detached DOM nodes being retained, leading to eventual browser crashes.
Setup: Shopify theme with Turbo loaded via CDN in theme.liquid. Basic setup with <turbo-frame id="main" data-turbo-action="advance"> wrapping the primary content. Removed all custom JS to isolate, but issue still persists across both paid and free themes.
Memory leak occurs only with Turbo—heap snapshots show entire DOM trees from previous pages are retained. Switching to PJAX completely resolves it, indicating Turbo’s handling of Shopify’s dynamic element updates is the issue.
The issue occurs even in a stripped-down theme, suggesting it’s related to Turbo’s core caching or preservation logic conflicting with Shopify’s dynamic section rendering.
Tried disabling Turbo Frames, manual node replacements, using data-turbo-permanent to preserve elements, different script loading strategies (async, defer, dynamic imports), and more. All failed to resolve the issue.
Is there a known issue with Turbo and Shopify’s dynamic DOM structure? Could Turbo’s element preservation or caching be mishandling the updates? Any suggestions for debugging this?
Appreciate any guidance—I'd really like to leverage Turbo’s benefits if I can get past this issue.
Hi,
I've run into a critical memory leak when integrating Turbo with my Shopify store. This seems to be a deeper conflict between Turbo and Shopify’s architecture, not limited to a specific theme. After each Turbo-driven navigation, the heap size increases exponentially due to thousands of detached DOM nodes being retained, leading to eventual browser crashes.
Setup: Shopify theme with Turbo loaded via CDN in theme.liquid. Basic setup with
<turbo-frame id="main" data-turbo-action="advance">
wrapping the primary content. Removed all custom JS to isolate, but issue still persists across both paid and free themes.Memory leak occurs only with Turbo—heap snapshots show entire DOM trees from previous pages are retained. Switching to PJAX completely resolves it, indicating Turbo’s handling of Shopify’s dynamic element updates is the issue.
The issue occurs even in a stripped-down theme, suggesting it’s related to Turbo’s core caching or preservation logic conflicting with Shopify’s dynamic section rendering.
Tried disabling Turbo Frames, manual node replacements, using data-turbo-permanent to preserve elements, different script loading strategies (async, defer, dynamic imports), and more. All failed to resolve the issue.
Is there a known issue with Turbo and Shopify’s dynamic DOM structure? Could Turbo’s element preservation or caching be mishandling the updates? Any suggestions for debugging this?
Appreciate any guidance—I'd really like to leverage Turbo’s benefits if I can get past this issue.
Preview link to my project for reference: https://xnd7vpl38cwx2d7e-66860908835.shopifypreview.com
Thanks!
The text was updated successfully, but these errors were encountered: