--- title: On Rendering Diffs | daily.dev description: A deep technical dive into building the CodeView component for the @pierre/diffs package, focused on achieving zero-blanking diff rendering at scale. The post... canonical: https://daily.dev/posts/yezsuk5kr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: On Rendering Diffs | daily.dev og:description: A deep technical dive into building the CodeView component for the @pierre/diffs package, focused on achieving zero-blanking diff rendering at scale. The post... og:url: https://daily.dev/posts/yezsuk5kr og:image: https://api.daily.dev/og/posts/YEZsuK5Kr.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # On Rendering Diffs **[Ole-Martin](https://daily.dev/sources/xdczd-phg)** · [@ombratteng](https://daily.dev/ombratteng) · 113 upvotes · 10 comments ## Summary A deep technical dive into building the CodeView component for the @pierre/diffs package, focused on achieving zero-blanking diff rendering at scale. The post covers the 'Inverse Sticky Technique' — a novel CSS sticky positioning hybrid that preserves native scrolling while preventing blank regions during fast scrolls. Additional topics include scalable layout estimation with binary-search checkpoints, custom scroll anchoring, memory optimizations (detaching parsed strings, DOM element pooling, shared options state), and deferred syntax highlighting via Shiki worker pools. Real-world benchmarks include rendering the Linux v6-to-v7 diff, reducing memory from 2.4 GB to 1.15 GB and parse time by 80%. Known remaining challenges include CSS layout/paint costs, worker serialization overhead, and Safari/WebKit compatibility issues. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@samiullahpopalzai62** · 10 upvotes > This is a great example of how much engineering effort goes into making “smooth scrolling” actually work at scale. **@asmui\_ahmad** · 2 upvotes > yea that suck **@soumavadas221b** · 2 upvotes > For a moment i thought you are going to talk about git 😅 ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#infrastructure](https://daily.dev/tags/infrastructure) [View this post on daily.dev](https://daily.dev/posts/yezsuk5kr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/yezsuk5kr","headline":"On Rendering Diffs","text":"Shared: On Rendering Diffs","url":"https://daily.dev/posts/yezsuk5kr","datePublished":"2026-05-31T09:49:56.827Z","dateModified":"2026-05-31T09:49:56.830Z","author":{"@type":"Person","name":"Ole-Martin","url":"https://daily.dev/ombratteng","image":"https://avatars.githubusercontent.com/u/1681525?v=4","description":"Web magician 🪄\nDigital Janitor 🧹","worksFor":{"@type":"Organization","name":"Norwegian Tax Administration","logo":"https://www.google.com/s2/favicons?domain=skatteetaten.no&sz=128"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":65270}},"image":"https://media.daily.dev/image/upload/s--qPvKM23u--/f_auto/v1722860399/public/Placeholder%2009","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":113},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":10}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/DohSQATey"},"comment":[{"@type":"Comment","text":"This is a great example of how much engineering effort goes into making “smooth scrolling” actually work at scale.","datePublished":"2026-06-01T02:13:31.521Z","url":"https://daily.dev/posts/YEZsuK5Kr#c-ElVBuZPNC","author":{"@type":"Person","name":"samiullah popalzai","url":"https://daily.dev/samiullahpopalzai62","image":"https://lh3.googleusercontent.com/a/ACg8ocKNEvQiF2nCDtfuaHOK4vHMR087FlYhfqfokKtIJRkaLb1048cC=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10}},{"@type":"Comment","text":"yea that suck","datePublished":"2026-06-03T19:24:19.716Z","url":"https://daily.dev/posts/YEZsuK5Kr#c-zO13YbQEE","author":{"@type":"Person","name":"Asmu'i Ahmad","url":"https://daily.dev/asmui_ahmad","image":"https://avatars.githubusercontent.com/u/25726343?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"For a moment i thought you are going to talk about git 😅","datePublished":"2026-06-03T11:56:45.843Z","url":"https://daily.dev/posts/YEZsuK5Kr#c-uH6izj3BK","author":{"@type":"Person","name":"Soumava Das","url":"https://daily.dev/soumavadas221b","image":"https://avatars.githubusercontent.com/u/77767745?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/xdczd-phg","name":"Ole-Martin"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Ole-Martin","item":"https://daily.dev/sources/xdczd-phg"},{"@type":"ListItem","position":3,"name":"On Rendering Diffs"}]} ```