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

news2025/5/12 14:44:12

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

在现代 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.coloradmin.cn/o/2374001.html

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

相关文章

RDD实现单词计数

RDD实现单词计数

Scala&#xff08;Spark Shell&#xff09;方法 如果你在 spark-shell&#xff08;Scala 环境&#xff09;中运行&#xff1a; 1. 启动 Spark Shell spark-shell &#xff08;确保 Spark 已安装&#xff0c;PATH 配置正确&#xff09; 2. 执行单词统计 // 1. 读取文件&am…
阅读更多...
Java快速上手之实验七

Java快速上手之实验七

1&#xff0e;编写鼠标事件响应程序MouseEventDemo.java&#xff0c;当鼠标进入和离开窗口时给出相应显示&#xff0c;当按下、弹起时显示当前鼠标的坐标值。 2&#xff0e;编写鼠标事件响应程序MouseMotionEventDemo.java&#xff0c;当鼠标在窗口内移动时显示鼠标的坐标值。 …
阅读更多...
可视化图解算法36： 序列化二叉树-I（二叉树序列化与反序列化）

可视化图解算法36： 序列化二叉树-I（二叉树序列化与反序列化）

1. 题目 描述 请实现两个函数&#xff0c;分别用来序列化和反序列化二叉树&#xff0c;不对序列化之后的字符串进行约束&#xff0c;但要求能够根据序列化之后的字符串重新构造出一棵与原二叉树相同的树。 二叉树的序列化(Serialize)是指&#xff1a;把一棵二叉树按照某种遍…
阅读更多...
Vivado FPGA 开发 | 创建工程 / 仿真 / 烧录

Vivado FPGA 开发 | 创建工程 / 仿真 / 烧录

注&#xff1a;本文为 “Vivado FPGA 开发 | 创建工程 / 仿真 / 烧录” 相关文章合辑。 略作重排&#xff0c;未整理去重。 如有内容异常&#xff0c;请看原文。 Vivado 开发流程&#xff08;手把手教学实例&#xff09;&#xff08;FPGA&#xff09; 不完美先生 于 2018-04-…
阅读更多...
Javascript:数组和函数

Javascript:数组和函数

数组 创建数组 使用new创建 let arrnew array(数组大小); 直接赋值创建 let Arr2[];let Arr3[1,A,"HELLLO"]; 这里JS的数组里面的元素属性可以各不相同 演示代码 <script>let Arr1new Array(5);let Arr2[];let Arr3[1,A,"HELLLO"];console.…
阅读更多...
无锁秒杀系统设计：基于Java的高效实现

无锁秒杀系统设计：基于Java的高效实现

引言 在电商促销活动中&#xff0c;秒杀场景是非常常见的。为了确保高并发下的数据一致性、性能以及用户体验&#xff0c;本文将介绍几种不依赖 Redis 实现的无锁秒杀方案&#xff0c;并提供简化后的 Java 代码示例和架构图。 一、基于数据库乐观锁机制 ✅ 实现思路&#xf…
阅读更多...
NCCL N卡通信机制

NCCL N卡通信机制

转自我的博客&#xff1a;https://shar-pen.github.io/2025/05/05/torch-distributed-series/nccl_communication/ from IPython.display import Image import logging import torch import torch.distributed as distpytorch 分布式相关api torch.distributed.init_process_…
阅读更多...
Alpha3DCS公差分析系统_国产替代的3D精度管控方案-SNK施努卡

Alpha3DCS公差分析系统_国产替代的3D精度管控方案-SNK施努卡

随着智能制造发展规划的深入推进&#xff0c;工业软件国产化替代已上升为国家战略。在公差分析这一细分领域&#xff0c;长期被国外软件垄断的局面正被打破。 苏州施努卡自主研发的Alpha3DCS&#xff0c;凭借完全自主知识产权和军工级安全标准&#xff0c;成为国内实现三维公差…
阅读更多...
ABB电机控制和保护单元与Profibus DP主站转Modbus TCP网关快速通讯案例

ABB电机控制和保护单元与Profibus DP主站转Modbus TCP网关快速通讯案例

ABB电机控制和保护单元与Profibus DP主站转Modbus TCP网关快速通讯案例 在现代工业自动化系统中&#xff0c;设备之间的互联互通至关重要。Profibus DP和Modbus TCP是两种常见的通信协议&#xff0c;分别应用于不同的场景。为了实现这两种协议的相互转换&#xff0c;Profibus …
阅读更多...
0基础 | L298N电机驱动模块 | 使用指南

0基础 | L298N电机驱动模块 | 使用指南

引言 在嵌入式系统开发中&#xff0c;电机驱动是一个常见且重要的功能。L298N是一款高电压、大电流电机驱动芯片&#xff0c;广泛应用于各种电机控制场景&#xff0c;如直流电机的正反转、调速&#xff0c;以及步进电机的驱动等。本文将详细介绍如何使用51单片机来控制L298N电…
阅读更多...
【金仓数据库征文】金仓数据库：创新驱动，引领数据库行业新未来

【金仓数据库征文】金仓数据库：创新驱动，引领数据库行业新未来

一、引言 在数字化转型的时代洪流中&#xff0c;数据已跃升为企业的核心资产&#xff0c;宛如企业运营与发展的 “数字命脉”。从企业日常运营的精细化管理&#xff0c;到战略决策的高瞻远瞩制定&#xff1b;从客户关系管理的深度耕耘&#xff0c;到供应链优化的全面协同&…
阅读更多...
大模型系列（五）--- GPT3: Language Models are Few-Shot Learners

大模型系列（五）--- GPT3: Language Models are Few-Shot Learners

论文链接&#xff1a; Language Models are Few-Shot Learners 点评&#xff1a; GPT3把参数规模扩大到1750亿&#xff0c;且在少样本场景下性能优异。对于所有任务&#xff0c;GPT-3均未进行任何梯度更新或微调&#xff0c;仅通过纯文本交互形式接收任务描述和少量示例。然而&…
阅读更多...
Qt QCheckBox 使用

Qt QCheckBox 使用

1.开发背景 Qt QCheckBox 是勾选组件&#xff0c;具体使用方法可以参考 Qt 官方文档&#xff0c;这里只是记录使用过程中常用的方法示例和遇到的一些问题。 2.开发需求 QCheckBox 使用和踩坑 3.开发环境 Window10 Qt5.12.2 QtCreator4.8.2 4.功能简介 4.1 简单接口 QChec…
阅读更多...
系统架构-面向服务架构（SOA）

系统架构-面向服务架构（SOA）

概述 服务指的是系统对外提供的功能集 从应用的角度定义&#xff0c;可以认为SOA是一种应用框架&#xff0c;将日常业务划分为单独的业务功能和流程&#xff08;即服务&#xff09;&#xff0c;SOA使用户可以构建、部署和整合这些服务。 从软件的基本原理定义&#xff0c;SO…
阅读更多...
AJAX原理

AJAX原理

AJAX使用XHR 对象和服务器进行数据交互 XHR <p class"my-p"></p><script>const xhr new XMLHttpRequest()xhr.open(GET,http://hmajax.itheima.net/api/province)xhr.addEventListener(loadend,()>{// console.log(xhr.response)const data …
阅读更多...
Paddle Serving|部署一个自己的OCR识别服务器

Paddle Serving|部署一个自己的OCR识别服务器

前言 之前使用C部署了自己的OCR识别服务器&#xff0c;Socket网络传输部分是自己写的&#xff0c;回过头来一看&#xff0c;自己犯傻了&#xff0c;PaddleOCR本来就有自己的OCR服务器项目&#xff0c;叫PaddleServing&#xff0c;这里记录一下部署过程。 1 下载依赖环境 1.1 …
阅读更多...
Web开发—Vue工程化

Web开发—Vue工程化

文章目录 前言 Vue工程化 一、介绍 二、环境准备 1.介绍create-vue 2.NodeJS安装 3.npm介绍 三&#xff0c;Vue项目创建 四&#xff0c;项目结构 五&#xff0c;启动项目 六&#xff0c;Vue项目开发流程 七&#xff0c;API风格 前言 Vue工程化 前面我们在介绍Vue的时候&#…
阅读更多...
Word如何制作三线表格

Word如何制作三线表格

1.需求 将像这样的表格整理成论文中需要的三线表格。 2.直观流程 选中表格 --> 表格属性中的边框与底纹B --> 在设置中选择无&#xff08;重置表格&#xff09;–> 确定 --> 选择第一行&#xff08;其实是将第一行看成独立表格了&#xff0c;为了设置中线&…
阅读更多...
【实战教程】零基础搭建DeepSeek大模型聊天系统 - Spring Boot+React完整开发指南

【实战教程】零基础搭建DeepSeek大模型聊天系统 - Spring Boot+React完整开发指南

&#x1f525; 本文详细讲解如何从零搭建一个完整的DeepSeek AI对话系统&#xff0c;包括Spring Boot后端和React前端&#xff0c;适合AI开发入门者快速上手。即使你是编程萌新&#xff0c;也能轻松搭建自己的AI助手&#xff01; &#x1f4da;博主匠心之作&#xff0c;强推专栏…
阅读更多...
用C语言实现的——一个支持完整增删查改功能的二叉排序树BST管理系统，通过控制台实现用户与数据结构的交互操作。

用C语言实现的——一个支持完整增删查改功能的二叉排序树BST管理系统，通过控制台实现用户与数据结构的交互操作。

一、知识回顾 二叉排序树&#xff08;Binary Search Tree&#xff0c;BST&#xff09;&#xff0c;又称二叉查找树或二叉搜索树&#xff0c;是一种特殊的二叉树数据结构。 基本性质&#xff1a; ①有序性 对于树中的每个节点&#xff0c;其左子树中所有节点的值都小于该节点的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023