前端开发之性能优化

本文章 对各大学习技术论坛知识点,进行总结、归纳自用学习,共勉🙏

文章目录

  • 1. [CDN](https://www.bootcdn.cn/)
  • 2.懒加载
  • 3.缓存
  • 4.图片压缩
  • 5.图片分割
  • 6.sprite
  • 7.Code Splitting
  • 8.gzip
  • 9.GPU加速
  • 10.Ajax
  • 11.Tree Shaking
  • 12.Resource Hints

1. CDN

CDN(内容分发网络)是一种基于互联网的分布式服务,旨在通过将网站内容分发至全球多个节点,来提高用户访问速度和可靠性。广泛适用于各类静态和动态内容,包括网页文件、图片、视频、应用程序等。CDN的核心目标是减少数据传输距离和网络拥堵,从而加快内容加载时间,提升用户体验。

  • 内容缓存:将网站的静态资源复制并存储在全球各地的CDN节点上,用户请求时,CDN会将内容从距离用户最近的节点提供,减少延迟。
  • 负载均衡:通过智能调度算法,CDN能够根据网络状况、服务器负载等因素,将用户请求分配给最适合的节点,平衡各服务器的访问压力。
  • 故障容错:当某个CDN节点出现问题时,系统会自动将流量导向其他健康节点,确保服务的连续性和稳定性,减少单点故障的影响。
  • 动态内容加速:除了静态资源,现代CDN还支持动态内容的加速,通过优化网络路径和减少往返时间,提高如API请求、数据库查询等动态内容的响应速度。、

CDN的使用场景:

  • 使用第三方的CDN服务:使用开源一些项目、插件、组件,即用即CDN服务
  • 静态资源缓存加速网站性能:对于任何网站而言,将静态资源JavaScript、CSS、图片等托管于CDN上,可以显著加速页面加载速度。由于这些资源往往不经常变化,通过CDN分发,用户能从距离最近的节点加载数据,减少延迟,提高用户体验。同时,将整个项目部署在CDN上,可以实现快速、简便的一键部署,便于维护和版本更新。
  • 直播服务的流媒体传输:在直播场景中,CDN扮演着至关重要的角色。由于直播内容是实时、连续的数据流,传统的静态资源缓存策略不再适用。CDN针对流媒体设计了特殊的传输机制,通常采用主动推送技术,确保数据连续、低延迟地传输到用户端。这种方式避免了因回源请求大流量数据造成的网络拥塞和延迟,确保了直播画面的流畅与即时性,提升了观众的观看体验。
  • 大文件下载和软件分发:对于需要提供大文件下载的场景,如游戏客户端、软件更新包、大型文档等,CDN可以有效分担主服务器压力,提供快速下载通道,确保用户在全球各地都能获得高速下载体验。
  • 电商与广告平台:在电商节或促销活动期间,网站面临巨大流量冲击,CDN能够有效分散访问压力,保证页面快速加载,提升转化率。同时,广告平台通过CDN快速分发广告素材,确保广告加载迅速,提升广告展示效率。

2.懒加载

懒加载也是一种性能优化技术,特别适合图片或多媒体内容丰富的页面,通过延迟加载那些暂时不在视窗内(即用户当前屏幕看不到的内容)的资源,来减少初次加载时的请求数量和数据量,从而加快页面的初始加载速度,提升用户体验。
👉图片懒加载

3.缓存

缓存作为提升系统性能的关键技术之一,其核心思想在于通过存储最近或经常访问的数据副本,减少对原始数据源的访问次数,从而达到加速数据读取、降低系统响应时间和负载的目的。耳缓存原理就是更快读写的存储介质+减少IO+减少CPU计算=性能优化。而性能优化的第一定律就是:优先考虑使用缓存
缓存的主要手段有:浏览器缓存、CDN、反向代理、本地缓存、分布式缓存、数据库缓存。

4.图片压缩

图片压缩对于优化网站性能、加快页面加载速度至关重要,特别是在移动设备和有限带宽的网络环境下。
用工具开压:

  • Squoosh:这是一个开源的在线图片压缩工具,支持各种格式(包括WebP、JPEG、PNG等),特点是用户界面友好,可以实时预览压缩效果,并允许手动调整压缩级别,直至达到满意的效果。

  • CompressJPEG和 CompressPNG :这两个网站分别专注于JPEG和PNG格式的图片压缩,操作简单,上传图片后即可快速压缩,适合一次性处理少量图片。

  • ImageOptim(Mac)/ FileOptimizer(Windows):这两款是桌面端的图片优化工具,支持拖拽操作,可以批量处理图片,自动应用最佳压缩算法,无需用户手动调整。

  • Adobe Photoshop:ps图像处理软件,具备强大的图片压缩和导出功能。您可以使用其"Save for Web"或"Export As"功能来优化图片大小,同时保持较好的质量。

  • 再不济就找UI压缩

5.图片分割

比如一张效果图,UI又开始乱叫不愿意压缩,它喵的,真是小刀拉屁股,那就割。
在这里插入图片描述

思路:

  1. 使用工具分割图片: 首先,您需要使用像Photoshop、GIMP这样的图像编辑软件,或者自动化脚本(如Python的PIL库)将大图切割成多个小图。假设我们决定将图片分割为4个部分,每个部分大小适中,建议不超过100KB
  2. 命名与组织: 分割后,确保每个图片文件命名有序,便于后续引用,例如:image_part_1.png, image_part_2.png, image_part_3.png, image_part_4.png

接下来,我们将使用HTMLCSS来展示如何将这些图片按原顺序拼接起来。请注意,为了防止图片加载时导致布局错乱,我们为每个图片分配了固定高度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片分割示例</title>
<style>.image-container {display: flex;flex-wrap: nowrap;width: /* 原图片总宽度 */;height: /* 原图片总高度的一半,因为是两行两列布局 */;}.image-part {width: /* 原图片宽度的一半 */;height: /* 原图片高度的一半 */;object-fit: cover; /* 保持图片比例并填充容器 */}
</style>
</head>
<body><div class="image-container"><img src="image_part_1.png" class="image-part" alt="图片分割1"><img src="image_part_2.png" class="image-part" alt="图片分割2"><img src="image_part_3.png" class="image-part" alt="图片分割3"><img src="image_part_4.png" class="image-part" alt="图片分割4">
</div></body>
</html>

请根据实际情况调整CSS中的宽度和高度值,以匹配原始图片的尺寸和分割后图片的实际大小。同时,确保所有分割图片的路径是正确的。

6.sprite

精灵图(Sprite),在网页开发中确实扮演着重要角色,尤其是在优化网站性能方面。
通过将多个小图标合并成一张大图,减少HTTP请求、减轻服务器负担、加快页面渲染、优化缓存利用及减少带宽消耗,成为了提高网页性能的有效手段。尽管随着HTTP/2协议的普及和新的技术如SVG图标、Icon Fonts以及CSS Sprites inlining的出现,精灵图的使用场景有所减少,但在特定场景下,尤其是针对小图标和背景图的优化,它仍然是一个有价值的解决方案

7.Code Splitting

Webpack代码分割是优化前端应用加载速度的关键技术之一。Webpack 4 及以上版本默认开启了动态代码拆分,它会自动将较大的代码块分离成不同的chunk(或称为bundle),以实现按需加载,进而提升用户体验。
Webpack 4 默认分包策略 不进行任何特殊配置,Webpack 4 就能执行以下操作:

  • 入口文件依赖:所有直接或间接由入口文件引用的模块会被打包进main.js(或其他命名的主输出文件)。
  • 第三方库分离:大于30KB的第三方库(如echarts、xlsx等)会被单独打包成chunk,这样它们可以被缓存并在不同页面间复用,减少重复下载。
  • 异步加载组件:使用动态导入(如import())的模块会自动生成独立的chunk,实现懒加载。
  • 并发限制:初始加载时,Webpack会控制并发请求数量不超过一定限制,以避免过多请求导致的性能问题。

splitChunks示例细化分包更改配置:

splitChunks({cacheGroups: {vendors: {name: `chunk-vendors`,test: /[\\/]node_modules[\\/]/,priority: -10,chunks: 'initial',},dll: {name: `chunk-dll`,test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,priority: 15,chunks: 'all',reuseExistingChunk: true},common: {name: `chunk-common`,minChunks: 2,priority: -20,chunks: 'all',reuseExistingChunk: true},}
})

按需加载
即使在未使用Webpack 4的项目中,也可以通过一些策略实现按需加载,例如使用动态导入(import()表达式)、CommonsChunkPlugin(在Webpack 4之前的版本中)或手动分割代码到不同的entry点,以此来减小初始加载包的大小,提升应用加载速度。👉 webpack如何使用按需加载

8.gzip

gzip是一种广泛应用于Web服务器和客户端之间的数据压缩传输技术。通过在服务器端对响应内容进行压缩,然后由客户端解压,可以显著减少通过网络传输的数据量,从而加快页面加载速度,降低带宽消耗。

http {# 开启gzip压缩gzip on;# 设置用于压缩的缓冲区数量和大小,这里是32个4K的缓冲区gzip_buffers 32 4K;# 设置压缩级别,范围为1-9,数字越大压缩程度越高,消耗CPU资源也越多。这里设置为6,是比较均衡的设置。gzip_comp_level 6;# 设置最小压缩长度,只有响应内容长度大于此值时才会进行压缩。这里设置为100字节。gzip_min_length 100;# 指定可以进行gzip压缩的MIME类型。这里包含了常见的文本和脚本类型。gzip_types application/javascript text/css text/xml;# 禁用特定版本的IE浏览器的gzip压缩支持,避免一些老版本IE的兼容性问题。gzip_disable "MSIE [1-6]\.";# 启用`Vary: Accept-Encoding`响应头,让代理服务器知道缓存需要区分是否支持gzip的请求。gzip_vary on;
}

这段配置放置在Nginx的配置文件(通常是nginx.conf)中的http内,它告诉Nginx对符合规则的HTTP响应启用gzip压缩。通过调整这些参数,可以优化压缩效果以适应不同的服务器环境和性能需求。例如,gzip_comp_level可以根据服务器的处理能力适当调整,以平衡压缩效率和CPU负载;gzip_types可以按需添加更多的MIME类型以覆盖更多种类的资源。

启用gzip压缩后,务必确保服务器和客户端(浏览器)都支持并开启了gzip解压功能,这样才能充分利用这一优化措施。

9.GPU加速

利用GPU(图形处理器)来渲染复杂的CSS动画和其他图形密集型任务可以显著提升网页性能。现代浏览器通过硬件加速技术,能够将部分图形处理工作从CPU转移到GPU上,从而减轻CPU负担,尤其是在处理大量像素操作和动画时更为高效。
绝大部分主流浏览器都支持GPU加速,通过某些CSS属性来提示浏览器对特定元素使用GPU加速,尽管直接的3D变换(如rotate3d, translate3d)会自然触发硬件加速,但有时候即便不需要实际的3D效果,也可以“欺骗”浏览器开启GPU加速,比如使用:

.element {transform: translateZ(0);/* 或者 */transform: translate3d(0,0,0);
}

这两个属性都能暗示浏览器为该元素创建一个新的复合图层,并尝试使用GPU进行渲染。注意,translateZ(0)实际上并没有改变元素的位置,但它足以触发硬件加速机制。
总之,GPU加速是提升网页动态效果和交互流畅度的有效手段,但关键在于理解和合理应用,确保在提升用户体验的同时,保持良好的性能表现。

10.Ajax

Ajax 可以利用浏览器的缓存机制来提高响应速度和提升用户体验,但这主要取决于请求的类型(GET vs POST)以及服务器端设置的缓存控制头信息。下面是一些关键点:

  • 默认缓存行为:浏览器通常会对GET类型的Ajax请求进行一定程度的缓存,尤其是当请求的URL包含相同的查询字符串时。这意味着,如果发送了一个之前已经请求过的、具有相同URLGET请求,浏览器可能会直接从本地缓存中返回结果,而不是再次向服务器发起请求。这对于获取静态数据或很少变化的数据非常有用。
  • 控制缓存:服务器可以通过HTTP响应头来控制GET请求的缓存行为,比如使用Cache-Control、Expires等头部字段来指定资源的最大缓存时间或缓存策略。开发人员也可以通过JavaScript设置Ajax请求的cache选项来覆盖浏览器的默认行为。例如,在jQuery中,可以设置cache: false来强制每次请求都从服务器获取新数据。
  • 对于POST请求,浏览器默认行为一般是不进行缓存的,因为POST通常用于提交数据到服务器,这些数据应该是有状态的,每次请求应当产生不同的结果。尽管可以通过特定的HTTP头来指示缓存POST请求,但这并不常见,且可能违反RESTful原则和用户的预期

使用缓存的策略:

  1. 明确缓存策略:根据数据的性质(是否经常更新,是否敏感)来决定是否启用缓存以及缓存多久。
  2. 版本控制:为避免因缓存导致用户无法获取到最新数据,可以在请求的URL中加入版本号或时间戳作为查询参数,即使内容未变,URL的变化也会促使浏览器重新请求。
  3. 使用ETag或Last-Modified:这些HTTP头部可以用来验证缓存数据的有效性,只有当服务器上的数据发生改变时,才需要重新下载。

总之Ajax确实可以通过利用浏览器缓存来提高页面响应速度,但重要的是要理解不同HTTP方法的缓存特性,并根据实际应用场景合理配置缓存策略,以平衡数据的实时性与性能优化的需求。

11.Tree Shaking

摇树(Tree Shaking)是现代前端打包工具(如Webpack、Rollup等)中的一种优化技术,旨在消除未使用的代码,以减小最终生成的JavaScript文件体积。这个术语形象地比喻为从代码“树”中摇掉未被触碰的“叶子”(即未引用的代码),留下仅包含实际使用功能的最小化代码。
摇树优化主要依赖于ES模块(ESM,ECMAScript Modules)的静态导入导出特性。在ESM中,由于导入导出关系在编译时就可以确定,打包工具可以分析哪些导出的模块或函数没有被其他模块直接或间接引用,进而将这部分未被引用的代码从最终的打包产物中移除。

  • 使用ES模块: 确保项目使用ES模块(.mjs在package.json中设置"type": "module")。
  • 明确的导出: 第三方库或你自己的代码需要使用明确的导出(如export)而非默认导出(export default),因为明确导出更便于工具静态分析。
  • 生产环境配置: 在Webpack 4及以上版本,摇树优化默认开启,但通常在生产环境配置中通过设置如mode: 'production'来确保最佳优化。
  • 模块化第三方库: 使用支持摇树优化的第三方库,这些库需要使用ES模块且正确标记了侧效应(side-effects)。未标记有副作用的库可能会导致无效的摇树优化。

在Webpack配置中,开启摇树优化通常意味着:

// webpack.config.js
module.exports = {mode: 'production', // 生产模式自动开启摇树优化module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/, // 排除某些大型库或不希望进行摇树优化的模块use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},],},
};
  • 不是所有场景都能完美实现摇树优化。例如,使用动态导入(import())或在代码中存在全局副作用(如修改全局变量或执行副作用的IIFE)时,可能会影响摇树的效果。
  • 对于一些库来说,即便使用了明确的导入方式,如果没有正确的package.json配置(比如缺少"sideEffects"字段),也可能导致摇树不彻底。

总之,摇树是一种强大的优化手段,但它的效果依赖于代码的编写方式和配置的合理性。合理利用这一技术,可以显著减小应用的体积,加快加载速度,提升用户体验。

12.Resource Hints

Resource Hints 是一种强大的性能优化策略,它允许开发者通过提供有关页面加载所需资源的线索,帮助浏览器提前加载或建立连接,从而减少资源加载延迟,提升用户体验

  1. <link rel="dns-prefetch"> :预先解析DNS查询,减少域名解析时间。当浏览器遇到这个提示时,会立即开始DNS查找,即使该资源还未被请求。适用于那些即将被使用的外部资源的域名。
  2. <link rel="preconnect">:在实际请求资源之前,预先建立与目标服务器的连接(包括DNS查找、TCP握手、TLS协商等)。这对于需要跨域的资源尤其有用,因为它可以减少往返时间。
  3. <link rel="prefetch">:提示浏览器预加载可能在未来需要的资源,但优先级低于当前页面需要的资源。这适用于可能在用户导航至其他页面时用到的资源,比如预加载下一页的内容。
  4. <link rel="preload">:指示浏览器立即加载指定资源,且优先级较高,保证这些资源在页面需要时能够立即可用。适用于关键路径资源,如首屏渲染所需的CSSJavaScript文件。
  5. <link rel="subresource">:与preload相似,用来指示浏览器提前加载对当前页面渲染至关重要的子资源。不过,subresource已被废弃,推荐使用preload代替。
  6. <link rel="prerender">:预渲染整个页面,将其加载到内存中并准备渲染,但不直接展示给用户。当用户导航到该页面时,可以实现瞬间加载。适用于用户很可能会访问的下一个页面。
  7. 本地存储(如localStorage):虽然严格来说不属于Resource Hints的范畴,但通过本地存储(如localStorage或IndexedDB)缓存资源信息或数据,可以在用户再次访问时快速恢复,达到类似预加载的效果。

通过合理使用这些Resource Hints,开发者能够显著提升网页的加载速度和响应性,但需注意不要过度预加载,以免增加不必要的网络流量和占用用户设备资源。优化时,应结合用户行为分析和性能监控数据,做出最合适的决策。

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

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

相关文章

AI大底座核心平台:百度百舸AI异构计算平台(AI IaaS)与AI中台(AI PaaS)

AI大底座正是整合了以上端到端全要素技术能力&#xff0c;将基础架构IaaS与应用平台PaaS能力深度融合&#xff0c;面向企业和产业AI生 产与应用的全生命周期提供完整解决方案。 百舸AI异构计算平台是AI IaaS层的核心平台&#xff0c;包括AI计算、AI存储、AI加速、AI容器四层套件…

Mysql使用中的性能优化——搭建Mysql的监测服务

大纲 环境安装配置Mysql安装设置root密码新增远程访问账户修改绑定地址重启 新增 MySQL Server Exporter 用户 安装启动mysqld_exporter安装启动新增配置启动 安装启动Prometheus创建用户下载并解压修改配置启动 安装启动grafana安装启动 测试参考资料 抛开场景和数据&#xff…

【ARM】PK51-如何添加芯片型号的方法

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 遇到打开工程提示没有该芯片设备提示如何解决。 2、 问题场景 客户发来一个工程文件&#xff0c;打开后软件提示没有发现该芯片设备提示。 图 1 3、软硬件环境 1&#xff09;、软件版本&#xff1a;keil μvision…

搜索与图论:八皇后问题

搜索与图论&#xff1a;八皇后问题 题目描述参考代码 题目描述 输入样例 4输出样例 .Q.. ...Q Q... ..Q...Q. Q... ...Q .Q..参考代码 #include <iostream>using namespace std;const int N 20;int n; char g[N][N]; bool col[N], dg[N], udg[N];void dfs(int u) {//…

【机器学习】机器学习与大模型在人工智能领域的融合应用与性能优化新探索

文章目录 引言机器学习与大模型的基本概念机器学习概述监督学习无监督学习强化学习 大模型概述GPT-3BERTResNetTransformer 机器学习与大模型的融合应用自然语言处理文本生成文本分类机器翻译 图像识别自动驾驶医学影像分析 语音识别智能助手语音转文字 大模型性能优化的新探索…

C++之类与类之间的关系

1、UML 2、继承&#xff08;泛化&#xff09; 3、关联 一个类对象与另一个类对象存在一个固定关系。他们的关系不是暂时的&#xff0c;而是固定的。 一个类对象作为另一个类对象的成员。例如订单&#xff0c;是用户的一个成员。用户关联订单。 4、聚合 聚合其实是特殊的一种…

spring boot +Scheduled 动态定时任务配置

通常情况下我们设定的定时任务都是固定的,有时候需要我们动态的配置定时任务,下面看代码 import com.mybatisflex.core.query.QueryWrapper; import com.yzsec.dsg.web.modules.exportpwd.entity.ExportPwd; import com.yzsec.dsg.web.modules.exportpwd.entity.table.Export…

PbootCms微信小程序官网模版/企业官网/社交电商官网/网络工作室/软件公司官网

在数字化时代&#xff0c;企业网站已成为吸引潜在客户、提升企业形象、和扩大品牌影响力的必备工具。因此&#xff0c;一个优秀的企业网站模板显得尤为重要。 企业官网的内容框架通常都包含企业形象、产品或服务类型、信息展示等部分&#xff0c;设计师需要借助和企业形象契合…

mysql的binlog占用大量磁盘空间的解决方法

查看当前日志保存天数&#xff1a; mysql> show variables like %expire_logs_days%; ------------------------- | Variable_name | Value | ------------------------- | expire_logs_days | 0 | ------------------------- 1 row in set (0.08 sec) 默认是0&…

【Linux 网络】高级 IO -- 详解

一、IO 的基本概念 I/O&#xff08;input/output&#xff09;也就是输入和输出&#xff0c;在冯诺依曼体系结构当中&#xff0c;将数据从输入设备拷贝到内存就叫作输入&#xff0c;将数据从内存拷贝到输出设备就叫作输出。 对文件进行的读写操作本质就是一种 IO&#xff0c;文…

安防视频融合汇聚平台EasyCVR如何实现视频画面自定义标签?

安防视频融合汇聚平台EasyCVR兼容性强&#xff0c;可支持Windows系统、Linux系统以及国产化操作系统等&#xff0c;平台既具备传统安防视频监控的能力&#xff0c;也具备接入AI智能分析的能力&#xff0c;可拓展性强、视频能力灵活&#xff0c;能对外分发RTMP、RTSP、HTTP-FLV、…

港中文斯坦福提出SD加速模型PCM,一步即可生成图像和视频,可直接与SD1.5,SDXL,AnimateLCM结合!

又有新的SD加速模型可以用了&#xff0c;PCM解决了原来LCM模型的各种问题。并且对 AnimateLCM 也做了优化&#xff0c;用PCM直接生成动画也可以保证质量了。 PCM从这三个角度说明了LCM的设计空间是有限的并很好地解决了这些限制。 PCM主要改善了三个LCM原有的问题&#xff1a;…

Spring Cloud工程添加子模块打包后文件为war包而非jar包

Spring Cloud工程添加子模块打包后文件为war包而非jar包 Spring Cloud子模块打出的包通常是JAR包而非WAR包&#xff0c;这是因为Spring Cloud主要基于Spring Boot构建&#xff0c;而Spring Boot默认打包为可执行JAR包。然而&#xff0c;如果遇到了Spring Cloud子模块打成了WAR…

俯视角2D游戏_02 子弹对象池

[!NOTE] 对象池 应用场合:这种做法常用于子弹这种会大量产生的对象 &#xff0c;目的是减少性能的损耗 基本思路:产生的对象是有限的&#xff0c;并且加入到"对象池"的数组中不进行销毁&#xff0c;当需要使用时&#xff0c;再从对象池中提取对象循环利用&#xff0c…

碰撞问题和单调栈的结合-735. 小行星碰撞【有小坑】

题目链接及描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/asteroid-collision/description/?envTypestudy-plan…

Vue——子级向父级使用props传递数据(函数)

文章目录 前言原理案例效果演示 前言 看到这个标题&#xff0c;相信很多人会说我&#xff0c;你之前博客写的父级向子级中传递数据使用的是props&#xff0c;然后说的子级向父级传递数据则是用的$emit。 并且还说了对于String、数组Array&#xff0c;只能是父级使用props传递…

C++ 11【右值引用】

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;C修炼之路⏪   &#x1f69a;代码仓库:C高阶&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C知识   &#x1f51d;&#x1f51d; 1.C 11 简介 目录 1.C 11 简介 2. 统一的列表…

C语言小例程8/100

题目&#xff1a;输出特殊图案&#xff0c;请在c环境中运行&#xff0c;看一看 程序分析&#xff1a;字符共有256个。不同字符&#xff0c;图形不一样。 #include<stdio.h> int main() {char a176,b219;printf("%c%c%c%c%c\n",b,a,a,a,b);printf("%c%c%c…

Kafka 如何基于 KRaft 实现集群最终一致性协调

01 架构概览 Zookeeper 提供了配置服务、分布式同步、命名服务、Leader 选举和集群管理等功能&#xff0c;在大数据时代的开始很多开源产品都依赖 Zookeeper 来构建&#xff0c;Apache Kafka 也不例外。但是随着 Kafka 功能的演进和应用的场景越来越多&#xff1a; 基于 Zoo…

济南适宜地提取

题目: 网上下载中国的DEM、土地利用地图(1980、2000、2015年的)和一张最新济南市行政区划 图(要求:莱芜市并入济南后的区划图); 2.网上下载中国2015年年平均降水空间插值数据;3..网上下载中国2015年年平均气温空间插值数据; (注:以上数据可到资源环境科学与数据中心下载http…