首屏加载时间优化解决

news2025/7/14 13:52:16

在这里插入图片描述

🤖 作者简介：水煮白菜王（juejin/csdn同名） ，一位前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时学习在博客写作中记录，总结出的一些开发技巧✍。
感谢支持💕💕💕

目录

  • 前端首屏加载时间优化解javascript
    • 代码分割
    • 优化资源加载
      • 减少请求次数
      • 使用现代图片格式
        • webp
        • AVIF
      • 预加载关键资源 ( preload prefetch区别，还有dns-prefetch)
        • < link rel="preload">
        • < link rel="prefetch">
      • 优化 CSS 加载
        • 关键 CSS
        • 非关键 CSS
    • 优化 JavaScript 加载
    • DNS 预解析
    • 其他的一些方案
    • 总结

前端首屏加载时间优化解javascript

要加速和优化前端首屏渲染，可以考虑以下几个方面：

  1. 减少网络请求：通过合并和压缩文件、使用雪碧图或字体图标等技术，减少需要下载的资源数量和大小。
  2. 延迟加载非关键资源：将非关键资源（如图片、视频）延迟加载，只在用户需要时再进行加载，可以使用懒加载或按需加载的技术。
  3. 使用浏览器缓存：设置适当的缓存策略，使得页面资源可以被浏览器缓存起来，减少重复的网络请求。
  4. 优化代码和文件大小：精简和压缩HTML、CSS和JavaScript文件，删除不必要的代码、注释和空格，以减少文件大小，从而提高加载速度。
  5. 异步加载和执行：将JavaScript脚本放在页面底部，或使用异步加载的方式，确保脚本不会阻塞页面的渲染。
  6. 使用CDN加速：将静态资源部署在内容分发网络（CDN）上，让用户能从离其最近的服务器获取资源，提高访问速度。
  7. 响应式设计和优化图片：采用响应式布局和媒体查询，根据设备屏幕大小加载合适的布局和图片，避免在移动设备上加载过大的图片。
  8. 使用预渲染技术：通过预渲染技术，提前生成首屏内容并存储为静态文件，当用户访问时直接返回，减少服务器渲染时间。
  9. 优化关键渲染路径：确保关键渲染路径（Critical Rendering Path）尽可能短，例如通过减少DOM节点数量、避免过多的重排和重绘操作等。
  10. 避免阻塞渲染资源：将CSS样式表放在页面头部，避免使用阻塞渲染的JavaScript，以避免影响页面的渲染速度。
优化策略描述
减少网络请求通过合并和压缩文件、使用雪碧图或字体图标等技术，减少需要下载的资源数量和大小。
延迟加载非关键资源将非关键资源（如图片、视频）延迟加载，只在用户需要时再进行加载，可以使用懒加载或按需加载的技术。
使用浏览器缓存设置适当的缓存策略，使得页面资源可以被浏览器缓存起来，减少重复的网络请求。
优化代码和文件大小精简和压缩HTML、CSS和JavaScript文件，删除不必要的代码、注释和空格，以减少文件大小，从而提高加载速度。
异步加载和执行将JavaScript脚本放在页面底部，或使用异步加载的方式，确保脚本不会阻塞页面的渲染。
使用CDN加速将静态资源部署在内容分发网络（CDN）上，让用户能从离其最近的服务器获取资源，提高访问速度。
响应式设计和优化图片采用响应式布局和媒体查询，根据设备屏幕大小加载合适的布局和图片，避免在移动设备上加载过大的图片。
使用预渲染技术通过预渲染技术，提前生成首屏内容并存储为静态文件，当用户访问时直接返回，减少服务器渲染时间。
优化关键渲染路径确保关键渲染路径（Critical Rendering Path）尽可能短，例如通过减少DOM节点数量、避免过多的重排和重绘操作等。
避免阻塞渲染资源将CSS样式表放在页面头部，避免使用阻塞渲染的JavaScript，以避免影响页面的渲染速度。

以Webpack构建工具为例子（同样的vite 也是类似的思路），可以通过以下方法来实现首屏优化：
11. 代码分割（Code Splitting）：使用Webpack的代码分割功能，将代码拆分成多个小块，按需加载非关键代码。这样可以减少初始加载的文件大小，加快首屏渲染速度。
12. 按需加载（Lazy Loading）：使用Webpack的动态导入（Dynamic Import）或React的React.lazy()等技术，将非关键模块延迟加载，只在需要时再进行加载。这样可以减少初始加载的资源量，提高首屏渲染速度。
13. 图片优化：使用Webpack的url-loader或file-loader等加载器，对图片进行压缩和优化。可以将较大的图片转换成Base64编码，或者根据设备屏幕大小加载合适的图片，减少网络请求并提高加载速度。
14. 代码压缩和混淆：使用Webpack的UglifyJsPlugin、TerserPlugin等插件对JavaScript代码进行压缩和混淆，减少文件大小，提高加载速度。
15. 缓存策略：配置Webpack的输出文件名中添加hash或chunkhash，利用浏览器缓存机制，确保文件内容更新后能够正确加载新版本的资源，而不是使用缓存的旧版本文件。
16. Tree Shaking：使用Webpack的Tree Shaking功能，可以消除未使用的代码，只打包使用到的模块和函数，减少最终生成的代码体积。
17. 提取公共代码：使用Webpack的SplitChunksPlugin或optimization.splitChunks配置项，将公共的模块提取出来，避免重复加载和下载相同的代码。
18. 预渲染（Prerendering）：使用Webpack的预渲染插件，如prerender-spa-plugin，提前生成静态HTML文件，存储在服务器上。当用户请求时，直接返回预渲染好的首屏内容，加速页面展示。

代码分割

在结合 Webpack 和 React 的项目中，代码分割（Code Splitting）是一种重要的性能优化手段，特别是对于首屏加载时间的优化。代码分割可以将一个大的 bundle 文件拆分成多个小的 chunks（块），这样可以按需加载，减少首次加载的时间，加快首屏显示。
Webpack 的 SplitChunksPlugin 可以用来自动分割公共模块和第三方库。通过合理配置 optimization.splitChunks 选项，可以把公共依赖提取到单独的 chunk 中，避免重复打包，减少首屏加载的体积。

optimization: {
  splitChunks: {
    chunks: 'all', // 可以是`async`（仅分割异步加载模块），`initial`（仅分割初始加载模块），或`all`（两者都分割）
      minSize: 20000, // 生成chunk的最小体积（以字节为单位）
      minChunks: 1, // 在分割之前，模块被共享的最少次数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）
      cacheGroups: { // 缓存组可以继承和/或覆盖splitChunks.*的任何选项
      vendors: {
        test: /[\\/]node_modules[\\/]/,
          priority: -10
      },
      default: {
        minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
      }
    }
  }
}

在 React 中，可以使用动态导入的方法来，利用 import()语法实现动态导入，Webpack 会自动将这些导入的模块分割成新的 chunk。对于 React 组件，可以结合 React.lazy 进行按需加载。

const LazyComponent = React.lazy(() => import("./LazyComponent"));

使用 Webpack 的魔法注释来实现更细致的控制，比如命名 chunk、预加载和预获取。

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "lazy-component" */ "./LazyComponent")
                                );
// 预加载
const AnotherComponent = React.lazy(() =>
  import(/* webpackPrefetch: true */ "./AnotherComponent")
                                   );
// 预获取
const YetAnotherComponent = React.lazy(() =>
  import(/* webpackPreload: true */ "./YetAnotherComponent")
                                      );

为动态导入的组件提供加载状态，可以使用 Suspense 组件来包裹懒加载的组件，并指定一个 fallback 加载指示器:

对于使用 React Router 之类的路由库的应用，可以在路由配置中应用代码分割，为每个路由页面实现懒加载：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";

const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

优化资源加载

优化资源加载是提高网页性能、尤其是首屏加载速度的关键方面。资源包括 JavaScript、CSS、图片、字体等。优化这些资源的加载可以显著改善用户体验。

减少请求次数

将多个小的 JavaScript 或 CSS 文件合并成一个文件是一种常见的前端性能优化策略。这种做法可以减少 HTTP 请求的次数，从而提高页面加载速度和用户体验。

为什么要合并文件：

  1. 减少 HTTP 请求：每个文件的请求都涉及到一定的开销（如 DNS 查找、TCP 握手等），特别是在 HTTP/1.x 协议下，这些开销会显著影响加载性能。通过合并文件，可以减少这些请求的次数，从而减少总体开销。
  2. 提高缓存效率：将多个文件合并为一个，可以提高浏览器缓存的利用率。用户在首次访问网站时加载了合并后的文件，之后再次访问或访问其他页面时，如果使用了相同的合并文件，就可以直接从缓存中加载，而不需要再次发起请求

合并文件时，需要注意文件之间的依赖关系，确保合并后的文件在执行时能保持正确的依赖顺序。对于一些不需要立即执行的 JavaScript 模块或 CSS 文件，可以考虑使用异步加载的方式，避免阻塞页面的渲染。

如果服务器支持 HTTP/2，利用其多路复用功能，可以同时传输多个请求，减少了合并文件的必要性。但即使在 HTTP/2 环境下，合理的文件合并仍然有其优势，尤其是在缓存管理和初始加载性能方面。

对于图片可以合并多个小图片到一个大图集中，并通过 CSS 背景定位来展示特定部分的技术，被称为 CSS 雪碧图（CSS Sprites）。这种方法有效减少了图片请求的次数，提升了页面加载性能。另一种优化手段是将小图标或页面中的小图片转换为 Base64 编码格式并直接嵌入到 HTML 或 CSS 中，进一步减少 HTTP 请求。但需注意，Base64 编码会使图片体积增大约 33%，因此更适用于较小的图片。这两种技术都是前端性能优化的常用方法，旨在加快页面渲染速度和提升用户体验。

使用现代图片格式

WebP 和 AVIF 是相对较新的图像格式，相比传统的 JPEG 和 PNG 格式，它们提供了更高的压缩效率，这意味着在保持相似图像质量的情况下，文件大小更小。这背后的原因主要涉及到这些格式采用的先进编码技术：

webp

先进的压缩算法：WebP 格式使用了基于 VP8 视频编解码器的压缩技术。这种技术针对图像内容进行更高效的压缩，通过减少编码图像块的位数来减小文件大小，同时尽量保持图像质量。
支持无损和有损压缩：WebP 既支持无损压缩，也支持有损压缩。无损压缩 WebP 图像通常比 PNG 小 30%，而有损压缩的 WebP 图像则比 JPEG 小 25-34%，并且可以提供相同甚至更好的质量。
丰富的颜色表现：WebP 支持更广的颜色范围和深度，包括 8 位或 10 位色深的有损编码和 8 位色深的无损编码，这使得它在色彩表现上优于标准的 JPEG 格式。
集成了额外的功能：如支持透明度（Alpha 通道）和动画，这使得 WebP 成为一种非常灵活的图像格式，能够替代 GIF 等格式。

AVIF

基于 AV1 视频编解码器：AVIF 是一种新的图像格式，基于开源的 AV1 视频编解码器。AV1 是由联盟视频联盟开发的，旨在网络上提供高效的视频流传输。

更高效的压缩性能：AVIF 提供了比 WebP 更高的压缩效率，尤其是在高分辨率和高质量图像上。在相同的视觉质量下，AVIF 文件的大小通常比 WebP 更小。
更好的图像质量：AVIF 支持更高的动态范围和颜色深度，包括 HDR（高动态范围图像）和广色域图像，这意味着它可以提供更丰富的色彩和更细腻的图像细节。

更多的编码特性：AVIF 支持多种编码特性，如 10 位和 12 位色深、4:4:4、4:2:2 和 4:2:0 色度子采样等，这为图像提供了更多的灵活性和选择。

总的来说，WebP 和 AVIF 之所以能在保持相同图片质量的同时减少文件大小，主要是因为它们采用了更高效的压缩算法和更先进的编码技术。这些技术使得 WebP 和 AVIF 能够更好地减少冗余信息，从而在不牺牲图像质量的前提下降低文件大小。这些特性使得 WebP 和 AVIF 非常适合用于网络图像，以提高网页加载速度和改善用户体验。

预加载关键资源 ( preload prefetch区别，还有dns-prefetch)

在现代网页性能优化中， 和 是两种重要的资源提示（Resource Hints），它们能够帮助开发者控制浏览器的资源加载优先级，从而优化用户体验。

< link rel=“preload”>
是一种告诉浏览器预先加载页面初始化时即需的资源的方法。这些资源对于当前页面是必要的，但可能由于 HTML 解析的顺序或者延迟加载的策略，并不会立即被加载。通过使用preload，开发者可以显式地告诉浏览器尽早地加载这些关键资源，以确保它们能够及时地被使用，从而减少渲染阻塞时间，加快首屏渲染速度。 
<!-- 预加载关键的CSS文件 -->
<link rel="preload" href="important.css" as="style" />

<!-- 预加载关键的JavaScript文件 -->
<link rel="preload" href="main.js" as="script" />

<!-- 预加载字体文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

在使用preload时，as属性非常重要，因为它指定了被加载资源的类型，这有助于浏览器正确地优先加载资源，并使用正确的加载策略。

< link rel=“prefetch”>
是另一种资源提示，它指示浏览器在空闲时间预先获取用户将来可能需要的资源。这通常适用于预加载下一页面的资源，例如用户很可能会点击的链接的资源。prefetch的优先级较低，不会影响当前页面的关键资源加载，因此它主要用于提升未来页面的加载速度。 
<!-- 预获取下一页面可能需要的CSS文件 -->
<link rel="prefetch" href="next-page-style.css" />

<!-- 预获取下一页面可能需要的JavaScript文件 -->
<link rel="prefetch" href="next-page-script.js" />

● < link rel=“preload”>：用于当前页面的关键资源，目的是尽快加载这些资源以提升当前页面的性能。适用于那些对当前页面渲染至关重要的资源，比如关键的 CSS 和 JavaScript 文件、字体文件等。
● < link rel=“prefetch”>：用于将来的页面资源，目的是利用浏览器的空闲时间提前获取可能需要的资源，以提升未来页面的加载速度。适用于那些用户可能接下来会访问的页面资源，如下一篇文章的脚本、样式表或图片等。

通过合理利用这两种资源提示，开发者可以更好地优化资源的加载顺序和时间，从而改善用户体验。不过，需要注意的是，过度使用或不当使用这些技术可能会带来资源竞争或浪费带宽，因此应该根据实际情况谨慎选择使用。

优化 CSS 加载

优化 CSS 加载是提高页面渲染速度和用户体验的重要方面。主要包括两个策略：处理关键 CSS（Critical CSS）和异步加载非关键 CSS。关键 CSS 是指用于首屏渲染的最小 CSS 集合，即在页面加载的初始阶段用于样式化内容的 CSS。将关键 CSS 内联在 HTML 文档的 部分中可以减少阻塞渲染的外部样式表的数量，从而加快首屏内容的显示速度。

关键 CSS

在使用 Webpack 构建工具时，可以通过特定的插件和加载器来自动提取关键 CSS，以优化页面加载性能。下面是在 Webpack 环境中提取关键 CSS 的一些常用方法和步骤：
使用 html-webpack-plugin 和 critters-webpack-plugin：

  1. 安装相关插件 critters-webpack-plugin 和 html-webpack-plugin。
  2. 在 webpack.config.js 文件中，引入这两个插件并将它们添加到 plugins 数组中。critters-webpack-plugin 会处理 html-webpack-plugin 生成的 HTML 文件，提取并内联关键 CSS。
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Critters = require("critters-webpack-plugin");

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new Critters({
      // Critters的配置选项...
    }),
  ],
};

对于更复杂的场景，比如当你需要进一步优化并清理未使用的 CSS 时，可以结合使用 mini-css-extract-plugin 和 purifycss-webpack。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurifyCSSPlugin = require("purifycss-webpack");
const glob = require("glob");

module.exports = {
  // 其他Webpack配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
    new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, "src/**/*.html")),
      minimize: true,
    }),
  ],
};
非关键 CSS

非关键 CSS 是指对首屏渲染不是必需的 CSS，例如用于页面下方内容或其他页面的样式。异步加载这些非关键 CSS 可以确保它们不会阻塞首屏的渲染。
主要有以下几种实现方法：

  1. 使用标签的 media 属性：通过设置 media 属性为一个不匹配的媒体查询，可以让浏览器延迟加载 CSS 文件。页面加载完成后，通过 JavaScript 更改 media 属性为 all 来加载和应用样式。
<link
  rel="stylesheet"
  href="non-critical.css"
  media="print"
  onload="this.media='all'"
  />
<noscript><link rel="stylesheet" href="non-critical.css" /></noscript>
  1. 使用 JavaScript 动态加载 CSS：通过 JavaScript 动态创建 标签并插入到 中，可以实现 CSS 的异步加载。
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "non-critical.css";
document.head.appendChild(link);
  1. 减少 CSS 选择器的复杂性：避免使用过于复杂的 CSS 选择器，因为它们会增加浏览器的样式计算时间。
  2. 避免使用@import：@import 允许在 CSS 文件中导入其他 CSS 文件，但它会增加页面加载时间，因为浏览器需要解析第一个 CSS 文件后才能发现并加载导入的文件。

优化 JavaScript 加载

使用 async 和 defer 属性异步加载 JavaScript，减少阻塞渲染的脚本。
当脚本带有 async 属性时，它将并行于页面的加载进行下载。一旦脚本下载完成，它会立即执行，而不用等待其他脚本或页面渲染完成。这对于那些不依赖于其他脚本且不被其他脚本依赖的功能来说是个不错的选择

<script async src="script.js"></script>

带有 defer 属性的脚本会等到整个页面都解析完毕后才会执行，而且是按照它们在文档中出现的顺序依次执行的。这通常用于那些需要访问或修改 DOM 的脚本，且不影响文档的初始显示。

<script defer src="script.js"></script>

DNS 预解析

DNS 预解析是一种性能优化技术，用于减少用户浏览网页时遇到的延迟。当用户访问一个网页时，浏览器需要将网页上的域名（如 example.com）转换成 IP 地址，这个过程称为 DNS 解析。DNS 解析需要时间，特别是当 DNS 查询需要通过多个网络节点时，这个时间可能会显著影响网页的加载速度。通过使用 DNS 预解析，可以提前进行这个解析过程，从而减少用户等待时间。

DNS 解析可能需要一定的时间，特别是如果 DNS 服务器距离用户较远，或者需要多次跳转才能找到相应的记录时。通过预解析，可以在用户实际请求资源之前完成这一步骤，从而减少等待时间。

DNS 预解析可以通过在 HTML 中添加 标签来实现，如下所示：

<link rel="dns-prefetch" href="//www.ok.com" />

DNS 预解析对于那些含有大量来自不同域名资源的网页尤为有用，比如外部脚本、广告、图片等

其他的一些方案

使用 CDN 是一种比较常见的解决方案，将资源部署到 CDN 上，可以让资源从用户地理位置最近的服务器加载，减少延迟。
另外一个就是使用 HTTP/2，因为 HTTP/2 提供了头部压缩、服务器推送、请求复用等特性，相较于 HTTP/1.1 可以显著提升资源加载效率。
编写出高性能且易维护的代码极其重要，例如减少回来和重绘等等。

总结

优化点简要说明相关技术/工具
减少网络请求合并文件、使用雪碧图或字体图标，减少资源数量和大小。Webpack合并、雪碧图、Base64嵌入、HTTP/2多路复用。
延迟加载非关键资源仅在需要时加载非关键资源（如图像、视频）。懒加载（Intersection Observer）、React.lazy、按需加载。
浏览器缓存设置缓存策略，减少重复请求。Cache-Control、ETag、Service Worker。
代码分割拆分为多个小块，按需加载非关键代码，减少初始体积。Webpack SplitChunksPlugin、React.lazy、动态导入（import()）。
按需加载动态加载非关键模块，避免阻塞首屏。React.lazy、Webpack魔法注释（如webpackPrefetch）。
图片优化压缩图片、使用现代格式（WebP/AVIF）、响应式图片。Webpack图片加载器、ImageMagick、srcset/sizes属性。
预渲染技术提前生成首屏静态内容，减少服务器渲染时间。Prerender-spa-plugin、SSR（服务端渲染）。
关键渲染路径优化缩短关键路径，减少重排/重绘。减少DOM节点、优化CSS选择器、避免阻塞渲染资源。
预加载关键资源显式加载关键资源（preload）或预获取未来资源（prefetch）。<link rel="preload">、<link rel="prefetch">。
关键CSS内联提取首屏所需CSS并内联到HTML，避免外部请求阻塞。Critters-webpack-plugin、HtmlWebpackPlugin。
异步加载JavaScript使用async/defer属性避免脚本阻塞渲染。<script async>、<script defer>。
CDN加速部署静态资源到CDN，降低网络延迟。Cloudflare、阿里云OSS、七牛云。
Tree Shaking移除未使用代码，减小包体积。Webpack默认支持（需配置mode为production）。
DNS预解析提前解析域名，减少资源加载延迟。<link rel="dns-prefetch">。
HTTP/2优化利用HTTP/2特性（多路复用、头部压缩）提升加载效率。服务器配置HTTP/2支持。

在这里插入图片描述
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀
在这里插入图片描述

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

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

相关文章

RabbitMQ--延迟队列事务消息分发

RabbitMQ--延迟队列事务消息分发

目录 1.延迟队列 1.1应用场景 1.2利用TTL死信队列模拟延迟队列存在的问题 1.3延迟队列插件 1.4常见面试题 2.事务 2.1配置事务管理器 3.消息分发 3.1概念 3.2应用场景 3.2.1限流 3.2.2负载均衡 1.延迟队列 延迟队列(Delayed Queue)&#xff0c;即消息被发送以后, 并…
阅读更多...
Linux服务器组建与管理

Linux服务器组建与管理

#!/bin/bash #判断是否是root用户if [ "$USER" ! "root" ]; then echo "不是root用户&#xff0c;无法进行安装操作" exit 1 fi#关闭防火墙systemctl stop firewalld && systemctl disable firewalld && echo "防火墙已经关…
阅读更多...
设计模式 Day 2：工厂方法模式（Factory Method Pattern）详解

设计模式 Day 2：工厂方法模式（Factory Method Pattern）详解

继 Day 1 学习了单例模式之后&#xff0c;今天我们继续深入对象创建型设计模式——工厂方法模式&#xff08;Factory Method&#xff09;。工厂方法模式为对象创建提供了更大的灵活性和扩展性&#xff0c;是实际开发中使用频率极高的一种设计模式。 一方面&#xff0c;我们将简…
阅读更多...
自动驾驶浪潮下，HMI 设计如何保障安全与便捷？

自动驾驶浪潮下，HMI 设计如何保障安全与便捷？

自动驾驶系统与 HMI 设计的关联性 自动驾驶系统涵盖了一系列复杂的传感器技术、算法以及执行机构。从激光雷达、摄像头等环境感知传感器&#xff0c;到用于处理海量数据的人工智能算法&#xff0c;再到控制车辆行驶的动力与转向执行系统&#xff0c;各部分协同工作&#xff0c…
阅读更多...
瑞昱RTD2556QR显示器驱动芯片

瑞昱RTD2556QR显示器驱动芯片

一、概述 RTD2556QR芯片是由Realtek公司精心研发的一款高性能显示驱动芯片&#xff0c;专为满足现代显示设备对高分辨率、多功能接口及稳定性能的需求而设计。该芯片凭借其卓越的技术特性和广泛的应用领域&#xff0c;在显示驱动市场中占据重要地位。它集成了多种先进的功能模…
阅读更多...
rustdesk 客户端使用

rustdesk 客户端使用

配置中继服务器 RustDesk 搭建-CSDN博客 配置客户端&#xff0c;服务端&#xff08;控制方&#xff0c;被控方&#xff09; 1.下载rustdesk.exe(windows为例) 2.完成后如下 3.配置
阅读更多...
碳化硅 MOSFET三相逆变电路损耗新算法

碳化硅 MOSFET三相逆变电路损耗新算法

基 于 碳 化 硅 MOSFET三相逆变电路损耗新算法 摘 要 提出了一种三相逆变电路功率开关器件损耗计算的新方法.为了达到将高频电力电子电路和实时仿真算 法 相 结 合 应 用 于 嵌 入 式 实 时 仿 真 平 台 的 目 的 &#xff0c;针 对 工 程 应 用 中 逆 变 器 损 耗 计 算 的 实…
阅读更多...
增加等IO状态的唤醒堆栈打印及缺页异常导致iowait分析

增加等IO状态的唤醒堆栈打印及缺页异常导致iowait分析

一、背景 在之前的博客 在计算进程D状态持续时间及等IO的时间遇到的一处问题-CSDN博客 里&#xff0c;我们修复了一处在抓取D状态及等IO状态堆栈的监控程序的一处时间计算bug&#xff0c;在这篇博客里&#xff0c;我们进一步丰富监控程序&#xff0c;在进程iodelay被唤醒时&am…
阅读更多...
新能源汽车空调系统（R134A）性能评估（一）

新能源汽车空调系统（R134A）性能评估（一）

国内外主流空调系统厂家&#xff1a;贝尔、德尔福、空调国际、法雷奥、电装、松芝、杰信、新电、豫新等 泛亚汽车的空调电子部是比较优秀的整车空调研发团队。 空调系统综合试验台架是一套由试验室、风量测定装置、空气调和器、空气温度测定装置、湿度测定装置、加热器试验辅助…
阅读更多...
Ubuntu 22.04安装MongoDB：GLM4模型对话数据收集与微调教程

Ubuntu 22.04安装MongoDB：GLM4模型对话数据收集与微调教程

在Ubuntu 22.04安装MongoDB Community Edition的教程请点击下方链接进行参考&#xff1a; 点击这里获取MongoDB Community Edition安装教程 今天将为大家带来如何微调GLM4模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1. 大模型 ChatGLM4 微调步骤 1.1 从 github…
阅读更多...
可编程增益放大器（PGA）在智能传感器自调节系统中的角色

可编程增益放大器（PGA）在智能传感器自调节系统中的角色

在电子电路设计中&#xff0c;放大器芯片作为信号处理的核心器件&#xff0c;其性能直接影响系统整体表现。然而面对运算放大器、功率放大器、仪表放大器等众多类型&#xff0c;工程师常陷入选型困惑。作为国内领先的半导体解决方案提供商&#xff0c;华芯邦深耕放大器芯片领域…
阅读更多...
微信登录、商品浏览前瞻

微信登录、商品浏览前瞻

一.业务效果 二.所需技术
阅读更多...
浙大研究团队揭示电场调控5-HT1AR的分子机制

浙大研究团队揭示电场调控5-HT1AR的分子机制

本期介绍的文章题为 “Structural Insight into the Inactive/Active States of 5‑HT1AR and Molecular Mechanisms of Electric Fields in Modulating 5‑HT1AR” 。近期发表于JCIM。通过分子动力学模拟&#xff0c;探究 5-羟色胺 1A 受体(5-HT1AR) 在非活性 / 活性状态的构象…
阅读更多...
视频AI赋能水利行业生态治理，水电站大坝漂浮物实时监测与智能预警方案

视频AI赋能水利行业生态治理，水电站大坝漂浮物实时监测与智能预警方案

水电站大坝周边水域垃圾漂浮物不仅影响水质&#xff0c;还可能对大坝设施运行、水生态环境造成威胁。传统依靠人工巡检的方式效率低、存在监测盲区&#xff0c;难以实时全面地掌握漂浮物情况。借助EasyCVR视频汇聚平台与TSINGSEE青犀AI算法中台构建智能化监测方案&#xff0c;能…
阅读更多...
flink 分组窗口聚合 与 窗口表值函数聚合 的区别

flink 分组窗口聚合 与 窗口表值函数聚合 的区别

警告&#xff1a;分组窗口聚合已经过时。推荐使用更加强大和有效的窗口表值函数聚合。 参考官方文档 在 Apache Flink 中&#xff0c;分组窗口聚合&#xff08;Group Window Aggregation&#xff09; 和 窗口表值函数聚合&#xff08;Windowing TVF Aggregation&#xff09;…
阅读更多...
阿里云Tair KVCache：打造以缓存为中心的大模型Token超级工厂

阿里云Tair KVCache：打造以缓存为中心的大模型Token超级工厂

一、Tair KVCache 简介 Tair KVCache 是阿里云瑶池旗下云数据库 Tair 面向大语言模型推理场景推出的 KVCache 缓存加速服务。 随着互联网技术的演进与流量规模的激增&#xff0c;缓存技术逐渐成为系统架构的核心组件。该阶段催生了 Redis 等开源缓存数据库&#xff0c;阿里巴巴…
阅读更多...
通过TIM+DMA Burst 实现STM32输出变频且不同脉冲数量的PWM波形

通过TIM+DMA Burst 实现STM32输出变频且不同脉冲数量的PWM波形

Burst介绍&#xff1a; DMA控制器可以生成单次传输或增量突发传输&#xff0c;传输的节拍数为4、8或16。 为了确保数据一致性&#xff0c;构成突发传输的每组传输都是不可分割的&#xff1a;AHB传输被锁定&#xff0c;AHB总线矩阵的仲裁器在突发传输序列期间不会撤销DMA主设备…
阅读更多...
[Effective C++]条款26:尽可能延后变量定义的出现时间

[Effective C++]条款26:尽可能延后变量定义的出现时间

. 在C中&#xff0c;尽可能延后变量定义的出现时间&#xff0c;主要原因是为了提供代码的可读性&#xff0c;减少不必要的开销以及避免潜在的错误。 1、代码执行过程中抛出异常 如果在代码开头定义了变量&#xff0c;但在后续代码中抛出了异常&#xff0c;可能导致变量在未被使…
阅读更多...
如何在k8s中对接s3存储

如何在k8s中对接s3存储

github地址&#xff1a; https://github.com/majst01/csi-driver-s3 1.CSI for S3 这是用于 S3&#xff08;或兼容 S3&#xff09;存储的容器存储接口 (CSI)。它可以动态分配存储桶并通过Fuse mount将它们安装到任何容器中 2.状态 这仍处于试验阶段&#xff0c;不应在任何…
阅读更多...
FPGA实现LED流水灯

FPGA实现LED流水灯

一、在VsCode中写代码 1、建立工程项目文件water_led.v文件 2、打开项目文件&#xff0c;创建三个目录 3、打开文件trl&#xff0c;创建water_led.v文件 4、打开文件tb&#xff0c;创建water_led_tb.v文件 5、用VsCode打开water_led.v文件&#xff0c;编写源代码 module water…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023