本文以 Core Web Vitals 为核心，聚焦真实用户体验指标，系统分析 LCP、INP、CLS 对页面可感知性能的影响。结合服务器组件与流式渲染等现代渲染技术，探讨前端性能优化从资源层面向渲染架构层面的转变，并通过实践视角说明如何借助服务端渲染能力，构建更快、更稳、更可交互的 Web 应用体验。

Vue 3.6 带来了史无前例的重大更新——Vapor Mode。这是 Vue 官方推出的“无虚拟 DOM”编译模式：彻底跳过 VNode 与 diff 流程，直接生成精准的原生 DOM 操作代码。首屏 JS 体积缩减 65%，内存峰值降低 42%，性能全面对标 Svelte 与 Solid。本文将带你从原理、性能、使用方式到未来趋势，全方位解析 Vapor Mode 如何改变前端框架的性能格局。

1. 在vue中v-for和v-if不要放在同一个元素上使用。 由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响. 官方给出的建议是在计算属性上过滤之后再进行遍历。 2. 动态加载组件。 在同一个页面中如果不需要立刻展示的组件，可以使用动态组件（动态组件主页面加载是不会加载，等到触发条件时才加载该组件，并且加载一次后就有缓存）。 3. 路由懒加载 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才…