前端图片详解（最全面、最新)

前言

当我们在做前端性能优化的时候，总是会离不开图片，尤其在首次内容绘制（FCP）和最大内容绘制 (LCP)中，图片显得格外关键，而我发现关于图片格式的文章，一般不全，或者是偏旧。

所以这篇文章，我将把我学过的关于图片的知识，分享给大家

首先我们可以通过HTTP Archive: Page Weight来直观看一下页面的加载体积

总的 web 资源的平均请求体积是这样的

图片资源，平均请求体积是这样的

在这里插入图片描述

我们发现图片在所有资源中所占的比重，是非常惊人的，所以我们来系统地学习一下图片

图片格式

理解像素、颜色和二进制的关系

无论是通过扫描仪、数码相机还是其他图像捕捉设备，图片首先被转换成像素（picture elements）的阵列。每个像素代表图片中的一个小区域，并且拥有特定的颜色信息。

在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。

一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。

颜色通常通过红绿蓝（RGB）模型来表示，每个颜色通道可以有从0到255的值。在二进制中，一个字节（byte）有8位，足以表示0到255的任何值（因为2^8 = 256）。因此，每个颜色通道可以用8位二进制数来表示，例如，红色通道的值255可以表示为二进制的11111111。

图片格式

一旦图片被数字化并分配了颜色值，它就可以被保存为不同的文件格式，那么我们常见的图片格式有哪些，使用场景是什么，区别是什么

这里我们首先可以看MDN提供的图像文件类型与格式指南 - Web 媒体技术 | MDN (mozilla.org)

然后我们稍微整理一下，方便大家观看

缩写MIME类型文件扩展名摘要压缩透明度动画
ANPGimage/apng.apng是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少。无损压缩支持支持
AVIFimage/avif.avif由于其性能高，且无需版税，是图像和动画图像的理想选择。与 PNG 或 JPEG 相比，它的压缩效果更好，支持更高的色深、动画帧、透明度等。请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（也就是说，要使用 <picture> 元素）。无损压缩支持支持
GIFimage/gif.gif是简单图像和动画的不错选择。无损和有索引的静态图像首选 PNG，动画序列可考虑 WebP、AVIF 或 APNG。无损压缩支持支持
JEPGimage/jpeg.jpg、.jpeg、.jfif、.pjpeg、.pjp静态图像有损压缩的理想选择（目前最流行）。如果需要更精确地再现图像，则首选 PNG；如果需要更好的再现效果和更高的压缩率，则首选 WebP/AVIF。有损压缩不支持不支持
PNGimage/png.png与 JPEG 相比，PNG 能更精确地再现源图像，或在需要透明的情况下更受青睐。WebP/AVIF 可提供更好的压缩和再现效果，但浏览器的支持比较有限。无损压缩支持不支持
SVGimage/svg+xml.svg矢量图像格式；适用于用户界面元素、图标、图表等，必须以不同尺寸精确绘制。可以在传输过程中使用 HTTP 压缩技术进行压缩，也可以在磁盘上以 .svgz 文件的形式进行压缩。支持支持
WebPimage/webp.webp是静止图像和动画图像的绝佳选择。WebP 的压缩效果比 PNG 或 JPEG 好得多，而且支持更高的色深、动画帧和透明度等。AVIF 的压缩效果稍好，但在浏览器中的支持度不高，而且不支持渐进式渲染。无损和有损压缩支持支持

图片格式详解

我们梳理一下每个格式的优缺点，然后说一下常见的使用场景

这里我更想对比着说，看着更直观

GIF和ANPG

首先GIF诞生于1987年，APNG相对新一些，是Mozilla在2004年推出的

APNG实际上是PNG的拓展（看名字就看出来了），APNG 新增了三种区段:acTL、fcTL、fdAT，这三个区段不打算细讲，可能讲了大家也不能很好理解

那么可能有人会问，如果设备或者软件不支持ANPG只支持PNG，那怎么办呢

答案是不用担心，ANPG第一帧储存方式和普通的PNG一样在IDAT区段中

在压缩上：GIF采用的是LZW（据说之前GIF的LZW算法有专利限制），而APNG采用的是Deflate，经测试，在经过各种优化手段进行压缩后，ANPG的体积是小于GIF的

在颜色和透明度上：GIF最多支持256种颜色，进而导致导致了GIF的画质都比较差，同时GIF虽然也支持透明，但是他只支持将某个颜色标记成透明，也就是说他不支持半透明，只支持完全透明或者完全不透明，所以会出现杂边问题，这个问题我正好在一篇ANPG的文章中看到了，正好解释一下

在这里插入图片描述

而反观ANPG，则是完全不受限制的

那么ANPG的缺点是什么呢，可能只有兼容性了和普适性问题了吧

关于使用场景，其实因具体情况而异，但是二者基本都用在动态显示上

JPEG/JPG

有小伙伴可能一直不清楚JPG和JEPG的区别，这里咱们就稍微说一下

JPEG（全称Joint Photographic Experts Group）和JPG（全称Joint Photographic Experts Group format）实际上是指同一个图像格式，没有本质区别。"JPEG"通常是指这个格式的组织和标准，而"JPG"则是这种格式的文件扩展名。

JPG的优点较为明显：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住60%的品质。同时JPG格式以24位存储单个图，可呈现多达1600万种颜色，这也是压缩后，我们肉眼依旧难以察觉的原因

同时JPG/JEPG兼容性非常好，所以经常在网页背景图片，轮播图，广告和宣传材料等显眼位置看到它的身影

但是它也有较为明显缺点，有损压缩，在压缩过程中会丢失一部分图像数据。虽然这种损失对于肉眼可能不明显，但在多次编辑和保存后，图像质量的下降可能会变得更加明显，以及在处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显

同时它不适合用于存储简单图形、图标或文字，因为这些类型的图像通常不需要复杂的颜色信息，而JPG的压缩方式可能会导致这些类型的图像模糊

再者它还不支持透明度处理，所以就需要配合别的格式进行使用

PNG-8 与 PNG-24

我们主要用PNG来呈现小的Logo、颜色简单且对比强烈的图片或背景等

说到PNG，基本上就是说PNG-8与PNG-24，说PNG-32的较少那我们就来说说二者的区别

首先PNG后面的8、24数字，意思是指该格式最多可以索引和存储的颜色值。

PNG-8：最多存储256种颜色，也就是2^8 = 256，2的8次方。

PNG-24最终的，意思是最多存储1600万种颜色，即2^24 = 16 777216种颜色，也就是2的8次方。

再者，二者的透明度不同

PNG-8：仅支持1位的布尔透明通道，不支持半透明效果

PNG-24：支持alpha半透明过渡效果，也就是可以完美呈现从不透明到完全透明的渐变过渡。

最后，二者的压缩率不同，这也导致最终的体积不同，PNG-24最终的体积是比PNG-8要大出不少的,所以PNG-24不适合存储照片等颜色较多、细节丰富的图片，多用于存储需要保留透明度、颜色单一的图片，比如LOGO、图片水印等文件应使用PNG-24存储。

SVG

SVG和上面的JPG和PNG等有些不同，SVG-可缩放矢量图形，为什么它叫做矢量图形呢

这是因为它的工作原理与传统的位图图形（如JPEG、PNG等）截然不同。矢量图形的核心特点在于它使用数学公式和几何形状来定义图像，而不是像素点的集合。

缩放性：SVG图像是基于数学公式的，这意味着它们可以在任何尺寸下无损放大或缩小。无论图像被缩放到多大或多小，都能保持清晰和锐利，不会出现像素化或模糊，1 张SVG足以适配n种分辨率。

小文件尺寸：SVG文件通常比位图文件小，因为它们不需要存储每个像素的颜色信息。相反，它们只存储定义图形的数学方程式和属性，这使得文件尺寸更加紧凑。

文本和编码性：SVG文件是文本文件，使用XML格式编写。这意味着SVG图像可以被编辑器打开和编辑，就像编辑文本文件一样。可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，也可以把对图形的描述写入以 .svg 为后缀的独立文件，这种文本基础的特性也使得SVG文件可以被搜索、索引和脚本化。

交互性：SVG支持CSS和JavaScript，这意味着可以给SVG元素添加样式和行为，从而创建动态和交互式的图形。例如，可以响应用户的操作，如鼠标悬停、点击等事件。

例如：假设我们有一个简单的SVG图标，我们想在鼠标悬停时改变它的颜色

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue" class="hoverable"><title>Hover over me!</title></circle>
</svg><style>.hoverable:hover {fill: red; /* 鼠标悬停时变为红色 */cursor: pointer; /* 鼠标悬停时变为手指形状 */}
</style>

又或者：通过JavaScript为同一个SVG圆添加点击事件，使其在被点击时改变大小

<svg width="100" height="100" id="mysvg"><circle cx="50" cy="50" r="40" fill="blue" class="clickable"><title>Click on me!</title></circle>
</svg><script>var svg = document.getElementById('mysvg');var circle = svg.querySelector('.clickable');circle.addEventListener('click', function() {var currentRadius = parseInt(circle.getAttribute('r'));var newRadius = (currentRadius == 40) ? 60 : 40; // 切换半径大小circle.setAttribute('r', newRadius);});
</script>

再或者：将SVG写入独立文件后引入HTML:

<img src="文件名.svg" alt="">

以上就是简单地举例，目的是为了体现出SVG的灵活性

在实际开发中，我们更多用到的是后者。很多情况下设计师会给到我们 SVG 文件，就算没有设计师，我们还有非常好用的 iconfont-阿里巴巴矢量图标库。对于矢量图，我们无须深究过多，只需要对其核心特性有所掌握、日后在应用时做到有迹可循即可。(这段是修言说的，我觉得很好，就摘抄了~)

但是我在使用的时候，也发现了一些SVG的问题：虽然SVG通常比位图图像小，但在描述的矢量元素几何复杂度较高时，基于文本的SVG文件可能比二进制编码的栅格化图像要大（但是的确不能算缺点，只能说不是特别适用）

Base64

Base64其实不是一种图片格式，而是一种编码方法，Base64是为了减少加载网页图片时对服务器的请求次数，从而提升网页性能，它可以将二进制数据（如图片）转换为ASCII字符串。但是会增加页面的总体大小，因为Base64编码后的字符串通常比原始的二进制数据要大（这也是Base64不适用于大图,适用于小图的原因）

这种感觉有点类似于雪碧图，但是原理不一样，雪碧图是一种将多个小图片合并到一张大图片中的技术，通过CSS的background-image和background-position属性来引用大图中的特定小图片，这样减少了HTTP请求次数，提升了网页加载速度，并且可以提前加载可能需要用到的小图片，减少页面闪烁

二者更像是相辅相成的关系，它们都可以用于优化网页性能，但选择哪一种技术取决于具体的应用场景和需求

WebP和AVIF

二者都是10年后诞生的，我们称之为现代图片格式，它的优点明显，都能覆盖传统格式（JPG、PNG等）的动态图片、无损压缩等功能和特性，传统格式特性较为单一，现代格式支持动态图片、无损压缩等特性更多，并且体积变小，相较于jpg格式，webp格式的图片一般能减少10%左右的体积，avif格式更是能减少40%以上的文件体积。

缺点基本就是兼容性（其实WebP还好了，早些年的确兼容性的确不行，现在基本都支持了），这里我们二者进行对比

工作原理上：

  • WebP：基于VP8编解码器，使用有损和无损压缩方法的组合来实现更小的文件大小，有损压缩与 JPEG 相似，但增加了优化功能，从而提高了图像质量。它的无损压缩使用一种称为预测编码的技术，该技术可预测相邻像素的值，并只对实际值和预测值之间的差值进行编码。
  • AVIF：使用AV1编解码器，在不影响图像质量的情况下减小文件大小，具有内部预测（根据邻近块预测块的内容）和自适应量化（根据图像的复杂程度调整压缩级别）的功能，既是最先进的又是免版税的。

色彩上：

  • WebP：支持8位和10位色深
  • AVIF：支持8位和10位以及12位色深，可见AVIF这个后起之秀，在色彩准确度和鲜艳度方面更胜一筹

这样看来AVIF尤其适用于高质量图像（如照片这种的），而如果需要的是一种通用的图像格式，并能获得广泛的浏览器支持，那么 WebP 就是您的不二之选

用现代图片格式优化性能以及体验

我们经过上面的学习发现，如果能使用webp，avif等现代格式，对解决前端应用图片类资源体积较大，加载耗时较长、CDN开销较高的痛点会有明显优化。那么我们具体怎么做呢？

回答是：<picture>元素

我们看一下MDN对于picture 元素的定义吧

在这里插入图片描述

看起来很懵，什么意思呢

<picture>元素允许同时引入多个图片格式的子元素，并根据浏览器的兼容性，按先后顺序、自适应加载其中1个格式的图片，实现所有用户根据自身兼容性，获取到最优图片格式。

我写一段代码，大家就明白了

<picture><!-- WebP格式的图片，具有无损和有损压缩 --><source srcset="image.webp" type="image/webp"><!-- AVIF格式的图片，具有更高的压缩率 --><source srcset="image.avif" type="image/avif"><!-- JPEG格式的图片，作为备选 --><source srcset="image.jpg" type="image/jpeg"><!-- 如果浏览器不支持上述任何格式，就使用这个img标签作为最后的备选 --><img src="fallback-image.jpg" alt="Description of Image">
</picture>
  • <picture>元素是一个容器元素，元素中包含了2个<source>元素和1个<img>元素。
  • 每个<source>元素都有一个srcset属性，它指定了图片的URL，以及一个type属性，它描述了图片的MIME类型。浏览器会根据这些信息和自身的兼容性来决定加载哪个图片。
  • 如果所有的<source>元素都不被支持，那么<img>元素将作为最后的备选方案。这是一个包含JPEG图片（别的格式也可以，选兼容性好的即可）的<img>标签，相当于一个兜底操作

通过这种方式，可以确保所有用户都能加载到他们设备支持的最佳格式的图片，从而提供更好的网页体验和性能，而大家也不要小瞧这种方式，现在其实是很常用的。

结尾

本文带着大家过一遍常见的图片格式，包括内容，优缺点等，希望带着大家了解关于图片的具体内容，其实本来是想着把关于图片的优化都写在这一篇的，奈何实在是过于散乱，配合这篇基础文章显得不合适，所以只介绍了一种较为简单，还能承接上文的<picture>元素的方式给大家

其实关于什么雪碧图之类的网上已有全面的教程，所以不打算写了，而关于什么懒加载的实际上是交互上的优化内容，所以也不会去写

在之后的文章中会接着写一下关于图片的知识点，图片优化实战方面的内容，比如写一下辅助函数配合CDN啦，压缩图片具体操作啦等内容，蟹蟹大家支持~

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

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

相关文章

内存地产风云录：malloc、free、calloc、realloc演绎动态内存世界的楼盘开发与交易大戏

内存地产风云录：malloc、free、calloc、realloc演绎动态内存世界的楼盘开发与交易大戏

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 在这个波澜壮阔的内存地产世界中&#xff0c;malloc、free、calloc和realloc四位主角&#xff0c;共同演绎着一场场精彩绝伦的楼盘开…
阅读更多...
Linux的网口名字的命名规则

Linux的网口名字的命名规则

在工作中&#xff0c;偶尔看到有些机器的网口名字是以ethX命令&#xff0c;有些则以enpXsX这种名字命名。网上的资料说的都不太明白,资料也无据可查&#xff0c;很难让人信服。于是决定自己查了下官方的资料和源码&#xff0c;把这些搞清楚。 官方文档&#xff1a;Predictable…
阅读更多...
直播视频传输处理技术

直播视频传输处理技术

流程 在视频直播场景中&#xff0c;从拍摄到手机用户接收的整个过程涉及多个技术环节&#xff1a; 视频采集&#xff1a; 视频源通常来自摄像机或智能手机摄像头&#xff0c;通过捕捉连续的画面生成原始视频信号。 编码压缩&#xff1a; 为了减少数据量以适应网络传输&#x…
阅读更多...
【40分钟速成智能风控10】风控大数据体系2

【40分钟速成智能风控10】风控大数据体系2

目录 ​编辑 特征工程方法 统计量 离散化 时间周期趋势 交叉项 隐性特征 用户画像 特征工程方法 在模型圈内有这么一句俗话&#xff0c;“特征决定了模型的上限&#xff0c;而算法只是逼近这个上限”&#xff0c;由此可见特征工程在风控建模中的重要程度。特征工程的本…
阅读更多...
最大连续1的个数 III

最大连续1的个数 III

题目链接 最大连续1的个数 III 题目描述 注意点 nums[i] 不是 0 就是 10 < k < nums.length 解答思路 创建一个滑动窗口&#xff0c;保证窗口内翻转0的个数始终不大于k&#xff0c;不断移动窗口的右边界&#xff0c;有以下三种情况&#xff1a; 当右边界的值为1&…
阅读更多...
模组硬件通用｜ESD静电释放注意事项

模组硬件通用｜ESD静电释放注意事项

当我们在进行接插件操作或者电路板调试时&#xff0c;有时会出现接口损坏或者电路板上的某个IC芯片失效的情况&#xff0c;原因可能仅仅是手触摸到了IC芯片&#xff0c;ESD(Electro-Static discharge 静电释放)导致了损坏。模组作为一个集成电路板&#xff0c;内部含有不同型号…
阅读更多...
hertzbeat监控工具部署

hertzbeat监控工具部署

目录 参考简介部署docker-compose.ymldocker安装使用portanier部署访问地址默认用户密码 配置SpringBoot程序配置基础信息新增阈值规则新增通知策略 参考 家庭私有云上 Docker 部署 hertzbeat&#xff0c;好用的监控告警系统 官网 简介 hertzbeat是一个拥有强大自定义监控能…
阅读更多...
RabbitMQ消息模型之Topic消息模型

RabbitMQ消息模型之Topic消息模型

Topic消费模型 * 通配符模型 * 生产者必须指定完整且准确的路由key * 消费者可以使用通配符 * *&#xff1a;可以替代一级的任意字符 add.* > add.user add.goods * #&#xff1a;可以替代多级的任意字符 add.# &…
阅读更多...
lua基本语法

lua基本语法

Lua语法入门 初识lua vi hello.lua print("hello,lua") lua hello.lua 变量和循环 变量 循环 条件控制、函数 条件控制
阅读更多...
USB端口

USB端口

winx&#xff0c;打开设备管理器 名称解释 HS-USB 分类全称传输速率版本超速SSsuper-speed最大速率5Gbps、10Gbps、20GbpsUSB3.0~USB3.2高速HShigh-speed25Mbps-400 Mbps &#xff08;最大480 Mbps&#xff09;USB2.0全速FSfull-speed500Kbps-10Mbps&#xff08;最大12Mbps&…
阅读更多...
软考 — 系统架构设计师 - 嵌入式真题

软考 — 系统架构设计师 - 嵌入式真题

问题1&#xff1a; 可靠度表示系统在规定条件下&#xff0c;规定的时间内不发生失效的概率。 失效率表示系统运行到此时从未出现失效的情况下&#xff0c;单位时间内系统出现失效的概率 问题 2&#xff1a; 动态冗余又称为主动冗余&#xff0c;通过故障检测&#xff0c;故障定…
阅读更多...
SAP 计划策略82简介

SAP 计划策略82简介

前面的文章中我们已经测试了很多才策略，10、11、40、50、70、60、63 80策略。 本文将重点说明ATO模式下82策略的使用场景，计划策略82是SAP提供的另一种基于按单生产思想的计划策略，由客户的需求来直接驱动直接生产，是一个按单生产的场景。 1、首先我们先看下系统后台82策略…
阅读更多...
回溯算法2s总结

回溯算法2s总结

8.回溯算法 回溯算法理论基础 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。回溯是递归的副产品&#xff0c;只要有递归就会有回溯。 回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案 回溯法解决的问题 回溯法&#xff0c;一…
阅读更多...
MySQL数据导出导出的三种办法（13/16）

MySQL数据导出导出的三种办法（13/16）

数据导入导出 基本概述 目前常用的有3中数据导入与导出方法&#xff1a; 使用mysqldump工具&#xff1a; 优点&#xff1a; 简单易用&#xff0c;只需一条命令即可完成数据导出。可以导出表结构和数据&#xff0c;方便完整备份。支持过滤条件&#xff0c;可以选择导出部分数据…
阅读更多...
VsCode 安装Jupyter Notebook

VsCode 安装Jupyter Notebook

VsCode 安装Jupyter Notebook 安装 1、打开 VSCode 编辑器&#xff0c;点击界面左端的【扩展】栏&#xff1b; 2、在【搜索框】中输入python&#xff0c;点击第一个Python&#xff0c;检查是否已经安装 python 插件&#xff0c;没安装的点击安装&#xff1b;已安装的继续第3步…
阅读更多...
ASUS华硕灵耀Pro14笔记本AMD锐龙版M7400QC,M7600QA原厂Win11系统工厂包下载

ASUS华硕灵耀Pro14笔记本AMD锐龙版M7400QC,M7600QA原厂Win11系统工厂包下载

恢复华硕灵耀14PRO出厂开箱状态预装OEM系统Windows11工厂模式安装包&#xff0c;带Recovery恢复还原功能 适用型号&#xff1a; M7400QC、M7400QE、M7400QEB M7600QC、M7600QE、M7600QA、M7600QCB 链接&#xff1a;https://pan.baidu.com/s/1dIGRAKJQLQt_JcKbQWFxJg?pwdbn…
阅读更多...
GD32 HID键盘矩阵键盘发送数据时，一直发送数据问题处理

GD32 HID键盘矩阵键盘发送数据时，一直发送数据问题处理

这个问题找了两三天，开始并不认为是示例程序的问题，只是感觉是自己代码问题。 这个解决流程大概是： 先调好矩阵键盘=> 调用发送函数。 就是因为调用时，一直发送数据，我也在按键抬起做了操作，始终不行。 最后，发现时示例代码中有个 空闲中断 引起的。 udev->reg…
阅读更多...
英伟达高性能芯片供货周期缩短到2-3个月，今年GPU不再紧缺？

英伟达高性能芯片供货周期缩短到2-3个月，今年GPU不再紧缺？

戴尔台湾地区总经理Terence Liao近日称&#xff0c;英伟达高性能 AI GPU的交付周期在过去几个月中已从3-4个月缩短到仅2-3个月&#xff0c;进入2024年以来交货等待时间一直在不短缩短&#xff0c;目前的2-3个月已经是英伟达高性能GPU最短的交货期。 英伟达公司正在不断努力提高…
阅读更多...
使用easyexcel读取excel并生成sql语句

使用easyexcel读取excel并生成sql语句

1、引入pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM…
阅读更多...
【IR-SDE】Image Restoration SDE项目演示运行app.py

【IR-SDE】Image Restoration SDE项目演示运行app.py

背景&#xff1a; code:GitHub - Algolzw/image-restoration-sde: Image Restoration with Mean-Reverting Stochastic Differential Equations, ICML 2023. Winning solution of the NTIRE 2023 Image Shadow Removal Challenge. paper: Official PyTorch Implementations o…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023