Optimize Browser Rendering for Faster UI

An engineer just tackled a UI problem we’ve been struggling with for 30+ years. Text layout. Every time a web app needs to know: “How big is this text?” It asks the browser. And the browser: • pauses execution • recalculates layout (reflow) • then returns the measurement That means it’s not just measuring text it’s recalculating the entire page. This is one of the biggest reasons behind janky scrolling and unstable UI. ⸻ Now here’s the interesting part. Pretext.js takes a completely different approach. How it works Instead of asking the DOM, it computes layout independently. 1. Uses Canvas (measureText) • Gets accurate text metrics without triggering layout 2. Splits text into segments • Handles proper word boundaries 3. Measures once and caches 4. Computes layout using pure math • line breaks • wrapping • total height No DOM reads. No reflow. No blocking. ⸻ Why this matters • Predict layout before rendering • Eliminate layout thrashing • Smooth chat apps, feeds, and virtualized lists • Better performance at scale ⸻ Reality check • Not full CSS parity yet • Requires proper font handling • Minor differences vs actual DOM rendering But the direction is important. ⸻ Takeaway We’ve been asking the browser for layout. This shows we can compute it ourselves. —— GitHub https://lnkd.in/dx7eQnUw Demo credits • Work by Cheng Lou #javascript #frontend #webdevelopment #reactjs #performance #softwareengineering #webperf #uilayout

Just launched my new personal site (roshanj.online) and managed to hit a 4x 100 Lighthouse score. 💯 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 and 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 were my main focus areas for this redesign. Here's a quick look at the stack and the tech approaches I used to keep things fast and clean: • 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟱 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿: Heavily relied on React Server Components to statically pre-render the pages and MDX blog posts, keeping the client-side JavaScript minimal. • 𝗡𝗮𝘁𝗶𝘃𝗲 𝗔𝗣𝗜𝘀 𝗼𝘃𝗲𝗿 𝗛𝗲𝗮𝘃𝘆 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀: Skipped the bloated animation packages. Styled it natively with Tailwind CSS and used the browser's raw 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 𝗔𝗣𝗜 for the light/dark mode switch. • 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 (𝗔𝟭𝟭𝘆): Kept it simple but strict, semantic HTML tags, exact ARIA labels for icon buttons, and proper keyboard focus rings. • 𝗦𝗘𝗢 & 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀: Added JSON-LD structured data in the root layout and optimized the hero assets using next/image (with eager loading above the fold) to prevent layout shifts. 🤖 𝗔𝗜-𝗔𝘀𝘀𝗶𝘀𝘁𝗲𝗱 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄: This build was also a great experiment in modern AI pair programming. I used Claude Code (with underlying models 𝗚𝗟𝗠 𝟰.𝟳 and 𝗚𝗟𝗠 𝟱.𝟭) to lay out the heavy foundations and initial architecture, and then switched to Antigravity (models used 𝗖𝗹𝗮𝘂𝗱𝗲 𝗦𝗼𝗻𝗻𝗲𝘁-𝟰.𝟲 and 𝗚𝗲𝗺𝗶𝗻𝗶 𝟯.𝟭 𝗣𝗿𝗼) for all the granular UI touch-ups and final polish. It was an awesome exercise in getting back to web fundamentals while utilizing cutting-edge tools. Feel free to check it out and tell me what you think: https://roshanj.online/ It still needs some improvement, but I'm happy with the results it generated to release the first version of it. #𝗡𝗲𝘅𝘁𝗷𝘀 #𝗔𝗜 #𝗪𝗲𝗯𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 #𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 #𝗥𝗲𝗮𝗰𝘁 #𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱𝗖𝗦𝗦

For 30 years, we've been measuring text the same expensive way. Every React app. Every dashboard. Every UI you've shipped. When the browser needs to know where text ends, it calls getBoundingClientRect() — which halts everything, recalculates the entire page layout, and returns a number. That's layout reflow. It's costly, and we do it on every resize and every render. Meanwhile, magazines have flowed text around images for centuries. On the web? Not possible. The layout engine just doesn't work that way. A library called Pretext just changed that. The trick was canvas.measureText() — a Canvas API that's always been there. It measures text using the browser's own font engine, with zero DOM involvement. Nobody had built a full text layout engine on top of it. Pretext did. How it works: prepare() runs once — segments your text, measures glyph widths via canvas, caches everything. ~19ms for 500 texts. layout() is pure math over that cache. Zero DOM. ~0.09ms for 500 texts, every time after. The real unlock is layoutNextLine() — feed each line a different width as you go. Narrower beside an image. Full width below it. That's how magazine text wrapping works. First time it's possible on the web. What you can now build: → Text that wraps around floated images, line by line → Proper list virtualization — exact heights, no guessing → Multiline shrink-wrap — tightest container that fits your text → Render to DOM, Canvas, SVG, or WebGL Full language support — RTL, CJK, emojis, mixed-bidi, all handled. npm install @chenglou/pretext — Pure TypeScript. MIT. → https://lnkd.in/e_v6WBfE #webdev #javascript #typescript #frontend #opensource

A recent architectural breakthrough by Cheng Lou (ex-React core, ReasonML creator) highlights a fundamental shift in how we approach high-performance web applications: bypassing the browser’s layout engine entirely. For years, building complex, application-grade UIs—like design tools or dynamic chat interfaces—has meant fighting the browser’s document rendering pipeline. Every time an application needs to measure text size, it asks the browser. This triggers a reflow, locks the main thread, and eats into the 16ms-per-frame budget. Historically, our solutions have been workarounds: Virtual DOMs to batch writes, CSS containment to limit the blast radius, or strict read/write separations. We accepted that the browser owns layout; we just tried to interrupt it less often. The Breakthrough Cheng Lou’s new UI stack (currently powering Midjourney’s interface on Bun) takes a different route: zero layout passes. By measuring text in pure TypeScript and skipping the DOM and CSS entirely, he demonstrated a categorical performance leap—dropping layout calculation times from 30ms to 0.05ms. While Cheng’s specific engine isn't a simple package we can drop into our projects just yet, the underlying philosophy—moving away from DOM-dependent layouts for heavy interactive elements—is something we can start applying right now: 1. Render Heavy UI on Canvas/WebGL 2. CSS Containment 2. Adopt "App-First" Frameworks We are moving past hacking the document renderer. The future of complex web apps is treating the browser as a blank canvas rather than a document. #UIArchitecture #WebPerformance #FrontendEngineering #ReactJS #WebDevelopment

𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐨𝐯𝐞𝐫𝐭𝐡𝐢𝐧𝐤𝐢𝐧𝐠 𝐬𝐭𝐚𝐭𝐞 𝐮𝐩𝐝𝐚𝐭𝐞𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝟏𝟖. Remember the days of `ReactDOM.unstable_batchedUpdates` or manually wrapping multiple `setState` calls to prevent excessive re-renders? Good news: React 18 made those mostly obsolete with automatic batching. Now, pretty much any updates—inside event handlers, promises, or `setTimeout`—are batched together into a single re-render. It's a huge win for performance out of the box! However, there's always an escape hatch: `ReactDOM.flushSync()`. This function forces React to process any pending state updates synchronously and update the DOM immediately. While powerful, it's rarely needed and should be used with extreme caution. **When might you reach for `flushSync`?** * **Immediate DOM measurements:** If you need to read the updated DOM layout right after a state change (e.g., for complex animations or integrating with non-React UI libraries) before the browser paints the next frame. * **Controlling browser painting:** For very specific, imperative UI sequences where you need a synchronous render cycle. For 99% of use cases, React's automatic batching handles performance beautifully. Reaching for `flushSync` is usually a sign you might be fighting React's reconciliation process, not working with it. What's the most obscure React API you've had to use for a specific UI challenge? #React #ReactJS #Performance #Frontend #WebDev #JavaScript

 Is "Pretext" the Future of Web Performance❓ If you've ever built a complex UI with dynamic text, you’ve likely hit the "Performance Wall." One library is currently breaking the internet by offering a way over that wall: Pretext. Created by Cheng Lou (former React core member), Pretext has gained over 16,000 GitHub stars in just 24 hours. Here is why the entire dev community is talking about it. 🔗 Pretext: https://lnkd.in/dtqiu8ZE 🔗 Live demos: https://lnkd.in/dV5ZPPAK ❓ What is Pretext? Pretext is a high-performance text layout engine for the web. Unlike traditional methods that rely on the browser's Document Object Model (DOM) to figure out where text should go, Pretext handles the layout logic itself. ⚠️ The Problem: The "Layout Reflow" Nightmare In a standard web app, if you want to know how wide a piece of text is, you ask the DOM. This triggers a Layout Reflow—one of the most expensive operations a browser can perform. The browser has to stop everything, recalculate dimensions, and reposition every element on the page. This is why virtual lists, masonry layouts, and fluid UIs often feel "laggy" or "choppy" when scrolling or resizing. 🛠️ How Does It Solve This? Pretext takes a radical "DOM-less" approach to measurement: Canvas-Based Measurement: It uses the Canvas API to measure text segments, which is significantly faster than DOM-based queries. One-Time Preparation: It performs the "heavy lifting" (normalizing whitespace and segmenting text) just once. Pure Arithmetic: Once measured, it uses pure mathematical calculations and cached data to handle layouts. It essentially tells the browser where to put text, rather than asking the browser where it thinks the text should go. Are you excited to try Pretext in your next project, or do you think the DOM is still king? Let's discuss below! 👇 #JavaScript #WebDevelopment #FrontendEngineering #Pretext #SoftwareArchitecture #WebPerformance #Coding #TechTrends

Most developers use the browser every day. Far fewer actually understand what it’s doing. And that’s why a lot of “random UI performance issues” aren’t random at all. A simplified browser rendering pipeline: HTML → DOM CSS → CSSOM DOM + CSSOM → Render Tree Layout → Paint → Composite Why this matters: Because not all visual updates cost the same. Layout / reflow = expensive Paint = cheaper Composite = usually fastest That’s why animations using transform and opacity often feel much smoother than changing: width, height, top left If you understand how the browser renders, you stop guessing and start optimizing intentionally. This is one of those topics that separates “it works” from “it performs well.” What still confuses more developers in your opinion: reflow, repaint, or compositing? #javascript #webdevelopment #frontend #reactjs #performance #browser #softwareengineering

#Hello_Connections #Day32 of #100DaysOfCode Built an Advanced Image Slider using Bootstrap 5 Features: Fully responsive carousel Multiple slides with smooth transitions Dark overlay for better text visibility Text + buttons on each slide Indicators and navigation controls This component can be used in landing pages, portfolios, or modern website UI. Continuing to improve my frontend skills step by step Code Of School Avinash Gour & Ritendra Gour #HTML #CSS #Bootstrap #WebDevelopment #Frontend #LearningJourney

My Next.js app's Lighthouse score went from 62 to 97. No paid tools. No infrastructure changes. Just 5 things I was doing wrong that most devs don't notice. Mistake 1: Loading Google Fonts via a link tag. External font requests are render-blocking. My CLS was 0.28. Switched to next/font and it downloads fonts at build time, self-hosts them, and auto-calculates fallback font metrics so there's zero layout shift. CLS dropped to 0.02. LCP improved by 400ms. Mistake 2: No priority on my hero image. My largest above-the-fold image was lazy-loading by default. The browser downloaded it last instead of first. Added priority prop to next/image. LCP went from 4.2s to 1.9s. One prop. 55% improvement. Mistake 3: Wrapping entire pages in 'use client'. I had 'use client' at the top of my page component because one button needed onClick. The entire page shipped as client JavaScript. I moved 'use client' to just the button component. JS bundle dropped 62%. Mistake 4: Barrel exports killing tree-shaking. export { Button } from './Button' in an index.ts file. Looks clean. But the bundler pulls in every component from that barrel file. Removed it, used direct imports. First Load JS went from 1.5MB to 200KB. Mistake 5: Testing Lighthouse in dev mode. Dev mode injects HMR code and error overlays. My dev score was 62. Production was 85 before any fixes. Always run next build && next start before measuring. After all 5 fixes: 62 to 97. Same server. Run Lighthouse on your site right now. What score did you get? #NextJS #WebPerformance #React #JavaScript #WebDev

🚀 Building smarter filters in my Print Khata Web App In this update, I focused on creating a reusable autocomplete filter system that works across Clients, Goods, and Invoices — instead of writing separate logic every time. ✅ Common autocomplete component ✅ Dynamic suggestions (name/contact) ✅ Cleaner, scalable JS structure ✅ Better UX with limited results + click handling 🎥 Watch here: https://lnkd.in/gcW5XpDc Next: Applying these filters to actually control table data 🔍 #JavaScript #WebDevelopment #Frontend #BuildInPublic #ProductThinking