Vue 性能优化的方法

Vue 性能优化的方法多种多样，以下是一些常用的策略：

1. 使用v-show替换v-if：v-show是通过CSS控制元素的显示与隐藏，而v-if是通过操作DOM来控制元素的显示与隐藏，频繁操作DOM会导致性能下降。因此，在需要频繁切换显示状态的情况下，使用v-show更为高效。
2. 合理使用key：在使用v-for时，为每一项item设置唯一key值，可以方便Vue.js内部机制精准找到该条列表数据，在state更新时，较快地定位到diff，从而提高渲染性能。
3. 避免v-for与v-if结合使用：v-for的优先级高于v-if，如果两者同时使用，每次v-for循环时都需要进行v-if判断，这会影响性能。推荐的做法是将v-if放在v-for的外层，通过计算属性或过滤器来减少不必要的渲染。
4. 合理使用watch和computed：watch适用于执行异步或开销较大的操作，或者需要对数据变化作出特定响应的场景；computed则用于根据已有的响应式数据计算出一个新的值，并会进行缓存，只有在相关响应式数据改变时才会重新计算。这样可以避免不必要的重复计算，提高性能。
5. 组件缓存：使用keep-alive组件可以缓存不活动的组件实例，而不是销毁它们。这对于包含大量静态内容的组件特别有效，可以显著提高性能。
6. 路由懒加载：通过路由懒加载，只有在使用到对应的页面时才会加载相关的代码，这可以减少初始加载的代码量，提升网页的加载速度。
7. 资源管理：将静态资源放在第三方CDN服务器上，如CSS、JS、图片等，可以提高页面加载速度，减少项目打包后的体积，并利用浏览器缓存。
8. 节流和防抖技术：在事件处理、滚动加载、搜索框输入等场景下，使用节流和防抖技术可以有效地减少不必要的计算和操作，提升页面性能和用户体验。

v-if 和 v-for 在 Vue 中的优先级及优化

1. 优先级：v-for的优先级高于v-if。

2. 优化建议：

   • 如果v-if和v-for同时出现在一个元素上，推荐将v-if放在v-for的外层，或者使用计算属性先过滤掉不需要渲染的数据，然后再进行v-for渲染。
   • 避免在v-for内部使用复杂的计算或方法调用，这会导致每次渲染时都需要重新计算或调用，影响性能。

使用 Vue 渲染大量数据时的优化策略

1. 列表分页：将大量数据分页加载，只渲染当前页的数据，可以减少初始加载时间和内存占用。
2. 虚拟滚动：当列表中的数据数量非常大时，使用虚拟滚动可以避免渲染所有的数据，只渲染可见区域的数据。
3. 懒加载：对于需要异步加载的数据，可以使用懒加载的方式，在用户滚动到某个位置时再去加载数据并渲染。
4. 数据缓存：对于静态的大量数据，可以将其缓存到本地或使用浏览器的缓存机制，避免每次都从服务器获取数据。

Vue 缓存当前组件及更新方法

1. 缓存方法：

   • 使用keep-alive组件可以缓存不活动的组件实例。
   • 使用Vuex或localStorage等状态管理工具来持久化组件状态。

2. 更新方法：

   • 当组件状态发生变化时，如果使用了keep-alive，则组件实例不会被销毁，而是会触发其activated和deactivated生命周期钩子。可以在这些钩子中处理组件状态的更新。
   • 如果使用了Vuex或localStorage等状态管理工具，则需要通过相应的API来更新状态。

解决 Vue 打包时 vendor 文件过大的问题

1. 减少依赖包大小：选择轻量级的库和插件，去除未使用的依赖项。
2. 代码分割：将应用拆分成多个小块，按需加载，减少初始加载时间。
3. Tree Shaking：在打包过程中移除未使用的代码，减少打包体积。
4. 使用CDN：将一些常用的库和资源通过CDN引入，减少打包体积和服务器压力。

解决 SPA 单页应用首屏加载速度慢的问题

1. 代码分割：通过代码分割，将应用程序的代码分割成多个小块，并在需要时才进行加载。
2. 图片优化：压缩图片大小、使用WebP格式等方式来减少图片大小。
3. 按需加载：对于不必要的组件或图片，采用按需加载的方式。
4. 数据缓存：避免每次都重新请求数据，减少数据请求时间。
5. 使用CDN：将一些静态资源放在CDN上，减少页面加载时间。
6. 骨架屏：在页面加载过程中显示一个骨架屏，提高用户体验。

综上所述，Vue性能优化需要从多个方面入手，包括DOM操作、组件渲染、资源管理、状态管理等。通过合理使用Vue提供的各种工具和技巧，可以显著提高应用的性能和用户体验。

1. 使用 import 时，Webpack 如何处理 node_modules 中的依赖?

• 依赖解析：Webpack 会从 node_modules 文件夹中解析模块，根据配置的 resolve.mainFields，优先选择模块的入口文件（通常是 main 或 module 字段）。
• 代码优化：
  • Tree Shaking：如果依赖支持 ES Modules（如使用 module 字段），Webpack 会移除未使用的代码。
  • 缓存与分包：通过配置 SplitChunksPlugin，将第三方依赖分离到独立的 chunk，优化缓存利用。

---

2. Webpack 中的 bundle、chunk 和 module 是什么?

• Module（模块）：
  • 代码的最小单元，例如一个 JS 文件、CSS 文件或图片文件。
• Chunk（代码块）：
  • Webpack 按需或按配置生成的代码块，由多个模块组成。
  • 如 main.js 或异步加载的 vendor.js。
• Bundle（打包文件）：
  • Webpack 最终输出的文件，包含多个 chunk 的内容。

---

3. 常见的 Webpack Loader 有哪些?

1. JavaScript 转译：
   • babel-loader：转译 ES6+ 代码。
2. CSS 处理：
   • css-loader：解析 @import 和 url()。
   • style-loader：将 CSS 插入到 DOM 中。
   • postcss-loader：使用插件处理 CSS（如自动添加前缀）。
   • sass-loader：编译 Sass/SCSS。
3. 文件处理：
   • file-loader：处理文件并输出 URL。
   • url-loader：将小文件转为 Base64，大文件走 file-loader。
4. 图片优化：
   • image-webpack-loader：优化图片体积。
5. 模板引擎：
   • html-loader：处理 HTML 中的资源引用。
6. 其他：
   • ts-loader：处理 TypeScript 文件。
   • vue-loader：解析 Vue 单文件组件。

---

4. Webpack 和 Rollup、Parcel 构建工具有什么区别?

特性	Webpack	Rollup	Parcel
定位	通用模块打包器	专注于 JS 库/框架	零配置应用程序打包工具
配置	灵活，但需要手动配置	配置较少，简单易用	零配置
Tree Shaking	支持，但依赖配置	默认支持，效果更好	支持，但功能较弱
性能	插件丰富但较慢	适合打包小型库，体积更小	快速，内置多线程
适用场景	前端应用程序开发	构建 JS 库或框架	快速开发原型或简单项目

---

5. 如何使用 webpack-dev-server 监控文件编译?

1. 安装：

   npm install webpack-dev-server --save-dev
   

2. 配置：
   在 webpack.config.js 中添加：

   devServer: {contentBase: './dist',port: 8080,hot: true, // 开启热更新watchContentBase: true, // 监听静态文件变化
   }
   

3. 启动服务：

   npx webpack serve
   

---

6. 常用的前端性能分析工具?

1. 浏览器工具：
   • Chrome DevTools（Performance、Lighthouse、Coverage）。
2. 线上服务：
   • Google PageSpeed Insights。
   • WebPageTest。
3. 性能监控平台：
   • Sentry。
   • New Relic。
4. 性能测试工具：
   • Lighthouse CLI。
   • Puppeteer。

---

7. 前端项目中如何配置 HTTP 缓存机制?

1. 强缓存：
   • 设置 Cache-Control 或 Expires 头。

   Cache-Control: max-age=31536000
   

2. 协商缓存：
   • 配置 ETag 和 Last-Modified。

   ETag: "5d8c72a5"
   Last-Modified: Tue, 15 Nov 2022 12:45:26 GMT
   

3. 版本化文件：
   • 使用 Webpack 的 contenthash 生成文件名。

---

8. 如何优化 Webpack 的打包速度?

1. 缓存：
   • 使用 cache：

     cache: { type: 'filesystem' }
     

2. 缩小范围：
   • 使用 include 限制 loader 处理范围。
   • 忽略不必要的文件：

     module.noParse: /jquery|lodash/
     

3. 并行构建：
   • 使用 thread-loader 或 HappyPack。
4. 减少输出：
   • 在开发模式下，禁用文件压缩：

     optimization: { minimize: false }
     

---

9. 有哪些前端网站性能优化的关键点?

1. 网络优化：
   • 使用 CDN 加速。
   • 启用 HTTP/2。
2. 资源优化：
   • 图片懒加载。
   • 使用代码拆分，按需加载。
   • 缓存策略。
3. 渲染优化：
   • 优化 CSS 和 JS。
   • 避免长时间运行的 JavaScript。

---

10. 前端项目中，如何优化首屏渲染时间?

1. 减少首屏内容：只加载首屏所需内容，其他内容按需加载。
2. SSR 和静态化：使用 Vue 的服务端渲染（SSR）或预渲染。
3. 资源优化：使用 gzip 压缩、CDN 和缓存。
4. 快速显示骨架屏：通过 CSS 或预渲染提供骨架屏。

---

11. 前端如何处理后端接口一次性返回的超大树形结构数据?

1. 按需加载：
   • 使用懒加载技术，只加载用户展开部分。
2. 分页加载：
   • 将数据按页分片，结合 scroll 事件加载更多。
3. 虚拟列表：
   • 使用如 vue-virtual-scroller 渲染视口内的数据。

---

12. 如何在页面内一次性渲染 10 万条数据，并保证页面不卡顿?

1. 虚拟滚动：
   • 使用库如 react-window 或 vue-virtual-scroller。

   <virtual-scroller :items="items" :page-size="30" />
   

2. 分批渲染：
   • 使用 requestAnimationFrame 分段更新：

     const chunkRender = (data, start = 0, chunkSize = 1000) => {if (start >= data.length) return;requestAnimationFrame(() => {renderChunk(data.slice(start, start + chunkSize));chunkRender(data, start + chunkSize, chunkSize);});
     };
     

---

13. 如何在浏览器中执行 100 万个任务，并保证页面不卡顿?

1. 任务分片：
   • 使用 setTimeout 或 requestIdleCallback：

     const tasks = Array(1e6).fill(0);
     function processChunk() {const chunk = tasks.splice(0, 1000); // 每次处理 1000 个任务chunk.forEach(task => { /* 执行任务 */ });if (tasks.length) {setTimeout(processChunk, 0); // 下一帧继续}
     }
     processChunk();
     

2. Web Workers：
   • 将计算密集型任务移到 Worker 中执行。

14. 在网页中有大量图片时，如何优化图像加载以提高页面加载速度?

1. 延迟加载：
   • 使用 IntersectionObserver 实现懒加载。
2. 使用合适的图片格式：
   • 使用 WebP 等高压缩比格式。
3. 响应式图片：
   • 使用 <picture> 标签根据屏幕分辨率加载不同大小的图片。
4. 图片压缩：
   • 使用工具（如 ImageMagick 或 TinyPNG）减小图片体积。
5. 使用 CDN：
   • 减少图片的传输时间和延迟。

   如何在前端实现一个实时自动补全搜索框?

在前端实现一个实时自动补全搜索框通常涉及以下几个步骤：

1. 用户输入监听：使用JavaScript监听用户在搜索框中的输入事件。
2. 请求后端数据：根据用户输入的内容，向后端发送请求，获取相关的自动补全建议。
3. 展示建议：将后端返回的建议以列表形式展示给用户，通常是一个下拉列表。
4. 用户选择：当用户从下拉列表中选择某个建议时，将该建议填充到搜索框中或执行其他相关操作。

如何在前端实现国际化，并根据用户设置自动切换语言?

在前端实现国际化并根据用户设置自动切换语言，可以使用i18n（国际化）相关的库或工具，如i18n-webpack-plugin（专为Webpack设计的国际化插件）。实现步骤通常包括：

1. 准备语言文件：为每种语言准备相应的语言文件，包含所有需要国际化的字符串和对应的翻译。
2. 配置国际化插件：在Webpack项目中配置i18n-webpack-plugin或其他国际化插件，将语言文件嵌入到生成的bundle中。
3. 检测用户语言设置：通过浏览器的语言设置或用户手动选择的语言，确定当前用户的语言偏好。
4. 切换语言：根据用户的语言偏好，从语言文件中获取对应的翻译，并更新页面上的文本内容。

常见的登录鉴权方式有哪些?各自的优缺点是?

常见的登录鉴权方式包括：

1. Session-Cookie：

   • 优点：简单、易于实现。
   • 缺点：依赖于服务器存储Session信息，存在跨域问题，且安全性相对较弱（如易受到XSS攻击）。

2. Token-Based Authentication（如JWT）：

   • 优点：无状态、可扩展性好、易于跨域。
   • 缺点：Token过期处理较复杂，且Token通常存储在客户端，存在被窃取的风险。

3. OAuth：

   • 优点：支持第三方授权，用户无需在多个应用间重复登录。
   • 缺点：实现复杂，涉及多个参与方（客户端、资源服务器、授权服务器等）。

4. OpenID Connect：

   • 优点：基于OAuth的扩展，提供了用户身份信息的标准格式。
   • 缺点：实现相对复杂，需要额外的配置和集成工作。

前端开发中的 Live-Reload 自动刷新与 HMR 热模块替换有什么区别?

前端开发中的Live-Reload自动刷新与HMR（Hot Module Replacement）热模块替换的区别如下：

1. Live-Reload：

   • 原理：当代码发生变化时，整个页面会自动刷新以显示最新的内容。
   • 优点：实现简单，易于理解和使用。
   • 缺点：页面刷新会导致当前状态丢失，用户体验较差。

2. HMR：

   • 原理：Webpack在构建时会插入HMR运行时代码，通过WebSocket监听文件的变化。当检测到代码文件修改并保存后，Webpack会重新打包这些变化的模块，并发送到浏览器端进行替换，无需刷新整个页面。
   • 优点：保持应用状态不丢失，用户体验更好。可以只更新变化的模块，提高开发效率。
   • 缺点：实现相对复杂，需要Webpack等构建工具的支持。

如何使用 Webpack 处理内联 CSS?

使用Webpack处理内联CSS可以通过以下步骤实现：

1. 安装相关Loader：如raw-loader，用于将CSS文件作为字符串内联到JavaScript代码中。
2. 配置Webpack：在webpack.config.js中配置raw-loader来处理CSS文件。
3. 在JavaScript中引入CSS：使用require或import语句将CSS文件作为字符串引入，并内联到HTML或组件中。

例如，可以在HTML模板文件中使用${require("raw-loader!./style.css").default}来内联CSS。

如何使用 Webpack 解决开发环境中的跨域问题?

使用Webpack解决开发环境中的跨域问题可以通过配置Webpack的devServer.proxy选项来实现。具体步骤如下：

1. 配置Webpack的devServer：在webpack.config.js中配置devServer对象。
2. 设置proxy：在devServer对象中添加proxy选项，指定需要代理的接口和目标服务器地址。

例如：

devServer: {proxy: {'/api': {target: 'http://localhost:3000', // 目标服务器地址changeOrigin: true, // 是否允许代理pathRewrite: { '^/api': '' } // 重写接口名}}
}

这样，当访问/api开头的接口时，Webpack会将请求代理到http://localhost:3000上，从而解决跨域问题。

前端开发中如何优化网络请求和资源加载?具体怎么实现?

前端开发中优化网络请求和资源加载的方法包括：

1. 合并与压缩资源：使用Webpack等工具将多个JavaScript、CSS文件合并成一个文件，并进行压缩以减少文件大小。
2. 使用CDN：将常用的第三方库或静态资源通过CDN进行分发，减轻服务器的负载并提高加载速度。
3. 缓存策略：利用浏览器缓存机制，将不经常变化的资源缓存到本地，减少重复请求。
4. 懒加载与按需加载：对于图片、视频等非关键资源，采用懒加载方式；对于大型JavaScript库或组件，采用按需加载方式以减少初始加载时间。
5. 减少HTTP请求：通过合并CSS、JavaScript文件、使用雪碧图等方式减少HTTP请求的数量。
6. 使用HTTP/2：HTTP/2支持多路复用和服务器推送等特性，可以显著提高网络请求的效率。

如何使用 Webpack 优化产出代码?

使用Webpack优化产出代码的方法包括：

1. 代码分割：使用Webpack的代码分割功能将代码拆分成多个小块，按需加载以减少初始加载时间。
2. 代码压缩：使用Terser等压缩工具对JavaScript代码进行压缩以减少文件大小。
3. Tree Shaking：移除未使用的代码以减少最终包的体积。Webpack 5引入了摇树优化功能，可以自动移除未使用的代码。
4. 持久化缓存：Webpack 5引入了持久化缓存功能，可以显著提高重复构建的效率。
5. 优化Loader配置：合理配置Loader以避免不必要的转换和处理，提高构建速度。
6. 使用DllPlugin：将常用库预先编译并打包成DLL文件，然后在主项目中引用这些DLL文件以减少重复编译的时间。

Webpack 中，常见的图片处理加载器有哪些?

Webpack中常见的图片处理加载器包括：

1. file-loader：将图片文件输出到输出目录，并返回文件的URL。
2. url-loader：类似于file-loader，但可以将较小的文件转换为Base64编码的URL并内联到代码中。通过配置limit选项可以指定文件大小阈值。
3. image-webpack-loader：用于压缩图片文件以减小最终打包文件的大小。通常与其他Loader（如url-loader或file-loader）结合使用。

如何使用 Webpack 和 Localstorage 实现静态资源的离线缓存?

使用Webpack和LocalStorage实现静态资源的离线缓存可以通过以下步骤实现：

1. 打包资源：使用Webpack将静态资源（如JavaScript、CSS、图片等）打包成一个或多个文件。
2. 缓存资源：在应用程序加载时，检查LocalStorage中是否已缓存了这些资源。如果已缓存，则直接从LocalStorage中加载；否则，从网络加载并将资源缓存到LocalStorage中。
3. 更新缓存：当资源发生更新时，需要更新LocalStorage中的缓存。可以通过版本号或哈希值来判断资源是否已更新。

需要注意的是，LocalStorage的存储空间有限（通常为5MB左右），因此只适合存储较小的静态资源。对于较大的资源或需要频繁更新的资源，建议考虑其他缓存策略（如Service Workers）。

什么是 Webpack?它有什么作用?

Webpack是一个模块打包工具，主要用于将前端项目中的各种资源（如JavaScript、CSS、图片等）打包在一起，实现自动化构建。它的作用包括：

1. 模块打包：将多个模块（如JavaScript文件、CSS文件、图片等）打包成一个或多个文件，方便在浏览器中使用。
2. 资源转换：支持通过加载器（loaders）对不同类型的资源进行转换，例如将ES6+代码转换为ES5代码，或将SCSS/LESS文件转换为CSS文件。
3. 代码优化：提供了多种优化功能，如代码压缩、分割代码、生成source maps等，以提高代码的加载速度和调试效率。
4. 自动化构建：可以自动化处理项目的构建流程，包括编译、打包、压缩、优化等，大大提高了开发效率。
5. 插件系统：提供了丰富的插件系统，开发者可以通过插件扩展Webpack的功能，满足各种复杂的构建需求。

Webpack是一个功能强大的前端构建工具，能够帮助开发者有效地管理和打包现代JavaScript应用程序，提高开发效率和项目性能。

1. 如何使用 Webpack 进行前端性能优化?

1. Tree Shaking：

   • 移除未使用的代码，确保使用 ES Modules。

   optimization: {usedExports: true,
   }
   

2. 代码分割：

   • 使用 SplitChunksPlugin 分离第三方库和业务代码。

   optimization: {splitChunks: {chunks: 'all',},
   }
   

3. 动态加载：

   • 使用 import() 动态加载组件：

   const component = () => import('./MyComponent.vue');
   

4. 压缩代码：

   • 使用 TerserPlugin 压缩 JS。
   • 使用 css-minimizer-webpack-plugin 压缩 CSS。

5. 静态资源优化：

   • 压缩图片：使用 image-webpack-loader。
   • 小资源转 Base64：通过 url-loader。

6. 缓存优化：

   • 使用 contenthash 生成文件名：

   output: {filename: '[name].[contenthash].js',
   }
   

7. 开发环境加速：

   • 使用 webpack-dev-server 和热模块替换（HMR）。

---

2. 如何在 Webpack 中实现条件组件的按需打包?

1. 动态导入：

   • 使用 ES 模块的 import()：

   const loadComponent = (condition) => {if (condition) {return import('./ComponentA.vue');} else {return import('./ComponentB.vue');}
   };
   

2. 环境变量控制：

   • 使用 DefinePlugin 注入环境变量：

   new webpack.DefinePlugin({IS_PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'production'),
   });
   

   • 在代码中条件加载：

   if (IS_PRODUCTION) {import('./ProdComponent.vue');
   } else {import('./DevComponent.vue');
   }
   

3. 路由懒加载：

   • 使用 Vue Router 按需加载组件：

   const routes = [{path: '/home',component: () => import('./Home.vue'),},
   ];
   

---

3. 前端如何使用 Webpack 进行高效分包优化?

1. Vendor 分包：

   • 把第三方库分离到独立的 chunk：

   optimization: {splitChunks: {cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',},},},
   }
   

2. 动态导入：

   • 按需加载模块，避免加载全部内容。

3. 共享依赖：

   • 使用 externals 排除公共库，直接通过 CDN 加载。

   externals: {vue: 'Vue',
   },
   

4. 分析包结构：

   • 使用 webpack-bundle-analyzer 检查包内容：

   npx webpack-bundle-analyzer stats.json
   

---

4. 前端项目中资源的缓存配置策略有哪些?

1. 强缓存：

   • 使用 Cache-Control 和 Expires。

   Cache-Control: max-age=31536000
   

2. 协商缓存：

   • 配置 ETag 和 Last-Modified：

   ETag: "xyz123"
   Last-Modified: Tue, 01 Dec 2023 12:00:00 GMT
   

3. 文件名哈希：

   • Webpack 中启用 contenthash：

   output: {filename: '[name].[contenthash].js',
   }
   

4. 资源分组：

   • 把需要频繁更新的资源与稳定资源分开，优化缓存命中率。

---

5. 如何优化 Webpack 打包后文件的体积?

1. Tree Shaking：

   • 清除未使用的代码：

   optimization: {usedExports: true,
   }
   

2. 按需加载：

   • 动态导入需要的模块。

3. 压缩资源：

   • 使用 TerserPlugin 压缩 JS。
   • 使用 css-minimizer-webpack-plugin 压缩 CSS。

4. 移除无用依赖：

   • 检查 node_modules 中是否存在冗余依赖。

5. 使用现代库：

   • 替换大型库（如 lodash）为更小的替代方案（如 lodash-es 或单个函数）。

---

6. 同一前端页面的 3 个组件请求同一个 API 并发送了 3 次请求，如何优化?

1. 使用状态管理：

   • 使用 Vuex/Pinia 缓存请求数据，避免重复请求。

2. 请求合并：

   • 使用共享的 Promise 缓存：

   let apiCache = null;
   function fetchData() {if (!apiCache) {apiCache = axios.get('/api/data');}return apiCache;
   }
   

3. 事件总线：

   • 通过全局事件总线广播数据到多个组件。

4. 服务端优化：

   • 在后端设计 API，将多次请求合并为一个批量请求。

---

7. 什么是 Webpack 的 bundle、chunk 和 module?分别有什么作用?

• Module：
  • 代码的最小单元，可以是 JS、CSS、图片等资源。
  • 作用：提供独立的功能或资源。
• Chunk：
  • 由多个模块组成的代码块，可以是同步或异步加载。
  • 作用：用于按需加载，优化性能。
• Bundle：
  • Webpack 打包输出的文件。
  • 作用：包含可供浏览器直接使用的代码。

---

8. Webpack 插件底层的实现原理是什么?

Webpack 插件基于 事件钩子 和 Tapable 实现。

1. Compiler 和 Compilation：
   • Compiler：代表 Webpack 的完整生命周期。
   • Compilation：代表一次打包过程。
2. Tapable：
   • Webpack 使用 Tapable 实现事件系统。
   • 插件通过 compiler.hooks 注册钩子。
3. 插件实现示例：

   class MyPlugin {apply(compiler) {compiler.hooks.emit.tap('MyPlugin', (compilation) => {console.log('生成资源时触发！');});}
   }
   module.exports = MyPlugin;
   

---

9. Core Web Vitals 是什么?它包括哪些指标?

Core Web Vitals 是 Google 提出的用户体验关键性能指标，包括：

1. LCP（Largest Contentful Paint）：

   • 测量页面主要内容加载完成的时间，目标 ≤ 2.5 秒。

2. FID（First Input Delay）：

   • 测量首次用户交互到响应的延迟时间，目标 ≤ 100 毫秒。

3. CLS（Cumulative Layout Shift）：

   • 测量页面布局的视觉稳定性，目标 ≤ 0.1。

重要性：

• 提升用户体验。
• 对 SEO 有直接影响。