传奇简单网站模板甘肃省住房与建设厅网站

传奇简单网站模板,甘肃省住房与建设厅网站,网站建设交什么税,京东app下载平台文章目录前言Vue 长列表为什么一定会卡#xff1f;1. v-for 渲染大量节点的真实代价2. DOM 数量过多#xff0c;回流重绘是致命的3. 图文混排 复杂组件 雪上加霜核心解法#xff1a;虚拟列表#xff08;Virtual List#xff09;1. 虚拟列表原理一句话版2. vue-virtual-s…文章目录前言Vue 长列表为什么一定会卡1. v-for 渲染大量节点的真实代价2. DOM 数量过多回流重绘是致命的3. 图文混排 复杂组件 雪上加霜核心解法虚拟列表Virtual List1. 虚拟列表原理一句话版2. vue-virtual-scroller 快速上手 Demo安装基础示例可直接跑关键点解析key 用不好虚拟列表也救不了你错误示例正确示例keep-alive 和组件卸载策略keep-alive 的正确用法离开页面主动清理数据IntersectionObserver 做懒加载图片懒加载示例实战结果10 万级表格渲染总结前言在 Vue 项目里只要一遇到长列表很多同学第一反应都是“我这也没干啥啊就是 v-for 渲染个列表怎么就卡成 PPT 了”更狠一点的产品一句话“这个页面数据有点多可能十几万条吧。”然后你就知道这一页不优化是肯定过不去了。这篇文章我们就从为什么卡开始一步一步讲清楚Vue 长列表性能问题的本质以及真正能落地的解决方案。Vue 长列表为什么一定会卡先说结论一句话版卡不是 Vue 慢是 DOM 太多。1. v-for 渲染大量节点的真实代价假设你写了这样一段代码div v-foritem in list :keyitem.id {{ item.name }} /div如果list有 10 万条数据意味着什么浏览器里会真实创建10 万个 DOM 节点每次滚动都会涉及布局计算Layout回流Reflow重绘Repaint任意一次父组件更新都可能触发这些节点的 diff这不是 Vue 的锅这是浏览器物理极限的问题。2. DOM 数量过多回流重绘是致命的浏览器渲染流水线大概是JS → Style → Layout → Paint → Composite当 DOM 数量过多时Layout 时间暴涨Scroll 时频繁触发 repaintFPS 掉到 30 以下人眼就明显感觉卡这也是为什么你会看到滚动时页面发虚快速滑动直接“锁死”真机比模拟器还卡3. 图文混排 复杂组件 雪上加霜如果列表项里还有图片自定义组件动态高度hover / 动画那每一行的渲染成本都会进一步放大。所以结论很清楚长列表绝对不能一次性渲染完。核心解法虚拟列表Virtual List虚拟列表的核心思想其实很简单只渲染“屏幕可见的那一小部分 DOM”其他的用占位撑高度。1. 虚拟列表原理一句话版假设屏幕一次最多只能看到 20 行DOM 中永远只存在 2030 行滚动时复用 DOM 节点数据在变DOM 不新增这就是虚拟列表。2. vue-virtual-scroller 快速上手 Demo这是 Vue 里最成熟、最常用的方案之一。安装npminstallvue-virtual-scroller基础示例可直接跑template RecycleScroller :itemslist :item-size50 key-fieldid template #default{ item } div classrow {{ item.text }} /div /template /RecycleScroller /template script setup import { RecycleScroller } from vue-virtual-scroller const list Array.from({ length: 100000 }).map((_, i) ({ id: i, text: 第 ${i} 行数据 })) /script关键点解析item-size非常重要最好是固定高度key-field告诉组件用哪个字段复用 DOM内部使用的是 DOM 复用不是频繁创建/销毁实测10 万条数据滚动依然 60 FPS。key 用不好虚拟列表也救不了你很多列表性能问题其实是key 用错了。错误示例div v-for(item, index) in list :keyindex问题数据插入 / 删除时index 全部变化Vue 会误以为所有节点都变了正确示例div v-foritem in list :keyitem.id记住一句话key 一定要稳定、唯一、和业务语义一致。keep-alive 和组件卸载策略在分页列表或 Tab 场景中经常会遇到“切换回来列表还在但怎么感觉越来越卡”keep-alive 的正确用法keep-alive :max2 router-view / /keep-alive控制缓存页面数量避免无限缓存导致内存膨胀离开页面主动清理数据onDeactivated((){list.value[]})对于超大列表离开页面就应该释放内存不要心疼。IntersectionObserver 做懒加载对于图片、复杂组件可以再加一层优化。图片懒加载示例constobservernewIntersectionObserver(entries{entries.forEach(entry{if(entry.isIntersecting){entry.target.srcentry.target.dataset.src observer.unobserve(entry.target)}})})图片进入可视区才加载极大降低首屏压力实战结果10 万级表格渲染优化前首屏白屏 35 秒滚动 FPS 30优化后虚拟列表 懒加载首屏 500ms滚动稳定 60 FPS总结Vue 长列表优化本质是“控制 DOM 数量”。只要 DOM 在可控范围内性能问题基本都能解决。