本文对Vue3.3新增指令v-memo进行了介绍，并举了一个在实际开发中使用的场景。通过v-memo能够实现对页面性能的一些优化。

知道了虚拟列表可以的在业务实践，这里使用了动态的渲染 el-option 方案，性能从8624 -> 1205。

项目从 vue2 升级到 vue3 后发现 element-plus table 的性能相比 vue2 版本下降非常严重，很卡，经过性能分析比对，找到了 3 个比较核心的优化点，减少了85%渲染耗时。

得益于 Vue 的 响应式系统 和 虚拟 DOM 系统 ，Vue 在渲染组件的过程中能自动追踪数据的依赖，并精确知晓数据更新的时候哪个组件需要重新渲染，渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上，Vue 应用的开发者一般不需要做额外的优化工作。 但在…

对于前端性能优化，优化手段其实是非常多的，但是不能盲目的进行优化，一定要先分析出项目的性能瓶颈，那么如何才能更好的分析出项目的瓶颈呢？其实最关键的是要分析页面的整个加载过程，找出有问题的地方再进行优化

前置基本知识 vuedevtool功能简介 安装 安装过程就不再赘述，可以参考官方的文档 ，官网上也描述了devtools不生效的场景。 概览 左侧4个tab components(组件的详细信息)

简介 Lighthouse 是谷歌开源的一款 Web 前端性能测试工具，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。本文中仅对 Performance 部分的指标进行介绍。 Per

网页的渲染是一个宏任务。 这是我下的一个结论。 别着急反驳，后面我会给出证据。 我们先来聊下什么是调试： 调试是通过工具获取运行过程中的某一时刻或某一段时间的各方面的数据，帮助开发者理清逻辑、分析性能

Chrome Devtools 的 Performance 工具是性能分析和优化的利器，因为它可以记录每一段代码的耗时，进而分析出性能瓶颈，然后做针对性的优化。 这么强大的工具肯定是要好好掌握的，今天