前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读

在这里插入图片描述
按照加载阶段、渲染阶段和交互阶段三个维度进行系统性阐述：

在现代 Web 开发中，性能不再是锦上添花，而是决定用户体验与业务成败的关键因素。为了全面监控与优化网页性能，我们可以将性能指标划分为加载阶段、渲染阶段、和交互阶段三个维度。本文将详尽解析这些指标的定义、意义、测量方式及其优化手段，帮助你建立一套完整的性能优化思维体系。

一、加载阶段（网络层）

计网（一）计网（二）

加载阶段关注的是从用户发起请求到页面开始显示之间的网络传输与资源处理效率，主要包括以下指标：

1. TTFB（Time to First Byte）首字节时间

  • 定义：用户请求网页后，从浏览器发送请求到接收到服务器返回的第一个字节所花的时间。

  • 意义：反映服务器响应速度与网络延迟。

  • 优化手段：

    • 使用 CDN 缓存资源，靠近用户加速传输。
    • 减少 HTTP 重定向次数。
    • 后端性能优化（数据库查询效率、代码逻辑优化等）。
    • 启用压缩（如 Gzip 或 Brotli）减少响应体大小。

2. FP（First Paint）首次绘制

浏览器原理
在这里插入图片描述

  • 定义：浏览器首次将任何可见内容绘制到屏幕上的时间（如背景色、边框）。

  • 意义：标志着页面开始“有动静”，提升用户感知速度。

  • 优化手段：

    • 优化关键路径资源，如减少阻塞渲染的 CSS 和 JS。
    • 减少 DOM 树复杂度，加快解析速度。
    • 利用懒加载减少首屏资源压力。

3. FCP（First Contentful Paint）首次内容绘制

  • 定义：页面渲染出第一个“内容”元素（如文本、图片、SVG）所需的时间。

  • 意义：比 FP 更真实地反映页面初始内容是否快速可见。

  • 优化手段：

    • 确保首屏资源优先加载。
    • 减少 render-blocking 脚本。
    • 使用预加载（<link rel="preload">）加快关键资源获取。

二、渲染阶段（视觉层）

渲染阶段衡量页面结构与布局在视觉上的完整性和稳定性，是决定页面可视体验好坏的关键：

1. LCP（Largest Contentful Paint）最大内容绘制

  • 定义：页面中最大可见内容元素（如大图、主标题）渲染完成的时间。

  • 意义：反映用户看到主内容所需的时间，是衡量加载体验的核心指标之一。

  • 优化手段：

    • 优先加载最大内容元素资源。
    • 压缩图片并使用现代格式（WebP、AVIF）。
    • 推迟第三方脚本加载，避免阻塞渲染。
    • 使用 font-display: swap 避免 FOIT（字体不可见现象）。

2. CLS（Cumulative Layout Shift）累计布局偏移

  • 定义：页面在加载过程中布局发生变化的总偏移量。

  • 意义：反映页面视觉稳定性，避免“跳动式”体验。

  • 优化手段：

    • 为所有图片和媒体指定明确的尺寸（width / height 或 aspect-ratio）。
    • 避免延迟注入 DOM 内容，尤其是广告、异步内容等。
    • 使用 CSS transform 而不是 top/left 改变位置。

三、交互阶段（用户层）

交互阶段关注的是用户在页面加载完成后与其交互时的响应能力，是判断页面是否“流畅”、“好用”的关键：

1. TBT（Total Blocking Time）总阻塞时间

  • 定义：FCP 和 TTI（Time to Interactive）之间，主线程被长任务（>50ms）阻塞的总时间。

  • 意义：反映页面在加载后到可交互之间的响应延迟。

  • 优化手段：

    • 拆分长任务：将耗时 JS 拆成多个小任务。
    • 利用 Web Worker 处理计算密集型任务。
    • 减少不必要的第三方脚本。
    • 使用异步或延迟加载（async / defer）脚本。

2. INP（Interaction to Next Paint）交互到下次绘制

  • 定义：用户与页面交互（点击、输入等）后，到页面有响应绘制的时间（新版取代 FID）。

  • 意义：衡量页面在真实用户交互下的响应能力。

  • 优化手段：

    • 保持主线程空闲：确保交互后能尽快处理事件。
    • 减少事件处理逻辑中的阻塞（如同步 DOM 操作）。
    • 避免动画引起帧率降低。
    • 通过 requestIdleCallback 或 requestAnimationFrame 安排非关键任务。

四、性能指标总结图谱

阶段指标全称关注点优化重点
加载阶段TTFBTime to First Byte网络响应后端性能、CDN、压缩
FPFirst Paint初始绘制渲染优化、关键资源、懒加载
FCPFirst Contentful Paint内容可见性预加载、压缩资源、减 JS 阻塞
渲染阶段LCPLargest Contentful Paint主内容呈现图片优化、字体策略、第三方脚本优化
CLSCumulative Layout Shift页面稳定性固定尺寸、延迟加载控制、动画优化
交互阶段TBTTotal Blocking Time主线程阻塞拆分任务、Web Worker、async 脚本
INPInteraction to Next Paint交互响应空闲时间调度、事件处理优化

五、实践建议

  1. 使用工具进行性能分析：

    • Chrome DevTools（Performance 面板）
    • Lighthouse（生成详细性能报告）
    • Web Vitals 扩展
    • Real User Monitoring（如 Google Analytics、Sentry）

  2. 性能优化是一个持续过程：

    • 初期重点关注 LCP、CLS、INP 三个 Core Web Vitals。
    • 建立 CI/CD 中的性能预算，防止上线新代码带来性能回退。
    • 在真实用户环境中监控指标，避免仅依赖实验室数据。

  3. 关注移动端性能：

    • 移动网络与设备性能差异显著，需优先优化移动端体验。
    • 使用响应式图片、渐进增强策略应对不同环境。

结语

网页性能优化是一场用户体验的修行之路。通过系统性地理解并掌握加载、渲染、交互三个阶段的关键指标，不仅能够精准诊断瓶颈问题，更能在不断迭代中稳步提升整体体验。希望本文能为你在构建高性能网页的旅程中提供实用指南与灵感。

Webpack + Vue 项目的性能分析

在使用 Webpack 构建 Vue 项目时，合理的配置和优化策略可以显著提升页面的加载速度和用户体验。以下是针对 Webpack + Vue 项目的性能分析与优化建议：
Webpack优化前端性能

一、性能指标与优化目标

在 Web 性能优化中，常关注以下关键指标：

  • TTFB（Time to First Byte）：首字节到达时间，反映服务器响应速度。
  • FCP（First Contentful Paint）：首次内容绘制时间，影响用户对页面加载速度的感知。
  • LCP（Largest Contentful Paint）：最大内容绘制时间，衡量主要内容的加载速度。
  • CLS（Cumulative Layout Shift）：累计布局偏移，评估页面视觉稳定性。
  • INP（Interaction to Next Paint）：交互到下一次绘制的时间，衡量页面的交互响应能力。

优化这些指标的目标是提升页面加载速度、提高用户体验，并减少资源消耗。

二、Webpack 配置优化策略

1. 使用 externals 提取第三方库

将如 Vue、Vue Router、Axios 等第三方库通过 CDN 引入，避免打包进主文件，减小 bundle 体积。(哔哔哔)

配置示例（vue.config.js）：

module.exports = {configureWebpack: {externals: {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios'}}
};

HTML 引入示例：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>

此策略可显著减小主包体积，提升加载速度。(Vue.js)

2. 使用 SplitChunksPlugin 拆分代码

通过 Webpack 的 SplitChunksPlugin 将公共模块和第三方库拆分，优化缓存利用率。(CSDN博客)

配置示例：

module.exports = {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'},common: {name: 'common',minChunks: 2,chunks: 'all',priority: 10}}}}
};

此配置将第三方库和公共模块分别打包，提升缓存命中率，减少重复加载。

3. 使用 webpack-bundle-analyzer 分析包体积

利用 webpack-bundle-analyzer 插件可视化分析打包结果，识别体积较大的模块。(CSDN博客)

安装：

npm install --save-dev webpack-bundle-analyzer

配置（vue.config.js）：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {configureWebpack: {plugins: [new BundleAnalyzerPlugin()]}
};

运行打包命令后，将自动打开分析报告，帮助定位优化点。

4. 使用 image-webpack-loader 压缩图片

通过 image-webpack-loader 对图片进行压缩，减小资源体积，提升加载速度。(博客园)

安装：

npm install --save-dev image-webpack-loader

配置（webpack.config.js）：

module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/i,use: [{loader: 'url-loader',options: {limit: 8192,name: 'img/[name].[hash:7].[ext]'}},{loader: 'image-webpack-loader',options: {mozjpeg: { progressive: true },optipng: { enabled: true },pngquant: { quality: [0.65, 0.90], speed: 4 },gifsicle: { interlaced: false }}}]}]
}

此配置可自动压缩图片资源，减小加载体积。

5. 使用 babel-plugin-transform-runtime 减少冗余代码

通过 babel-plugin-transform-runtime 插件避免 Babel 转译过程中生成的重复辅助函数，减小代码体积。(博客园)

安装：

npm install --save-dev babel-plugin-transform-runtime
npm install --save @babel/runtime

配置（.babelrc）：

{"plugins": ["@babel/plugin-transform-runtime"]
}

此配置可减少重复代码，优化包体积。

三、构建后效果分析

通过上述优化措施，构建后的 Vue 项目将具有以下优势：

  • 减小主包体积：通过 externals 和代码拆分，主包体积显著减小，提升加载速度。
  • 优化缓存利用：公共模块和第三方库拆分后，浏览器可更有效地缓存资源，减少重复加载。
  • 提升构建速度：并行压缩和避免冗余代码减少了构建时间，提高开发效率。
  • 增强用户体验：页面加载更快，交互更流畅，提升用户满意度。(Vue.js, Hangge)

例如，通过 externals 提取 Vue、Vue Router 和 Axios 后，主包体积可减少数百 KB，首次加载时间明显缩短。(哔哔哔)

通过合理配置 Webpack 和优化策略，可以显著提升 Vue 项目的性能。如果您需要进一步的帮助，如配置示例或优化建议，欢迎继续提问。

城市灾害应急管理系统配置

压缩（压缩比率小于0.8）

在面试中，向面试官介绍 CompressionWebpackPlugin 的配置及其在 Webpack 构建 Vue 项目中的作用，体现了您对前端性能优化的深入理解。以下是对该插件配置的详细解读及其影响：

CompressionWebpackPlugin 配置详解
new CompressionPlugin({cache: false,                   // 不启用文件缓存test: /\.(js|css|html)?$/i,     // 匹配要压缩的文件类型filename: '[path].gz[query]',   // 压缩后的文件名格式algorithm: 'gzip',              // 使用 gzip 压缩算法minRatio: 0.8                   // 压缩率小于 0.8 才会压缩
})
配置项说明

  • cache: false：禁用文件缓存，确保每次构建都重新压缩资源，适用于频繁变更的项目。

  • test: /\.(js|css|html)?$/i：指定匹配的文件类型，包括 JavaScript、CSS 和 HTML 文件，确保这些资源被压缩。

  • filename: '[path].gz[query]'：定义压缩后文件的命名规则，保持原始路径和查询参数，添加 .gz 后缀，便于服务器识别和处理。

  • algorithm: 'gzip'：使用 gzip 算法进行压缩，这是目前广泛支持的压缩格式，兼容性良好。

  • minRatio: 0.8：仅当压缩后的文件大小与原始文件大小的比率小于 0.8 时才进行压缩，避免对压缩效果不明显的文件进行无效操作。

构建后的影响

  1. 生成 .gz 压缩文件：构建过程中，会为匹配的资源生成对应的 .gz 文件，例如 app.js 会生成 app.js.gz。

  2. 减小资源体积：压缩后的文件体积显著减小，通常可减少 70% 以上，提升页面加载速度。(jecyu.github.io)

  3. 提升首屏加载性能：减小的资源体积减少了网络传输时间，尤其在网络状况不佳时效果更为明显。

  4. 服务器配置要求：需要服务器（如 Nginx）配置支持 gzip 压缩，优先提供 .gz 文件给支持的客户端。

示例：Nginx 配置支持 gzip
gzip on;
gzip_static on;
gzip_types text/plain application/javascript text/css text/html;

上述配置启用 Nginx 的 gzip 压缩功能，并指定压缩的 MIME 类型，确保客户端请求时能获取到压缩后的资源。
在这里插入图片描述

总结

通过在 Webpack 构建过程中使用 CompressionWebpackPlugin 进行 gzip 压缩，可以显著减小资源体积，提升页面加载性能。在面试中，展示您对该插件配置的理解，以及如何与服务器配置协同工作，体现了您在前端性能优化方面的专业能力。(CSDN博客)

分割

在面试中，向面试官清晰地解释 Webpack 的代码分割（Code Splitting）配置，尤其是 optimization.splitChunks 的使用，能够展示您对前端性能优化的深入理解。以下是对您提供的配置的详细解读：

📌 代码分割的目的

Webpack 的代码分割主要有以下几个目的：

  1. 提升加载性能：将代码拆分为多个小模块，按需加载，减少初始加载时间。
  2. 优化缓存策略：将不常变动的库（如第三方依赖）与业务代码分离，利用浏览器缓存机制，减少重复加载。
  3. 降低资源冗余：避免多个入口文件加载相同的模块，减少重复代码。
⚙️ 配置详解
optimization: {splitChunks: {chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial'},elementUI: {name: 'chunk-elementUI',priority: 20,test: /[\\/]node_modules[\\/]_?element-ui(.*)/},commons: {name: 'chunk-commons',test: resolve('src/components'),minChunks: 3,priority: 5,reuseExistingChunk: true}}}
}
1. chunks: 'all'

此配置表示对所有类型的代码（同步和异步）进行分割。相比于默认的 async，它能更全面地优化代码结构，提升加载效率。

2. cacheGroups

cacheGroups 用于定义如何将模块分组到不同的 chunk 中。每个分组都有自己的规则和优先级。(Rspack)

a. libs 分组
  • name: 'chunk-libs'：生成的 chunk 名称为 chunk-libs。
  • test: /[\\/]node_modules[\\/]/：匹配所有在 node_modules 目录下的模块。
  • priority: 10：优先级为 10，确保在默认分组前处理。
  • chunks: 'initial'：仅处理初始加载的模块，避免将异步模块打包进来。

此配置将第三方库（如 Vue、Axios 等）打包到一个独立的 chunk 中，便于缓存和管理。

b. elementUI 分组
  • name: 'chunk-elementUI'：生成的 chunk 名称为 chunk-elementUI。
  • test: /[\\/]node_modules[\\/]_?element-ui(.*)/：匹配 element-ui 相关的模块，兼容不同的包管理方式（如 cnpm）。
  • priority: 20：优先级高于 libs，确保 element-ui 单独打包。

将 element-ui 单独打包，有助于更好地利用缓存，避免频繁更新导致的缓存失效。

c. commons 分组
  • name: 'chunk-commons'：生成的 chunk 名称为 chunk-commons。
  • test: resolve('src/components')：匹配 src/components 目录下的模块。
  • minChunks: 3：当一个模块被至少三个 chunk 引用时，才会被提取到 chunk-commons 中。
  • priority: 5：优先级为 5，低于 libs 和 elementUI。
  • reuseExistingChunk: true：如果当前 chunk 包含已被提取的模块，则复用已有的 chunk，避免重复打包。

此配置有助于提取项目中重复使用的组件，减少代码冗余。

🎯 面试官可能提出的问题及回答
Q1: 为什么要将 element-ui 单独打包？

A：element-ui 是一个体积较大的 UI 组件库，且更新频率较低。将其单独打包可以利用浏览器的缓存机制，减少用户重复下载，提高加载速度。此外，单独打包还便于在需要时进行按需加载，优化首屏加载性能。

Q2: minChunks: 3 的作用是什么？

A：minChunks: 3 表示当一个模块被至少三个 chunk 引用时，才会被提取到公共的 chunk-commons 中。这样可以避免将只被少数页面使用的模块提取出来，导致额外的 HTTP 请求，影响加载性能。

Q3: 如何设置 priority，它的作用是什么？

A：priority 用于设置各个 cacheGroups 的处理优先级。当一个模块符合多个分组的条件时，优先级高的分组会先处理。例如，elementUI 的优先级为 20，高于 libs 的 10，因此 element-ui 模块会被打包到 chunk-elementUI 中，而不是 chunk-libs。

Q4: reuseExistingChunk: true 有什么作用？

A：reuseExistingChunk: true 表示如果当前 chunk 包含的模块已经被提取到其他 chunk 中，则直接复用已有的 chunk，避免重复打包。这有助于减少最终生成的文件体积，提升加载效率。

✅ 总结

通过合理配置 Webpack 的 splitChunks，可以有效地优化项目的加载性能和缓存策略。在面试中，清晰地解释各个配置项的作用，以及它们如何协同工作，能够展示您对前端构建工具的深入理解和实际应用能力。

如需进一步了解 Webpack 的其他优化策略，欢迎继续提问。

要提升页面首屏加载时间，可以从懒加载、代码分割和缓存策略三方面入手，协同优化资源加载和渲染流程，从而显著改善用户体验。以下是具体的优化建议：

懒加载、代码分割、缓存、压缩和网络优化

要全面提升 Vue + Webpack 项目的首屏加载性能，可以从以下五个方面进行优化：懒加载、代码分割、缓存策略、资源压缩和网络优化。下面将逐一详解，并提供相应的配置示例。

1. 懒加载（Lazy Loading）

懒加载可以延迟加载非首屏必需的资源，减少初始加载体积。

Vue 组件懒加载

使用 Vue 的异步组件功能，结合 Webpack 的动态导入，实现组件的按需加载：(极客日志)

import { defineAsyncComponent } from 'vue';const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'));

在 Vue Router 中，也可以通过动态导入实现路由组件的懒加载：

const routes = [{path: '/about',component: () => import('./views/About.vue'),},
];
图片懒加载

对于图片资源，可以使用 v-lazy 指令（需引入相应插件）或原生的 loading="lazy" 属性实现懒加载：

<img v-lazy="imageSrc" alt="Lazy Loaded Image" />
<!-- 或 -->
<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image" />
2. 代码分割（Code Splitting）

代码分割可以将应用拆分为多个小块，实现按需加载，提升加载效率。

Webpack 配置示例

在 vue.config.js 中配置 splitChunks：(xiaocuo.wang)

module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,name: 'chunk-vendors',priority: -10,chunks: 'initial',},common: {name: 'chunk-common',minChunks: 2,priority: -20,chunks: 'initial',reuseExistingChunk: true,},},},},},
};

此配置将第三方库和公共模块分别打包，减少主包体积。(Oryoy)

3. 缓存策略（Caching Strategy）

合理的缓存策略可以减少重复加载，提高加载速度。

文件命名带 Hash

在 Webpack 的输出配置中，使用 [contenthash]：

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

这样可以在文件内容变化时生成新的文件名，确保浏览器加载最新资源。

使用 Service Worker

引入 Service Worker 实现离线缓存和资源预缓存，提升加载性能。

4. 资源压缩（Compression）

压缩资源可以减少文件体积，加快传输速度。

Gzip 压缩

使用 compression-webpack-plugin 插件进行 Gzip 压缩：(Oryoy)

const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = {configureWebpack: config => {if (process.env.NODE_ENV === 'production') {config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.(js|css|html)$/,threshold: 10240,minRatio: 0.8,}));}},
};
图片压缩

使用 image-webpack-loader 对图片进行压缩：(Oryoy)

module.exports = {chainWebpack: config => {config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({mozjpeg: { progressive: true, quality: 65 },optipng: { enabled: true },pngquant: { quality: [0.65, 0.90], speed: 4 },gifsicle: { interlaced: false },});},
};
5. 网络优化（Network Optimization）

优化网络请求可以进一步提升加载性能。

使用 CDN

将第三方库通过 CDN 引入，减少主包体积：(Oryoy)

module.exports = {configureWebpack: {externals: {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',},},
};

在 index.html 中引入 CDN 链接：(思否)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
启用 HTTP/2

在服务器配置中启用 HTTP/2，利用其多路复用特性，加快资源加载速度。(Oryoy)

通过以上优化策略的综合应用，可以显著提升 Vue + Webpack 项目的首屏加载性能，改善用户体验。

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

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

相关文章

MySQL——1、数据库基础

MySQL——1、数据库基础

数据库基础 1、安装MySQL2、什么是数据库3、数据库使用案例4、MySQL架构与SQL分类5、存储引擎 1、安装MySQL 1、更新软件包列表 sudo apt update2、查看MySQL安装包 apt list | grep mysql-server3、安装MySQL # 默认安装最新版 sudo apt install -y mysql-server4、启动My…
阅读更多...
ET MailBoxComponent类(实体) 分析

ET MailBoxComponent类(实体) 分析

MailBoxComponent 作用是&#xff0c;用来接收Actor消息&#xff0c;处理Actor消息。这个没有存储能&#xff0c;收到消息后立即就处理了。ParentInstanceId 是MailBox所在的实体InstanceIdMailBoxType MailBox类型MailBoxInvoker 分发消息的包装Add 方法&#xff0c;看名字是…
阅读更多...
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】

Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】

漏洞概述&#xff1a; Weblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi等脆弱组件。 漏洞形成原因&#xff1a; WebLogic Server 的 UDDI 组件&#xff08;uddiexplorer.war&#xff09;中的 SearchPublicR…
阅读更多...
js应用opencv

js应用opencv

思路&#xff1a; 第一步&#xff1a;直方图 第二步&#xff1a;获得直方图的波峰 第三步&#xff1a;波峰胜负10&#xff0c;高于或低于变红色 1.引用import cv from ‘techstark/opencv-js’; 2.vue代码 <div class"historyLeft2"><div style"relat…
阅读更多...
用Python代码绘制动态3D爱心效果

用Python代码绘制动态3D爱心效果

引言 介绍Python在创意编程中的应用&#xff0c;特别是如何通过简单的代码实现视觉上的美感。引出本文将分享的爱心代码&#xff0c;并简要说明其实现原理。 爱心代码的基本实现 展示一个简单的Python代码示例&#xff0c;使用字符画的方式在控制台中绘制一个爱心图案。 pr…
阅读更多...
使用Python开发经典俄罗斯方块游戏

使用Python开发经典俄罗斯方块游戏

使用Python开发经典俄罗斯方块游戏 在这篇教程中&#xff0c;我们将学习如何使用Python和Pygame库开发一个经典的俄罗斯方块游戏。这个项目将帮助你理解游戏开发的基本概念&#xff0c;包括图形界面、用户输入处理、碰撞检测等重要内容。 项目概述 我们将实现以下功能&…
阅读更多...
兼顾长、短视频任务的无人机具身理解！AirVista-II：面向动态场景语义理解的无人机具身智能体系统

兼顾长、短视频任务的无人机具身理解！AirVista-II：面向动态场景语义理解的无人机具身智能体系统

作者&#xff1a;Fei Lin 1 ^{1} 1, Yonglin Tian 2 ^{2} 2, Tengchao Zhang 1 ^{1} 1, Jun Huang 1 ^{1} 1, Sangtian Guan 1 ^{1} 1, and Fei-Yue Wang 2 , 1 ^{2,1} 2,1单位&#xff1a; 1 ^{1} 1澳门科技大学创新工程学院工程科学系&#xff0c; 2 ^{2} 2中科院自动化研究所…
阅读更多...
【蓝桥杯省赛真题49】python偶数 第十五届蓝桥杯青少组Python编程省赛真题解析

【蓝桥杯省赛真题49】python偶数 第十五届蓝桥杯青少组Python编程省赛真题解析

python偶数 第十五届蓝桥杯青少组python比赛省赛真题详细解析 博主推荐 所有考级比赛学习相关资料合集【推荐收藏】1、Python比赛 信息素养大赛Python编程挑战赛 蓝桥杯python选拔赛真题详解
阅读更多...
鸿蒙（HarmonyOS）应用开发入门教程

鸿蒙（HarmonyOS）应用开发入门教程

目录 第一章：鸿蒙系统简介 1.1 什么是鸿蒙系统？ 1.2 鸿蒙系统架构 第二章：开发环境搭建 2.1 安装DevEco Studio 步骤1：下载与安装 步骤2：首次配置 步骤3：设备准备 2.2 创建第一个项目 第三章：鸿蒙应用开发基础 3.1 核心概念：Ability与AbilitySlice 示例代码…
阅读更多...
VM中 ubuntu 网卡不显示

VM中 ubuntu 网卡不显示

1.添加网卡配置 #sudo nano /etc/netplan/01-netcfg.yaml network:version: 2renderer: networkdethernets:ens33:dhcp4: trueens37:dhcp4: trueens38:dhcp4: true#保存后 sudo netplan apply2.查看网络状态 sudo systemctl start systemd-networkd sudo systemctl status sy…
阅读更多...
阿克曼-幻宇机器人系列教程3- 机器人交互实践（Message）

阿克曼-幻宇机器人系列教程3- 机器人交互实践（Message）

上一篇文章介绍了如何通过topic操作命令实现与机器人的交互&#xff0c;本篇我们介绍如何通过Message&#xff08;即topic的下一级&#xff09;实现与机器人的交互。 和topic一样&#xff0c;首先在一个终端通过ssh命令登录机器人、启动机器人&#xff0c;然后打开另外一个终端…
阅读更多...
Python 调试扩展版本兼容问题解决纪实

Python 调试扩展版本兼容问题解决纪实

在 Python 开发中&#xff0c;调试工具的正常使用对效率至关重要。近期在公司项目中&#xff0c;便遇到了 Python 调试扩展与版本不兼容的问题。公司 ERP 服务器采用 Ubuntu 18.04 系统&#xff0c;其标配 Python 版本为 3.6&#xff0c;而常用的 Python Debugger 扩展对版本有…
阅读更多...
React 第四十二节 Router 中useLoaderData的用途详解

React 第四十二节 Router 中useLoaderData的用途详解

一、前言 useLoaderData&#xff0c;用于在组件中获取路由预加载的数据。它通常与路由配置中的 loader 函数配合使用&#xff0c;用于在页面渲染前异步获取数据&#xff08;如 API 请求&#xff09;&#xff0c;并将数据直接注入组件&#xff0c;从而简化数据流管理。 二、us…
阅读更多...
Linux——mysql主从复制与读写分离

Linux——mysql主从复制与读写分离

目录 一&#xff0c;理解什么是mysql主从复制 1&#xff0c;mysql支持的复制类型 2&#xff0c;mysql主从复制的工作流程 二&#xff0c;配置mysql主从复制 三&#xff0c;配置mysql主主复制 四&#xff0c;mysql读写分离 1&#xff0c;了解什么是mysql读写分离 2&…
阅读更多...
MongoDB数据库深度解析：架构、特性与应用场景

MongoDB数据库深度解析：架构、特性与应用场景

在现代应用程序开发中&#xff0c;数据存储技术的选择至关重要。在众多的数据库管理系统中&#xff0c;MongoDB以其灵活性和强大的功能迅速崛起&#xff0c;成为NoSQL数据库中的佼佼者。本文将深入解析MongoDB的架构、核心特性、性能优化及其在实际应用中的最佳实践&#xff0c…
阅读更多...
3D曲面上的TSP问题（一）：曲面上点集距离求解

3D曲面上的TSP问题（一）：曲面上点集距离求解

3D曲面上&#xff0c;两点的距离求解不能采用欧式距离&#xff0c;而需要计算测地线距离。 代码使用CGAL 5.6.2 OpenCV 4.11.0 版本实现 #include "cgal_utils.h" #include <CGAL/AABB_tree.h> #include <CGAL/AABB_traits.h> #include <CGAL/AABB_…
阅读更多...
【歌曲结构】2：小节与歌曲结构信息整合

【歌曲结构】2：小节与歌曲结构信息整合

歌曲小节与结构信息整合 我将为您整合小节信息与歌曲结构，创建一个更加详细的JSON数据结构。 处理方法 将小节时间与歌曲结构段落进行匹配为每个小节添加所属段落信息为小节添加格式化的时间戳为小节添加对应时间范围内的歌词{"song_title": "财神庙前许三亿…
阅读更多...
C语言：深入理解指针（3）

C语言：深入理解指针（3）

目录 一、数组名的理解 二、用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 八、结语 一、数组名的理解 数组名其实就是首元素的地址 int arr[3] {1,2,3}; printf("arr :%p\n" ,arr); printf(…
阅读更多...
Spring MVC 接口的访问方法如何设置

Spring MVC 接口的访问方法如何设置

RequestMapping 是 Spring 框架中用于映射 HTTP 请求到控制器方法的注解。它支持以下 HTTP 方法访问类型&#xff0c;通过 method 属性指定&#xff1a; GET&#xff1a;用于获取资源POST&#xff1a;用于提交数据PUT&#xff1a;用于更新资源DELETE&#xff1a;用于删除资源PA…
阅读更多...
linux libdbus使用案例

linux libdbus使用案例

以下是一个基于 Linux libdbus 的详细指南，包含服务端和客户端的完整代码示例，涵盖 方法调用、信号发送 和 异步消息处理。libdbus 是 D-Bus 的底层 C 库，直接操作 D-Bus 协议，适合需要精细控制的场景。 1. libdbus 的核心机制 连接管理：通过 dbus_bus_get 连接系统总线或…
阅读更多...
最新文章

Copyright @ 2022~2023