一张图片胜过千言万语，图片是每个网页不可或缺的一部分。但它们通常也占下载字节数的大部分。借助自适应设计，不仅布局可以根据设备特性进行调整，图片也可以。
自适应设计意味着，不仅我们的布局可以根据设备特性而变化，内容也可以变化。例如，在高分辨率 (2x) 显示屏上，高分辨率图形可确保清晰度。当浏览器宽度为 800 像素时，宽度为 50% 的图片可能效果很好，但在狭窄的手机上会占用过多空间，并且在缩小以适应较小的屏幕时需要相同的带宽开销。
艺术指导
在其他情况下，可能需要对图片进行更大幅度的更改：更改比例、裁剪，甚至替换整个图片。在这种情况下，更改图片通常称为艺术指导。如需查看更多示例，请参阅 responsiveimages.org/demos/。
自适应图片
您知道吗？加载网页所需的字节数中，平均有 60% 以上是图片。
在本课程中，您将学习如何在现代网络上处理图片，以便图片在任何设备上都能呈现出色的效果并快速加载。
在此过程中，您将掌握一系列技能和技巧，以便将自适应图片顺利集成到开发工作流中。学完本课程后，您将能够开发可适应不同视口大小和使用场景并做出响应的图片。
这是 Udacity 提供的免费课程
标记中的图片
img 元素功能强大，可下载、解码和呈现内容，并且现代浏览器支持多种图片格式。添加可在各种设备上正常显示的图片与添加可在桌面设备上正常显示的图片并无不同，只需进行一些细微调整即可打造良好的体验。
摘要
- 为图片使用相对尺寸，以防止图片意外溢出容器。
- 如果您想根据设备特性（也称为艺术指导）指定不同的图片，请使用
picture元素。 - 在
img元素中使用srcset和x描述符，以便在从不同密度中进行选择时，向浏览器提示要使用的最佳图片。 - 如果您的网页只有一两张图片，并且这些图片未在网站的其他位置使用，请考虑使用内嵌图片来减少文件请求。
为图片使用相对尺寸
请务必在指定图片宽度时使用相对单位，以防止图片意外溢出视口。例如，width: 50%; 会使图片宽度为包含元素的 50%（而不是视口的 50% 或实际像素大小的 50%）。
由于 CSS 允许内容溢出其容器，因此您可能需要使用 max-width: 100% 来防止图片和其他内容溢出。例如：
img, embed, object, video {
max-width: 100%;
}
请务必通过 img 元素上的 alt 属性提供有意义的说明；这些说明可为屏幕阅读器和其他辅助技术提供背景信息，从而提高网站的无障碍性。
使用 srcset 增强 img，以支持高 DPI 设备
srcset 属性增强了 img 元素的行为，让您能够轻松地为不同的设备特性提供多个图片文件。与 CSS 原生的 image-set
CSS 函数类似，srcset 允许浏览器根据设备的特性选择最佳图片，例如在 2x 显示屏上使用 2x 图片，未来还可能在带宽受限的网络上在 2x 设备上使用 1x 图片。
<img src="photo.png" srcset="photo@2x.png 2x" ...>
在不支持 srcset 的浏览器上，浏览器只会使用 src 属性指定的默认图片文件。因此，请务必始终包含可在任何设备上显示的 1x 图片，无论设备功能如何。如果支持 srcset，系统会在发出任何请求之前解析以英文逗号分隔的图片/条件列表，并且仅下载和显示最合适的图片。
虽然条件可以包含从像素密度到宽度和高度的所有内容，但目前只有像素密度得到了很好的支持。为了兼顾当前行为和未来功能，请坚持在属性中提供 2 倍图片。
使用 picture 在自适应图片中进行艺术指导
如需根据设备特征更改图片（也称为艺术指导），请使用 picture 元素。picture 元素定义了一种声明式解决方案，可根据不同的特征（例如设备尺寸、设备分辨率、屏幕方向等）提供多个版本的图片。
如果图片来源存在多种密度，或者自适应设计要求在某些类型的屏幕上显示略有不同的图片，请使用 picture 元素。与 video 元素类似，可以包含多个 source 元素，从而可以根据媒体查询或图片格式指定不同的图片文件。
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
在上述示例中，如果浏览器宽度至少为 800 像素，则使用 head.jpg 或 head-2x.jpg，具体取决于设备分辨率。如果浏览器宽度介于 450 像素和 800 像素之间，则使用 head-small.jpg 或 head-small-
2x.jpg，具体取决于设备分辨率。对于宽度小于 450 像素的屏幕，以及不支持 picture 元素的向后兼容性，浏览器会改为呈现 img 元素，因此应始终包含该元素。
相对尺寸图片
如果图片的最终尺寸未知，则可能很难为图片来源指定密度描述符。对于跨越浏览器比例宽度且具有流动性的图片（取决于浏览器的大小），情况尤其如此。
您可以添加宽度描述符以及图片元素的大小，从而指定每张所提供图片的大小，而不是提供固定的图片大小和密度，这样浏览器就可以自动计算有效像素密度并选择要下载的最佳图片。
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
上面的示例会呈现一个宽度为视口宽度一半 (sizes="50vw") 的图片，并允许浏览器根据其宽度和设备像素比选择正确的图片，而不管浏览器窗口有多大。例如，下表显示了浏览器会选择哪张图片：
| 浏览器宽度 | 设备像素比 | 已使用图片 | 有效分辨率 |
|---|---|---|---|
| 400px | 1 | 200.jpg |
1x |
| 400px | 2 | 400.jpg |
2 倍 |
| 320px | 2 | 400.jpg |
2.5 倍 |
| 600px | 2 | 800.jpg |
2.67 倍 |
| 640px | 3 | 1000.jpg |
3.125 倍 |
| 1100px | 1 | 800.png |
1.45x |
考虑自适应图片中的断点
在许多情况下，图片大小可能会根据网站的布局断点而变化。例如，在小屏幕上，您可能希望图片占据视口的整个宽度，而在大屏幕上，图片应该只占据一小部分。
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
在上面的示例中，sizes 属性使用多个媒体查询来指定图片的大小。当浏览器宽度大于 600px 时，图片为视口宽度的 25%；当浏览器宽度介于 500px 与 600px 之间时，图片为视口宽度的 50%；当浏览器宽度小于 500px 时，图片为全宽。
使商品图片可展开
客户希望看到他们要购买的商品。在零售网站上，用户希望能够查看商品的高分辨率特写，以便更好地了解细节，如果无法做到这一点，研究参与者会感到沮丧。
J. Crew 网站。 消失的叠加层表示图片可点按，点按后会提供放大后的图片，其中会显示精细的细节。
其他图片技术
压缩图片
压缩图片技术会向所有设备提供高度压缩的 2x 图片，无论设备的实际功能如何。根据图片类型和压缩级别，图片质量可能看起来没有变化，但文件大小会显著减小。
JavaScript 图片替换
JavaScript 图片替换会检查设备的功能并“执行正确的操作”。您可以通过 window.devicePixelRatio 确定设备像素比，获取屏幕宽度和高度，甚至可能通过 navigator.connection 或发出虚假请求来执行一些网络连接嗅探。收集完所有这些信息后，您就可以决定要加载哪个图片。
这种方法的一大缺点是，使用 JavaScript 意味着您至少要等到预读解析器完成解析后，才能加载图片。这意味着，在 pageload 事件触发之前，图片甚至不会开始下载。此外，浏览器很可能会同时下载 1x 和 2x 图片，从而导致页面重量增加。
内嵌图片：光栅和矢量
创建和存储图片的方式有两种，它们有着根本的不同，这会影响您如何以自适应方式部署图片。
光栅图片 - 例如照片和其他图片，表示为由各个颜色点组成的网格。光栅图片可能来自相机或扫描仪，也可能是使用 HTML 画布元素创建的。PNG、JPEG 和 WebP 等格式用于存储光栅图片。
矢量图像（例如徽标和线条艺术）被定义为一组曲线、线条、形状、填充颜色和渐变。矢量图像可以使用 Adobe Illustrator 或 Inkscape 等程序创建，也可以使用 SVG 等矢量格式以代码形式手写。
SVG
SVG 可以在网页中添加自适应矢量图形。与光栅文件格式相比，矢量文件格式的优势在于浏览器可以呈现任意大小的矢量图像。矢量格式描述了图片的几何图形，即图片如何由线条、曲线和颜色等构成。另一方面，光栅格式仅包含有关各个颜色点的信息，因此浏览器在缩放时必须猜测如何填充空白。
下面是同一图片的两个版本：左侧是 PNG 图片，右侧是 SVG 图片。SVG 在任何尺寸下看起来都很棒，而旁边的 PNG 在较大显示尺寸下开始变得模糊。
如果您想减少网页发出的文件请求数量，可以使用 SVG 或数据 URI 格式以内嵌方式对图片进行编码。如果您查看此页面的源代码，会发现下面的两个徽标都是以内嵌方式声明的：一个数据 URI 和一个 SVG。
SVG 在移动设备和桌面设备上都得到了很好的支持，并且优化工具可以显著减小 SVG 大小。以下两个内嵌 SVG 徽标看起来完全相同，但一个约为 3KB，另一个仅为 2KB：
数据 URI
数据 URI 提供了一种内嵌图片等文件的方式，可以通过将 img 元素的 src 设置为采用 Base64 编码的字符串来实现，格式如下：
<img src="data:image/svg+xml;base64,[data]">
上述 HTML5 徽标的代码开头部分如下所示：
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
（完整版长度超过 5000 个字符！）
您可以使用拖放工具（例如 jpillora.com/base64-encoder）将图片等二进制文件转换为数据 URI。与 SVG 一样，移动和桌面浏览器也很好地支持数据 URI。
在 CSS 中内嵌
数据 URI 和 SVG 也可以内嵌在 CSS 中，并且在移动设备和桌面设备上都受支持。以下是两个外观相同的图片，它们在 CSS 中作为背景图片实现；一个是数据 URI，一个是 SVG：
内嵌的优缺点
图片的内嵌代码可能很冗长，尤其是数据 URI，那么为什么要使用它呢？为了减少 HTTP 请求！SVG 和数据 URI 可让您通过一个请求检索整个网页，包括图片、CSS 和 JavaScript。
缺点：
- 在移动设备上，数据 URI 的显示速度可能明显慢于来自外部
src的图片。 - 数据 URI 可能会导致 HTML 请求的大小大幅增加。
- 它们会增加标记和工作流程的复杂性。
- 数据 URI 格式比二进制格式大得多（最多 30%），因此不会减小总下载大小。
- 数据 URI 无法缓存，因此必须在每个使用它们的网页上下载。
- IE 6 和 7 不支持这些功能，IE8 仅提供不完整的支持。
- 使用 HTTP/2 后，减少资源请求数量将不再是优先考虑的事项。
与所有自适应广告一样，您需要测试哪种组合效果最好。使用开发者工具测量下载文件大小、请求数量和总延迟时间。数据 URI 有时对光栅图片很有用，例如，在仅有一两张照片且这些照片未在其他地方使用的首页上。如果您需要内嵌矢量图像，SVG 是更好的选择。
CSS 中的图片
CSS background 属性是一个强大的工具，可用于向元素添加复杂图片，从而轻松添加多张图片并使其重复，等等。与媒体查询结合使用时，background 属性会变得更加强大，可根据屏幕分辨率、视口大小等条件加载图片。
摘要
- 根据显示屏的特性（考虑屏幕尺寸、设备分辨率和页面布局）使用最合适的图片。
- 使用
min-resolution和-webkit-min-device-pixel-ratio的媒体查询，在 CSS 中更改background-image属性，以支持高 DPI 显示屏。 - 使用 srcset 在标记中提供高分辨率图片以及 1x 图片。
- 在使用 JavaScript 图片替换技术或向低分辨率设备提供高度压缩的高分辨率图片时，请考虑性能成本。
使用媒体查询进行条件式图片加载或艺术指导
媒体查询不仅会影响网页布局，您还可以使用它们根据视口宽度有条件地加载图片或提供艺术指导。
例如，在以下示例中，在较小的屏幕上，系统只会下载 small.png 并将其应用于内容 div，而在较大的屏幕上，系统会将 background-image: url(body.png) 应用于正文，并将 background-image:
url(large.png) 应用于内容 div。
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
使用 image-set 提供高分辨率图片
CSS 中的 image-set() 函数增强了 background 属性的行为，让您可以轻松地为不同的设备特性提供多个图片文件。这样，浏览器就可以根据设备的特征选择最佳图片，例如在 2x 显示屏上使用 2x 图片，或在带宽受限的网络上在 2x 设备上使用 1x 图片。
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
除了加载正确的图片之外，浏览器还会相应地缩放图片。换句话说，浏览器会假设 2x 图片的大小是 1x 图片的两倍，因此会将 2x 图片缩小 2 倍，以便图片在页面上看起来大小相同。
对 image-set() 的支持仍处于起步阶段，目前仅在 Chrome 和 Safari 中受支持，且带有 -webkit 供应商前缀。请务必添加后备图片，以防 image-set() 不受支持；例如：
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
上述代码会在支持 image-set 的浏览器中加载适当的素材资源；否则，它会回退到 1x 素材资源。显而易见的注意事项是，虽然 image-set() 浏览器支持率较低，但大多数浏览器都会获取 1x 资源。
使用媒体查询提供高分辨率图片或艺术指导
媒体查询可以根据设备像素比创建规则，从而可以为 2x 显示屏和 1x 显示屏指定不同的图片。
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome、Firefox 和 Opera 都支持标准 (min-resolution: 2dppx)，而 Safari 和 Android 浏览器都需要使用不带 dppx 单位的旧版供应商前缀语法。请注意，只有当设备与媒体查询匹配时，系统才会加载这些样式，并且您必须为基本情况指定样式。
这还有一个好处，就是如果浏览器不支持特定分辨率的媒体查询，也能确保呈现内容。
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
您还可以使用 min-width 语法，根据视口大小显示备用图片。此方法的优势在于，如果媒体查询不匹配，则不会下载图片。例如，仅当浏览器宽度为 500 像素或更大时，才会下载 bg.png 并将其应用于 body：
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
使用 SVG 格式的图标
向网页添加图标时，请尽可能使用 SVG 图标，或在某些情况下使用 Unicode 字符。
摘要
- 使用 SVG 或 Unicode 作为图标，而不是光栅图片。
将简单图标替换为 Unicode
许多字体都支持各种 Unicode 字形，这些字形可用来代替图片。与图片不同，Unicode 字体可以很好地缩放，无论在屏幕上显示得多么小或多么大，看起来都很美观。
除了常规字符集之外，Unicode 还可能包含箭头 (←)、数学运算符 (√)、几何形状 (★)、控制图片 (▶)、乐谱 (♬)、希腊字母 (Ω) 甚至国际象棋棋子 (♞) 的符号。
添加 Unicode 字符的方式与添加命名实体的方式相同：&#XXXX，其中 XXXX 表示 Unicode 字符编号。例如：
You're a super ★
您是超级 ★
将复杂图标替换为 SVG
对于更复杂的图标要求，SVG 图标通常轻量、易于使用，并且可以使用 CSS 设置样式。与光栅图片相比，SVG 具有许多优势：
- 它们是可无限缩放的矢量图形。
- CSS 效果（例如颜色、阴影、透明度和动画）非常简单。
- SVG 图片可以直接内嵌在文档中。
- 它们具有语义。
- 它们通过适当的属性提供更好的无障碍功能。
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
谨慎使用图标字体
图标字体很受欢迎，也易于使用，但与 SVG 图标相比，它们有一些缺点：
- 它们是矢量图形，可以无限缩放，但可能会经过抗锯齿处理，导致图标不如预期那样清晰。
- CSS 样式设置功能有限。
- 根据行高、字母间距等，像素完美定位可能很难。
- 它们不具有语义，并且可能难以与屏幕阅读器或其他辅助技术搭配使用。
- 除非正确限定范围，否则即使仅使用一小部分可用图标，也可能会导致文件过大。
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
有数百种免费和付费图标字体可供选择，包括 Font Awesome、Pictos 和 Glyphicons。
请务必在额外的 HTTP 请求和文件大小的权重与对图标的需求之间取得平衡。例如，如果您只需要少量图标，最好使用图片或图片精灵。
优化图片以提升性能
图片通常会占用大部分下载字节，并且通常会占用网页上的大量视觉空间。因此，优化图片通常可以为您的网站节省大量字节并提升性能：浏览器需要下载的字节越少，对客户端带宽的竞争就越小，浏览器下载和显示所有资源的速度就越快。
摘要
- 不要随意选择图片格式，而应了解可用的不同格式，并使用最合适的格式。
- 在工作流中添加图片优化和压缩工具，以减小文件大小。
- 通过将常用图片放入图片精灵中，减少 HTTP 请求的数量。
- 为了缩短初始网页加载时间并降低初始页面重量，请考虑仅在图片滚动到视图中后才加载图片。
选择合适的广告格式
需要考虑两种类型的图像：矢量图像和光栅图片。对于光栅图片，您还需要选择正确的压缩格式，例如：GIF、PNG、JPG。
光栅图片（例如照片和其他图片）由单个点或像素组成的网格表示。光栅图片通常来自相机或扫描仪，也可以使用 canvas 元素在浏览器中创建。随着图片尺寸变大，文件大小也会随之增加。当缩放到大于原始尺寸时，光栅图片会变得模糊，因为浏览器需要猜测如何填充缺失的像素。
矢量图像（例如徽标和线条艺术）由一组曲线、线条、形状和填充颜色定义。矢量图像是使用 Adobe Illustrator 或 Inkscape 等程序创建的，并保存为矢量格式，例如 SVG。由于矢量图像基于简单的基元构建，因此可以缩放，而不会造成任何质量损失或文件大小变化。
选择适当的格式时，请务必同时考虑图片的来源（光栅或矢量）和内容（颜色、动画、文本等）。没有哪种格式适合所有图片类型，每种格式都有其优缺点。
在选择合适的格式时，请先参考以下准则：
- 对摄影图片使用
JPG。 - 对矢量图和纯色图形（例如徽标和线条图）使用
SVG。 如果矢量图不可用，请尝试使用WebP或PNG。 - 请使用
PNG，而不是GIF，因为前者支持更多颜色，并提供更好的压缩率。 - 对于较长的动画，请考虑使用
<video>，它可提供更好的图片质量，并让用户能够控制播放。
缩减文件大小
您可以在保存图片后对其进行“后期处理”，从而大幅缩减图片文件大小。有许多工具可用于图片压缩，包括有损和无损、在线、GUI、命令行。最好尽可能尝试自动执行图片优化，使其成为工作流的内置功能。
有多种工具可对 JPG 和 PNG 文件执行进一步的无损压缩，而不会影响图片质量。对于 JPG，请尝试使用 jpegtran 或 jpegoptim（仅适用于 Linux；使用 --strip-all 选项运行）。对于 PNG，请尝试使用 OptiPNG 或 PNGOUT。
使用图片精灵
CSS 贴图定位是一种将多张图片合并为一张“雪碧图”的技术。然后，您可以通过为元素（雪碧图）指定背景图片以及偏移量来显示正确的部分，从而使用各个图片。
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
精灵图的优势在于，它既能减少获取多张图片所需的下载次数，又能实现缓存。
考虑延迟加载
延迟加载可以根据需要或在主要内容加载和呈现完毕后加载图片，从而显著加快包含许多非首屏图片的长网页的加载速度。除了提升性能之外，使用延迟加载还可以打造无限滚动体验。
在创建无限滚动页面时要小心，因为内容是在可见时才加载的，搜索引擎可能永远看不到这些内容。此外，由于新内容会不断加载，因此用户永远无法看到页脚，即使他们想在页脚中查找信息。
完全避免使用图片
有时，最好的图片实际上根本不是图片。尽可能使用浏览器的原生功能来提供相同或类似的功能。浏览器会生成以前需要图片才能呈现的视觉效果。这意味着浏览器不再需要下载单独的图片文件，从而避免了图片缩放不当的问题。您可以使用 Unicode 或特殊图标字体来呈现图标。
将文本放在标记中，而不是嵌入到图片中
请尽可能以文本形式呈现文本，而不是将其嵌入到图片中。例如，使用图片作为标题或将联系信息（如电话号码或地址）直接放入图片中，会导致用户无法复制和粘贴这些信息，屏幕阅读器无法读取这些信息，并且这些信息不具备自适应性。而应将文本放在标记中，并根据需要使用网页字体来实现所需的样式。
使用 CSS 替换图片
现代浏览器可以使用 CSS 功能来创建以前需要图片才能实现的样式。例如：可以使用 background 属性创建复杂的渐变，可以使用 box-shadow 创建阴影，还可以使用 border-radius 属性添加圆角。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
请注意，使用这些技术确实需要渲染周期，这在移动设备上可能非常重要。如果过度使用，您将失去可能已经获得的任何好处，并且可能会降低性能。