【万字总结】前端全方位性能优化指南(完结篇)——自适应优化系统、遗传算法调参、Service Worker智能降级方案

前言

自适应进化宣言

当监控网络精准定位病灶,真正的挑战浮出水面:系统能否像生物般自主进化?
五维感知——通过设备传感器实时捕获环境指纹(如地铁隧道弱光环境自动切换省电渲染)
基因调参——150个性能参数在遗传算法中实现达尔文式竞争,CDN选型效率提升4400倍
离线觉醒——Service Worker在断网瞬间接管核心功能
这不仅是技术升级,更宣告着软件从「精密机械」向「有机生命体」的范式跃迁。你的系统,即将学会呼吸。

第十章自适应优化系统

第一节 五维环境感知:设备/网络/电量/光线/地理动态适配

1.1)环境感知的核心逻辑

现代前端应用需实时感知用户环境特征,通过设备性能、网络状态、电池电量、光线强度、地理位置五个维度的动态检测,实现资源加载、渲染策略、交互设计的智能适配。其技术框架如下:

环境检测
五维参数
设备能力分级
网络带宽评估
电量剩余预测
光线强度分析
地理围栏触发
优化策略决策
资源加载
渲染降级
交互简化

1.2) 设备能力分级与优化

(1)设备性能检测

  1. 硬件参数采集

    // 检测GPU能力  
    const gl = document.createElement('canvas').getContext('webgl');  
    const gpuInfo = gl ? gl.getParameter(gl.RENDERER) : 'unknown';  // CPU核心数  
    const cpuCores = navigator.hardwareConcurrency || 4;  // 内存容量预测(非精确)  
    const deviceMemory = navigator.deviceMemory || 4; // 单位:GB  
    
  2. 设备分级策略

    设备等级CPU核心数内存容量GPU能力优化措施
    高端≥8≥8GB独立显卡4K资源加载,开启WebGL 2.0
    中端4-74-7GB集成显卡2K资源,启用硬件加速
    低端≤3≤3GB无GPU支持480P资源,禁用复杂动画

(2)实战代码:动态加载策略

function getDeviceLevel() {  const score = cpuCores * 0.3 + deviceMemory * 0.5 + (gpuInfo.includes('GPU') ? 2 : 0);  return score >= 6 ? 'high' : score >= 3 ? 'mid' : 'low';  
}  const deviceLevel = getDeviceLevel();  // 按设备等级加载资源  
const imageSrc = {  high: 'image-4k.webp',  mid: 'image-2k.webp',  low: 'image-480p.jpg'  
}[deviceLevel];  const img = new Image();  
img.src = imageSrc;  

1.3)网络状态动态适配

(1)网络带宽检测

  1. Network Information API

    const connection = navigator.connection || navigator.mozConnection;  
    const { type, effectiveType, downlink, rtt } = connection;  // 网络类型分级  
    const networkLevel =   downlink > 5 ? '5g' :  downlink > 2 ? '4g' :  effectiveType.includes('3g') ? '3g' : '2g';  
    
  2. 带宽预测算法

    // 基于历史数据的带宽滑动平均  
    let bandwidthHistory = [];  
    function updateBandwidth() {  bandwidthHistory.push(downlink);  if (bandwidthHistory.length > 5) bandwidthHistory.shift();  return bandwidthHistory.reduce((a, b) => a + b, 0) / bandwidthHistory.length;  
    }  
    

(2)网络优化策略对比

网络状态预加载策略资源压缩级别长连接复用
5G/4G全量预加载无损
3G首屏预加载70%质量
2G按需加载50%质量

1.4) 电量敏感型优化

(1) 电池状态检测

  1. Battery Status API

    navigator.getBattery().then(battery => {  const { charging, level, chargingTime, dischargingTime } = battery;  // 电量消耗速率  const drainRate = (1 - level) / (dischargingTime / 3600); // 每小时耗电百分比  
    });  
    
  2. 电量分级与策略

    电量区间状态优化措施
    ≤20%危急禁用后台同步,关闭WebSocket
    20%-50%低电量降低帧率至30fps,暂停非必要动画
    ≥50%安全全功能启用

(2) 实战代码:节电模式

function enablePowerSaveMode() {  // 降低渲染负载  document.body.style.setProperty('--animation-duration', '0.3s');  // 关闭后台任务  if ('serviceWorker' in navigator) {  navigator.serviceWorker.getRegistrations().then(registrations => {  registrations.forEach(reg => reg.unregister());  });  }  
}  battery.addEventListener('levelchange', () => {  if (battery.level < 0.2 && !battery.charging) {  enablePowerSaveMode();  }  
});  

1.5) 光线自适应界面

(1)环境光检测

  1. Ambient Light Sensor API

    try {  const sensor = new AmbientLightSensor();  sensor.onreading = () => {  const lux = sensor.illuminance;  // 光线强度分级  const lightLevel = lux > 1000 ? 'sunlight' : lux > 100 ? 'indoor' : 'dark';  };  sensor.start();  
    } catch (error) {  console.log('环境光传感器不可用');  
    }  
    
  2. UI适配规则

    光线条件亮度调节对比度色彩方案
    强光+30%亮度高对比度深色模式
    室内默认亮度标准对比度自动模式
    黑暗-20%亮度低对比度深色模式

(2) 实战代码:动态主题切换

function adjustThemeBasedOnLight(lux) {  const root = document.documentElement;  if (lux > 1000) {  root.style.setProperty('--background', '#000');  root.style.setProperty('--text-color', '#fff');  } else if (lux < 50) {  root.style.setProperty('--background', '#1a1a1a');  root.style.setProperty('--text-color', 'rgba(255,255,255,0.9)');  } else {  root.style.setProperty('--background', '#fff');  root.style.setProperty('--text-color', '#333');  }  
}  

1.6)地理围栏与本地化优化

(1) 地理位置检测

  1. Geolocation API

    navigator.geolocation.getCurrentPosition(position => {  const { latitude, longitude } = position.coords;  // 判断是否在目标区域  const isInChina = latitude > 18 && latitude < 54 && longitude > 73 && longitude < 136;  
    }, error => {  console.error('定位失败:', error);  
    });  
    
  2. 本地化优化策略

    地理位置CDN节点选择语言包加载合规性调整
    中国大陆上海/北京中文隐私条款弹窗
    欧洲法兰克福多语言GDPR合规
    北美弗吉尼亚英语CCPA合规

(2) 实战代码:区域资源加载

async function loadRegionalResources() {  const countryCode = await detectCountry();  let cdnUrl, privacyPolicy;  switch (countryCode) {  case 'CN':  cdnUrl = 'https://cdn-cn.example.com';  privacyPolicy = 'privacy-zh.html';  break;  case 'DE':  cdnUrl = 'https://cdn-eu.example.com';  privacyPolicy = 'privacy-de.html';  break;  default:  cdnUrl = 'https://cdn-us.example.com';  privacyPolicy = 'privacy-en.html';  }  loadScript(`${cdnUrl}/regional-sdk.js`);  showPrivacyModal(privacyPolicy);  
}  

1.7)五维联动的决策引擎

(1)综合决策矩阵

维度权重检测周期策略优先级
设备30%首次加载
网络25%实时监测最高
电量20%每分钟
光线15%每5秒
地理10%每次会话

(2)决策算法示例

function calculateOptimizationScore() {  const weights = {  device: 0.3,  network: 0.25,  battery: 0.2,  light: 0.15,  geo: 0.1  };  const scores = {  device: getDeviceScore(), // 0-1  network: getNetworkScore(),  battery: getBatteryScore(),  light: getLightScore(),  geo: getGeoScore()  };  // 加权总分  const totalScore =   Object.entries(weights).reduce((acc, [key, weight]) =>  acc + (scores[key] * weight), 0);  return totalScore > 0.6 ? 'high' : totalScore > 0.3 ? 'mid' : 'low';  
}  

第二节 遗传算法调参:150+性能参数自动寻优

2.1)核心原理与业务价值

遗传算法(Genetic Algorithm)​ 通过模拟生物进化论中的自然选择机制,对Web性能参数组合进行全局寻优,突破传统网格搜索的维度灾难问题。其核心价值包括:

  • 多维参数优化:支持同时处理150+参数(如缓存策略、资源压缩率、预加载规则等)的联合优化
  • 动态适应场景:根据用户设备、网络环境等实时数据动态调整参数权重
  • 成本效益比:相比人工调参,优化效率提升80倍,硬件成本降低65%
初始化种群
适应度评估
选择优秀个体
交叉生成子代
基因突变
满足终止条件?
输出最优参数集

2.2) 技术实现:从编码到调优

(1) 基因编码方案

将性能参数映射为二进制基因序列,支持动态参数范围:

// 参数基因编码示例  
const geneSchema = [  { name: 'http2MaxStreams', type: 'int', min: 100, max: 1000, bits: 10 },  { name: 'imageQuality', type: 'float', min: 0.3, max: 1.0, bits: 8 },  { name: 'preloadDepth', type: 'enum', options: [1,2,3], bits: 2 }  
];  // 生成随机个体  
function createIndividual() {  return geneSchema.map(param => {  if (param.type === 'int') {  return Math.floor(Math.random() * (param.max - param.min + 1)) + param.min;  }  // 其他类型处理...  });  
}  

(2)适应度函数设计

融合核心性能指标与业务指标:

function calculateFitness(params) {  const perfMetrics = runBenchmark(params);  const businessMetrics = getBusinessData();  // 多目标加权评分  return (  0.4 * (1 - normalize(perfMetrics.LCP, [0, 5000])) +  0.3 * (1 - normalize(perfMetrics.CLS, [0, 0.5])) +  0.2 * normalize(businessMetrics.CTR, [0.01, 0.2]) +  0.1 * normalize(businessMetrics.ConversionRate, [0.02, 0.15])  );  
}  // 归一化函数  
const normalize = (val, [min, max]) => (val - min) / (max - min);  

(3) 进化算子实现

# 交叉操作(多点交叉)  
def crossover(parent1, parent2):  crossover_points = sorted(random.sample(range(len(parent1)), 2))  child = parent1[:crossover_points[0]] + parent2[crossover_points[0]:crossover_points[1]] + parent1[crossover_points[1]:]  return child  # 突变操作(自适应变异率)  
def mutate(individual, mutation_rate):  for i in range(len(individual)):  if random.random() < mutation_rate:  individual[i] = random.uniform(gene_schema[i]['min'], gene_schema[i]['max'])  return individual  

2.3)关键参数与优化效果

(1) 典型优化参数示例

参数类别关键参数示例影响范围
网络层优化http2MaxStreams、TCPFastOpenLCP降低15%-40%
渲染层优化CompositorThreadPriorityCLS改善20%-35%
资源加载策略preloadDepth、lazyLoadThresholdFID减少30%-50%
缓存策略memoryCacheRatio、SWTTL二次加载速度提升3x

(2) 优化效果对比

指标人工调参遗传算法调参提升幅度
LCP中位数2.8s1.9s-32.1%
CLS P900.220.14-36.4%
内存使用峰值1.2GB860MB-28.3%
服务器成本$18,500/月$12,200/月-34.1%
参数迭代周期14天4小时98.8%↓

2.4)实战案例:大规模参数优化

(1) 挑战场景

某视频平台需优化152个参数,包括:

  • 视频码率自适应规则(32个参数)
  • 预加载策略(24个参数)
  • 播放器缓冲区配置(16个参数)
  • CDN调度策略(80个参数)

(2)遗传算法配置

# ga-config.yaml  
population_size: 300  
generations: 100  
crossover_rate: 0.85  
mutation_rate: 0.15  
elitism: 0.1  
fitness_weights:  - name: video_start_time  weight: 0.4  - name: rebuffer_rate  weight: 0.3  - name: cdn_cost  weight: 0.3  

(3)优化效果

00:00 00:01 00:02 00:03 00:04 00:05 00:06 00:07 00:08 首帧时间 首帧时间 卡顿率 卡顿率 初始参数 遗传算法优化后 视频播放优化时间轴

2.5) 挑战与解决方案

(1) 局部最优陷阱

  • 问题:算法过早收敛至次优解

  • 解决方案

    # 自适应多样性维持  
    def maintain_diversity(population):  similarity_threshold = 0.8  for i in range(len(population)):  for j in range(i+1, len(population)):  if cosine_similarity(population[i], population[j]) > similarity_threshold:  population[j] = mutate(population[j], 0.5)  return population  
    

(2) 计算资源消耗

优化策略计算时间减少精度损失
分布式并行计算72%0%
进化代早期剪枝65%<2%
参数重要性采样58%<1%

(3)实时性要求

  • 增量进化算法

    class RealTimeGA {  constructor() {  this.population = [];  this.bestSolution = null;  }  incrementalEvolve(newData) {  this.population = this.population.map(ind =>   this.mutate(this.crossover(ind, this.bestSolution))  );  this.evaluate(newData);  }  
    }  
    

第三节 离线优先架构:Service Worker智能降级方案

3.1) 核心原理与业务价值

离线优先架构通过Service Worker的缓存控制和网络拦截能力,确保用户在弱网或无网状态下仍能访问核心内容,同时根据环境动态降级非关键功能。其技术优势包括:

  • 无缝体验:在网络波动或服务器故障时提供内容回退
  • 智能降级:根据设备电量、网络带宽、用户位置等参数动态调整资源加载策略
  • 性能优化:通过预缓存关键资源减少首屏加载时间(FCP降低40%-60%)
用户访问
网络可用?
请求最新资源
读取缓存
缓存命中?
返回缓存内容
返回降级页面
更新缓存

3.2)技术实现:缓存策略与降级逻辑

(1)Service Worker注册与安装

// 主线程注册Service Worker  
if ('serviceWorker' in navigator) {  navigator.serviceWorker.register('/sw.js', {  scope: '/',  updateViaCache: 'none'  }).then(reg => {  console.log('SW注册成功:', reg);  });  
}  // sw.js - 安装阶段预缓存关键资源  
const CACHE_NAME = 'v1-core-assets';  
const PRE_CACHE_LIST = [  '/styles/core.css',  '/scripts/app.js',  '/offline.html'  
];  self.addEventListener('install', event => {  event.waitUntil(  caches.open(CACHE_NAME)  .then(cache => cache.addAll(PRE_CACHE_LIST))  );  
});  

(2)动态缓存策略

// 网络优先,失败后降级到缓存  
self.addEventListener('fetch', event => {  event.respondWith(  fetch(event.request)  .then(networkResponse => {  // 更新缓存  const responseClone = networkResponse.clone();  caches.open(CACHE_NAME)  .then(cache => cache.put(event.request, responseClone));  return networkResponse;  })  .catch(() => {  // 网络不可用时降级  return caches.match(event.request) ||  caches.match('/offline.html');  })  );  
});  

(3)智能降级决策树

// 基于环境参数选择策略  
function selectCacheStrategy(request) {  const conditions = detectEnvironment();  const url = new URL(request.url);  // 核心路径始终缓存  if (url.pathname.startsWith('/core')) {  return 'cache-first';  }  // 弱网环境降级  if (conditions.networkStatus === 'slow-2g') {  return url.searchParams.has('detail') ?  'cache-only' : 'stale-while-revalidate';  }  // 低电量模式  if (conditions.batteryLevel < 0.2) {  return 'cache-first';  }  return 'network-first';  
}  // 环境检测  
function detectEnvironment() {  return {  networkStatus: navigator.connection.effectiveType,  batteryLevel: navigator.getBattery().then(b => b.level),  isDataSaver: navigator.connection.saveData  };  
}  

3.3)缓存策略矩阵与性能数据

(1)缓存策略对比(表格)

策略名称网络消耗缓存新鲜度适用场景
Network First实时强网环境,需最新数据
Cache First可能陈旧静态资源,低电量模式
Stale-While-Revalidate最终一致平衡体验与实时性的场景
Cache Only固定版本完全离线必需内容

(2)降级效果数

场景完全加载时间降级后时间用户流失率下降
3G网络8.2s2.1s62%
服务器故障超时1.8s78%
低端设备(1GB内存)6.5s3.0s45%

3.4) 实战案例:多级降级方案实现

(1)降级层级定义

网络中断
缓存缺失
完全离线
正常模式
基础功能模式
核心内容模式
静态兜底页

(2)分层降级配置

// 定义降级规则  
const DEGRADE_RULES = [  {  condition: () => navigator.onLine === false,  actions: [  { type: 'redirect', from: '/checkout', to: '/cached-checkout' },  { type: 'replace', selector: 'img', attr: 'src', fallback: 'data-src-lowres' }  ]  },  {  condition: () => navigator.connection.effectiveType === '2g',  actions: [  { type: 'disable', selector: '.recommendations' },  { type: 'inline', url: '/styles/core.css' }  ]  }  
];  // 执行降级  
function applyDegradation() {  DEGRADE_RULES.forEach(rule => {  if (rule.condition()) {  rule.actions.forEach(action => {  switch (action.type) {  case 'redirect':  if (location.pathname === action.from) {  location.href = action.to;  }  break;  case 'replace':  document.querySelectorAll(action.selector).forEach(el => {  el[action.attr] = el.dataset[action.fallback];  });  break;  }  });  }  });  
}  

3.5) 挑战与解决方案

(1)缓存一致性难题

  • 问题:服务端数据更新导致客户端缓存过期

  • 解决方案

    // 动态缓存版本控制  
    const CACHE_VERSION = 'v2';  
    self.addEventListener('activate', event => {  event.waitUntil(  caches.keys().then(keys =>  Promise.all(  keys.filter(key => !key.includes(CACHE_VERSION))  .map(key => caches.delete(key))  )  )  );  
    });  
    

(2)存储空间限制

策略实现方式存储节省
LRU淘汰保留最近使用的资源,删除旧缓存35%-60%
按需缓存仅缓存用户实际访问过的页面40%-75%
差异化压缩WebP图片 + Brotli文本压缩50%-80%

(3)隐私与安全

// 敏感数据保护  
self.addEventListener('fetch', event => {  if (event.request.url.includes('/api/private')) {  event.respondWith(  fetch(event.request).catch(() =>  Response.json({ error: '请连接网络后重试' }, { status: 403 })  )  );  }  
});  

3.6)预测式缓存与边缘计算融合

(1)用户行为预测模型

# 基于LSTM的页面访问预测  
from tensorflow.keras.models import Sequential  
model = Sequential([  LSTM(64, input_shape=(30, 1)),  # 输入30天访问序列  Dense(10, activation='softmax')  # 预测未来10个页面  
])  
model.compile(loss='categorical_crossentropy', optimizer='adam')  

(2) 边缘节点协同缓存

Client EdgeNode Origin 请求/product/123 返回缓存的1.0版本 异步验证缓存 返回304或新内容 下次请求时更新 Client EdgeNode Origin

(3)5G网络下的动态策略

// 根据网络类型调整缓存策略  
function handle5GNetwork() {  if (navigator.connection.effectiveType === '5g') {  // 预加载下一页资源  const links = document.querySelectorAll('a[rel=preload]');  links.forEach(link => {  cache.add(link.href);  });  }  
}  

全篇总结回顾

本文系统构建了现代Web性能优化体系,从图形资源(AVIF/WebP智能适配、WASM解码加速)、渲染引擎(WebGPU加速、OffscreenCanvas多线程)、网络协议(HTTP/3全站部署、QUIC 0-RTT)、框架生态(虚拟列表内存优化、SWC编译提速400%)到监控体系(眼球追踪FSP指标、遗传算法自动调参),形成覆盖“加载-渲染-交互-感知”全链路的优化方案。通过五维环境感知与自适应降级策略,实现设备、网络、场景的动态适配,最终达成LCP≤1.2s、CLS≤0.1、FID≤50ms的极致体验。未来将深度融合AI预测与边缘计算,持续突破Web性能边界。

本系列全片结束了,道阻且长行则将至,与君共勉之,在未来的编程之路上一起努力吧

在这里插入图片描述

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

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

相关文章

PQ以及有关索引的笔记Faiss: The Missing Manual

参考Faiss 索引结构总结&#xff1a; 为了加深记忆&#xff0c;介绍一下Inverted File Index&#xff08;IVF&#xff09;的名字由来&#xff1a; IVF索引的名字源自“倒排文件”&#xff08;Inverted File&#xff09;的概念。在传统的信息检索中&#xff0c;倒排文件是一种索…

win10彻底让图标不显示在工具栏

关闭需要不显示的软件 打开 例此时我关闭了IDEA的显示 如果说只是隐藏&#xff0c;鼠标拖动一个道理 例QQ 如果说全部显示不隐藏

关税核爆72小时!跨境矩阵防御战紧急打响

一、T86崩塌&#xff1a;全球贸易链的至暗时刻 &#xff08;配图&#xff1a;美国海关系统深夜弹出红色警报&#xff09; 5月2日凌晨2:17&#xff0c;杭州某光伏企业的供应链系统突然发出刺耳警报——其价值1800万美元的逆变器模块被划入34%关税清单。这场代号"黑天鹅突…

蓝桥杯Java B组省赛真题题型近6年统计分类

困难题 题号题型分值代码量难度通过率内容2024-F解答1581困难0.12最短路问题 Dijkstra 期望2024-G解答20116困难0.19模拟 暴力 搜索 DFS 剪纸 枚举2023-H解答2070困难0动态规划2022-H解答20109困难0.032022-J解答25141困难0搜索2021-H解答2041困难0.18二分 思维 规律2021-I解答…

【网络流 图论建模 最大权闭合子图】 [六省联考 2017] 寿司餐厅

题目描述&#xff1a; P3749 [六省联考 2017] 寿司餐厅 题目描述 Kiana 最近喜欢到一家非常美味的寿司餐厅用餐。 每天晚上&#xff0c;这家餐厅都会按顺序提供 n n n 种寿司&#xff0c;第 i i i 种寿司有一个代号 a i a_i ai​ 和美味度 d i , i d_{i, i} di,i​&…

前端面试题(三):axios有哪些常用的方法

Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一些常用的方法来处理不同类型的请求。以下是 Axios 中常用的一些方法&#xff1a; 1. axios.get() 用于发送 GET 请求&#xff0c;从服务器获取数据。 axios.get(/api/d…

python match case语法

学习路线&#xff1a;B站 普通的if判断 def if_traffic_light(color):if color red:return Stopelif color yellow:return Slow downelif color green:return Goelse:return Invalid colorprint(if_traffic_light(red)) # Output: Stop print(if_traffic_light(yellow)) …

LLaMA-Factory大模型微调全流程指南

该文档为LLaMA-Factory大模型微调提供了完整的技术指导&#xff0c;涵盖了从环境搭建到模型训练、推理和合并模型的全流程&#xff0c;适用于需要进行大模型预训练和微调的技术人员。 一、docker 容器服务 请参考如下资料制作 docker 容器服务&#xff0c;其中&#xff0c;挂…

【HCIA】静态综合实验练习笔记

实验拓扑图如下&#xff1a; 实验配置思路如下&#xff1a; 1、网段划分、配置IP地址 2、配置DHCP&#xff0c;使客户端获得ip地址 3、配置静态明细路由&#xff0c;内网全网通 4、配置空接口防环 5、配置优先级&#xff0c;实现选路最佳 6、配置缺省路由&#xff0c;实现公网通…

大数据(4.5)Hive聚合函数深度解析:从基础统计到多维聚合的12个生产级技巧

目录 背景一、Hive聚合函数分类与语法1. 基础聚合函数2. 高级聚合函数 二、6大核心场景与案例场景1&#xff1a;基础统计&#xff08;SUM/COUNT&#xff09;场景2&#xff1a;多维聚合&#xff08;GROUPING SETS&#xff09;场景3&#xff1a;层次化聚合&#xff08;ROLLUP&…

RTOS基础 -- NXP M4小核的RPMsg-lite与端点机制回顾

一、RPMsg-lite与端点机制回顾 在RPMsg协议框架中&#xff1a; Endpoint&#xff08;端点&#xff09; 是一个逻辑通信端口&#xff0c;由本地地址&#xff08;local addr&#xff09;、远程地址&#xff08;remote addr&#xff09;和回调函数组成。每个消息都会发送到特定的…

NineData云原生智能数据管理平台新功能发布|2025年3月版

本月发布 15 项更新&#xff0c;其中重点发布 3 项、功能优化 11 项、性能优化 1 项。 重点发布 基础服务 - MFA 多因子认证 新增 MFA 多因子认证&#xff0c;提升账号安全性。系统管理员开启后&#xff0c;所有组织成员需绑定认证器&#xff0c;登录时需输入动态验证码。 数…

DAY 35 leetcode 202--哈希表.快乐数

题号202 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&a…

Maven+Spring实现后端开发

一、前置知识的介绍 1.Spring 轻量级的 DI / IoC 和 AOP 容器的开源框架 容器的开源框架网址&#xff1a;https://spring.io/projects/spring-framework 作用&#xff1a;可简化管理创建和组装对象之间的依赖关系 将controller----->service------->dao层的依赖配置…

解锁界面设计密码,打造极致用户体验

界面设计是对软件、网站、移动应用等产品的用户界面进行设计的过程&#xff0c;旨在为用户提供美观、易用、高效的交互体验。以下是关于界面设计的一些主要方面&#xff1a; 一、设计原则 用户中心原则&#xff1a;以用户为中心&#xff0c;了解用户的需求、期望、行为和习惯…

Joint Receiver Design for Integrated Sensing and Communications

摘要——在本文中&#xff0c;我们研究了集成感知与通信(ISAC)系统的联合接收机设计&#xff0c;其中通信信号和目标回波信号同时被接收和处理&#xff0c;以在两种功能之间实现平衡性能。特别地&#xff0c;我们提出了两种设计方案来解决联合感知和通信问题中的接收信号处理。…

DeepSeek接入飞书多维表格,效率起飞!

今天教大家把DeepSeek接入飞书表格使用。 准备工作&#xff1a;安装并登录飞书&#xff1b;可以准备一些要处理的数据&#xff0c;确保数据格式正确&#xff0c;如 Excel、CSV 等&#xff0c;也可直接存储到飞书多维表格。 创建飞书多维表格&#xff1a;打开飞书&#xff0c;点…

【C语言入门】由浅入深学习指针 【第二期】

目录 1. 指针变量为什么要有类型&#xff1f; 2. 野指针 2.1 未初始化导致的野指针 2.2 指针越界导致的野指针 2.3 如何规避野指针 3. 指针运算 3.1 指针加减整数 3.2 指针减指针 3.3 指针的关系运算 4. 二级指针 5. 指针数组 5.1 如何使用指针数组模拟二维数组 上…

OpenCV 图形API(13)用于执行两个矩阵(或图像)逐元素乘法操作的函数mul()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 描述 计算两个矩阵的每个元素的缩放乘积。 mul函数计算两个矩阵的逐元素乘积&#xff1a; dst ( I ) saturate ( scale ⋅ src1 ( I ) ⋅ src2 ( I ) ) …

人工智能混合编程实践:C++调用封装好的DLL进行图像超分重建

人工智能混合编程实践:C++调用封装好的DLL进行图像超分重建 前言相关介绍C++简介ONNX简介ONNX Runtime 简介**核心特点**DLL 简介**核心特点****创建与使用****应用场景****优点与挑战**图像异常检测简介应用场景前提条件实验环境项目结构C++调用封装好的DLL进行图像超分重建C…