前端性能指標及優化策略——從加載、渲染和交互階段分別解讀詳解并以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
繁體地址，請注明出處：http://hk.pswp.cn/news/905637.shtml
英文地址，請注明出處：http://en.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