🚀Out-of-Order HTML Streaming Hits Browsers in Chrome 150
Browsers now stream HTML out-of-order, faster page loads
TL;DR
Out-of-order HTML streaming is coming to browsers, allowing pages to load faster by rendering content as it arrives. Chrome 150 leads the charge, with Safari and Firefox on board. This changes how pages load, improving user experience.
Out-of-order HTML streaming is moving from JavaScript frameworks to web browsers, with Chrome 150 leading the charge. This means users can view and interact with a page before it fully loads, thanks to browser patches that replace placeholders as data arrives. Developers can declare single insertion points or wrap temporary fallback content using the <template for> attribute. This initiative aims to prevent slow-to-compute parts of the page from blocking the entire page, improving user experience and page load times. Initial support ships in Chrome and Edge 150, alongside textStream() in version 151.
Key Points
Chrome 150 introduces out-of-order HTML streaming, allowing pages to load faster by rendering content as it arrives.
Safari and Firefox have signaled support for the proposal, aligning with Chrome's initiative.
Developers can use the <template for> attribute to declare single insertion points or wrap temporary fallback content.
The Fetch API complements this with the response.textStream() helper, enhancing streaming capabilities.
Initial support ships in Chrome and Edge 150, alongside textStream() in version 151.
Why It Matters
If you're building web apps, out-of-order HTML streaming in Chrome 150 can significantly improve page load times. This is especially beneficial for large, data-intensive pages where slow-to-compute parts can block the entire page. Developers can now use the <template for> attribute to declare insertion points, enhancing user experience without waiting for full page loads.
Comments
Be the first to comment
Enjoyed this article?
Get it daily. 7am. Free. Reads in 5 minutes.
Join 3,484 builders reading daily.