--- title: "Solving frontend rendering performance for large datasets - Part 1" description: "Analyzes the root cause of browser jank when the frontend renders large amounts of DOM at once, and compares three solutions: time-sliced rendering, scroll-based rendering, and virtual lists." canonical_url: "https://blog.markkulab.net/en/post/frontend-rendering-performance-issue" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2021-09-27 01:01:01 +0800" category: "Frontend" tags: ["frontend", "performance", "virtual list", "rendering", "vue", "large data", "dom", "optimization"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Solving frontend rendering performance for large datasets - Part 1 ## Problem In some cases, certain pages need to display a large amount of data at once and users do not want pagination. But because the dataset is so big, the rendering and execution can momentarily freeze the browser or make it stop responding. ## Root cause After investigating the example above repeatedly, here is what I found: * The page jank comes from rendering too much DOM at the same time. * Too many DOM nodes on a single page will also stutter on lower-spec computers or phones. * Because our frontend framework is Vue, more components mean more Virtual DOM. Whenever the data changes, components may also be triggered to re-render. ## Solutions ### 1. Time-sliced rendering - since the jank is caused by rendering too much DOM at once, we can use setTimeout to render in batches. * The downside: while setTimeout makes the initial paint feel fast, you can immediately see the first screen of data on every refresh, but when you scroll fast, the page will flicker or briefly go white. ### 2. Scroll-based rendering (lazy loading) - render a few more rows each time the scrollbar moves. * Lazy loading is not the same as a virtual list / virtual scrollbar. A virtual list only renders the rows in the visible range each time. * When the dataset is large, it still ends up rendering too much DOM and the browser stutters. * Even though there are a thousand rows, the scrollbar only grows as you scroll down, so the bar's proportion looks off and is awkward to drag. ![FIFA club ranking table with full-height scrollbar](https://blog.markkulab.net/content/markku/posts/frontend-rendering-performance-issue/images/dostJfa.png) ### 3. Segmented rendering - based on the row count and item height, build a virtual scrollbar. Render only the visible range; rows beyond it do not produce extra DOM. Here is a summary of the options for segmented scrolling: 1. Clusterize.js library 2. Virtual scrolling (Vue-virtual-scroller) library 3. Vue virtual list component [Sample link](https://codesandbox.io/s/virtuallist-1-rp8pi?file=/src/main.js) 4. Build your own paginated rendering component ### Takeaways Given our situation - a sports score-comparison site where the client did not want pagination but needed 1000-2000 matches displayed at once - segmented rendering ended up being the recommended approach. About infinite scroll: the frontend was crazy about infinite scroll for a while, but it does not actually fit most situations. It can work well for social networks, but not for general scenarios. Today, fewer sites still rely on infinite scroll. * Users have a hard time finding their target. * Bad for accessibility. * Bad for SEO. * Position drifts when navigating back. ### Extras 1. Additional rendering optimizations * Shrink object size and strip unnecessary properties (Limit unnecessary data passing). * Filter out data you do not need. * Render Once - if part of a component's content never changes, use the v-once directive so that piece renders only once. ## References [Reference link](https://juejin.cn/post/6844903938894872589) [Reference link](https://tangbc.github.io/vue-virtual-scroll-list/#/keep-state) [Reference link](https://ithelp.ithome.com.tw/articles/10249161) [Reference link](https://blog.logrocket.com/rendering-large-datasets-vue-js/?fbclid=IwAR2D0Q7_2T9ZdMlL2mAIWO8pDAgtblNMvY_9AUbil6zKN_Qg0IiCziq9j9s) [Reference link](https://www.cnblogs.com/lhl66/p/13666125.html) [Reference link](https://medium.com/better-programming/6-ways-to-speed-up-your-vue-js-application-2673a6f1cde4) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/frontend-rendering-performance-issue) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.