前端面试热门题（二）[html\css\js\node\vue)

news2024/12/26 21:29:18

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 构建工具有什么区别?

特性WebpackRollupParcel
定位通用模块打包器专注于 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 有直接影响。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2252809.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

实现效果如图 抽成组件navbar.vue&#xff0c;放入分包 <template><view class"header-nav-box":style"{height:Props.imgShow?:statusBarHeightpx,background:Props.imgShow?:Props.bgColor||#ffffff;}"><!-- 是否使用图片背景 false…
阅读更多...
Android KEY的哪些事儿

Android KEY的哪些事儿

目录 一、APK应用签名 1、什么是APK应用签名&#xff1f; 1.1 目的和作用&#xff1f; 1.2 长什么样子&#xff1f; 2、APK应用签名使用流程 步骤一&#xff1a;如何生成APK应用签名文件&#xff1f; 步骤二&#xff1a;如何集成APK应用签名文件&#xff1f; 步骤三&am…
阅读更多...
Docker中安装GeoServer

Docker中安装GeoServer

一、准备工作 #创建数据持久化目录 mkdir -p /usr/local/application/geoserver/data_dir#授权 chmod 777 -R /usr/local/application/ 这一步是为了在容器外部管理GeoServer的数据&#xff0c;使得数据能够持久化存储。 二、拉取GeoServer镜像 从Docker Hub拉取GeoServer的…
阅读更多...
Create Stunning Word Clouds with Ease!

Create Stunning Word Clouds with Ease!

Looking to craft breathtaking word clouds? WordCloudStudio is your go-to solution! Whether you’re a marketer, educator, designer, or simply someone who loves visualizing data, this app has everything you need. Download now: https://apps.apple.com/app/wor…
阅读更多...
【JavaEE初阶】落霞与孤鹜齐飞，秋水共长天一色 - (重点)线程

【JavaEE初阶】落霞与孤鹜齐飞，秋水共长天一色 - (重点)线程

本篇博客给大家带来的是线程的知识点, 由于时间有限, 分三天来写, 本篇为线程第二篇. &#x1f40e;文章专栏: JavaEE初阶 &#x1f680;若有问题 评论区见 ❤欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅…
阅读更多...
java_判断语句——acwing

java_判断语句——acwing

题目一&#xff1a;倍数 665. 倍数 - AcWing题库 代码 import java.util.Scanner;public class Main{public static void main(String[] args) {Scanner sc new Scanner(System.in);int a sc.nextInt(), b sc.nextInt();if(a%b0 || b%a0) System.out.printf("Sao Mu…
阅读更多...
深度解析棋牌游戏开发：从搭建到运营的全流程实战分享

深度解析棋牌游戏开发：从搭建到运营的全流程实战分享

作为从事游戏开发十五年的技术老兵&#xff0c;经历了国内游戏市场从端游到手游的全流程变迁。市面上大多数棋牌产品&#xff0c;无论是传统房卡模式还是创新竞技玩法&#xff0c;自己曾经都参与设计和研发过。今天&#xff0c;我将结合多年的实战经验&#xff0c;分享棋牌游戏…
阅读更多...
mfc110u.dll是什么意思，mfc110u.dll丢失解决方法大全详解

mfc110u.dll是什么意思，mfc110u.dll丢失解决方法大全详解

mfc110u.dll是Microsoft Foundation Classes (MFC)库的一个特定版本&#xff08;版本11.0&#xff09;的Unicode动态链接库文件。MFC是Microsoft为C开发者设计的一个应用程序框架&#xff0c;主要用于简化Windows应用程序的开发工作。这个框架封装了很多Windows API函数&#x…
阅读更多...
【C++跬步积累】—— 继承

【C++跬步积累】—— 继承

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;C跬步积累 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日一题 &#x1f7e1; Linux跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0…
阅读更多...
爬虫专栏第二篇：Requests 库实战：从基础 GET 到 POST 登录全攻略

爬虫专栏第二篇：Requests 库实战：从基础 GET 到 POST 登录全攻略

简介&#xff1a;本文聚焦 Requests 库的强大功能与应用实战。首先介绍其安装步骤及版本选择要点&#xff0c;随后深入讲解 GET 请求&#xff0c;以百度页面为例&#xff0c;展示如何发起基本 GET 请求、巧妙添加 headers 与参数以精准搜索&#xff0c;以及正确设置 encoding 避…
阅读更多...
计算机网络：IP协议详细讲解

计算机网络：IP协议详细讲解

目录 前言 一、IP网段划分 二、IP报头 三、解决IP地址不足-->NAT技术 前言 在之前&#xff0c;我们学习了传输层中的TCP和UDP&#xff0c;重点是TCP协议&#xff0c;他帮我们解决具体到主机的哪个应用&#xff08;端口&#xff09;、传输的可靠&#xff08;序列号、校验和…
阅读更多...
Proteus8.17下载安装教程

Proteus8.17下载安装教程

Proteus是一款嵌入式系统仿真开发软件&#xff0c;实现了从原理图设计、单片机编程、系统仿真到PCB设计&#xff0c;真正实现了从概念到产品的完整设计&#xff0c;其处理器模型支持8051、HC11、PIC10/12/16/18/24/30/DsPIC33、AVR、ARM、8086和MSP430等&#xff0c;能够帮助用…
阅读更多...
C++设计模式（装饰模式）

C++设计模式（装饰模式）

一、介绍 1.动机 在某些情况下我们可能会“过度地使用继承来扩展对象的功能”&#xff0c;由于继承为类型引入的静态特质&#xff0c;使得这种扩展方式缺乏灵活性&#xff1b;并且随着子类的增多&#xff08;扩展功能的增多&#xff09;&#xff0c;各种子类的组合&#xff0…
阅读更多...
【VMware】Ubuntu 虚拟机硬盘扩容教程（Ubuntu 22.04）

【VMware】Ubuntu 虚拟机硬盘扩容教程（Ubuntu 22.04）

引言 想装个 Anaconda&#xff0c;发现 Ubuntu 硬盘空间不足。 步骤 虚拟机关机 编辑虚拟机设置 扩展硬盘容量 虚拟机开机 安装 gparted sudo apt install gparted启动 gparted sudo gparted右键sda3&#xff0c;调整分区大小 新大小拉满 应用全部操作 调整完成
阅读更多...
03-12、SpringCloud Alibaba第十二章，升级篇，服务注册与配置中心Nacos

03-12、SpringCloud Alibaba第十二章，升级篇，服务注册与配置中心Nacos

SpringCloud Alibaba第十二章&#xff0c;升级篇&#xff0c;服务注册与配置中心Nacos 一、为什么SpringCloud Alibaba 1、为什么 有了spring cloud这个微服务的框架&#xff0c;为什么又要使用spring cloud alibaba这个框架了&#xff1f;最重要的原因在于spring cloud中的…
阅读更多...
java网络通信（三）：TCP通信、实现客户端-服务端消息通信

java网络通信（三）：TCP通信、实现客户端-服务端消息通信

目录 1、什么是 TCP协议&#xff1f; 2、代码实现TCP协议的一发一收 2.1、客户端 2.2、服务端 2.3 结果演示 3、代码实现TCP协议的多发多收 3.1 客户端 3.2 服务端 3.3 结果演示 简介&#xff1a;本文章主要是演示如何用java代码以及TCP协议实现网络通信&#xff0c;实…
阅读更多...
剖析go协程池实现原理

剖析go协程池实现原理

go协程池实现 在go语言编程中有一种池肯定避免不了&#xff0c;那就是-协程池&#xff0c;无论你是日常工作还是面试中面试官都无法避免协程池&#xff0c;掌握协程池你也就算是入门go的并发编程了&#xff0c;打一波广告后面会有专门的文章来介绍如何在go中进行并发编程。 协…
阅读更多...
华为关键词覆盖应用市场ASO优化覆盖技巧

华为关键词覆盖应用市场ASO优化覆盖技巧

在我国的消费者群体当中&#xff0c;华为的品牌形象较高&#xff0c;且产品质量过硬&#xff0c;因此用户基数也大。与此同时&#xff0c;随着影响力的增大&#xff0c;华为不断向外扩张&#xff0c;也逐渐成为了海外市场的香饽饽。作为开发者和运营者&#xff0c;我们要认识到…
阅读更多...
万能门店小程序管理系统 onepic_uploade 任意文件上传漏洞复现

万能门店小程序管理系统 onepic_uploade 任意文件上传漏洞复现

0x01 产品简介 万能门店小程序管理系统是一款功能强大的工具，旨在为各行业商家提供线上线下融合的全方位解决方案。是一个集成了会员管理和会员营销两大核心功能的综合性平台。它支持多行业使用，通过后台一键切换版本，满足不同行业商家的个性化需求。该系统采用轻量后台，搭…
阅读更多...
QT：信号和槽01

QT：信号和槽01

QT中什么是信号和槽 概念解释 在 Qt 中&#xff0c;信号&#xff08;Signals&#xff09;和槽&#xff08;Slots&#xff09;是一种用于对象间通信的机制。信号是对象发出的事件通知&#xff0c;而槽是接收并处理这些通知的函数。 例如&#xff0c;当用户点击一个按钮时&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023