考研全年集训营(考研全年集训营一般多少钱)

考研全年集训营，考研全年集训营一般多少钱

现代图片性能优化及体验优化指南

七月在线-深度学习集训营第三期2022

download：https://www.51xuebc.com/thread-514-1-1.html

计划三：CSS 配合 image-set 语法
image-set 属于 CSS background 中的一种语法，image-set() 函数为设备提供最适宜的图像分辨率，它提供一组图像选项，每个选项都有一个相关的 DPR 声明，阅读器将从当选择最合适设备的图像停止设置。
什么意义呢，来看看代码：
.img {
/* 不支持 image-set 的阅读器*/
background-image: url(‘../photo@2x.png’);
/* 支持 image-set 的阅读器*/
background-image: image-set(
url(‘./photo@2x.png’) 2x,
url(‘./photo@3x.png’) 3x
);
}
这样一看，作用应该很明晰了。关于支持 image-set 语法的阅读器：
假如其设备对应的 DPR 为 2，会选取这条 url(‘./photo@2x.png’) 2x 记载，也就是最终生效的 URL 是 ‘./photo@2x.png’；
假如其设备对应的 DPR 为 3，会选取这条 url(‘./photo@3x.png’) 3x 记载，也就是最终生效的 URL 是 ‘./photo@3x.png’；
其中的 2x，3x 就是用于匹配 DRP的。
运用 image-set 的一些痛点与媒体查询计划相似。代码量与兼容性语法，而且难以匹配一切状况。
计划四：srcset 配合 1x 2x 像素密度描绘符
简单来说，srcset 能够依据不同的 dpr 拉取对应尺寸的图片：

srcset=’images/illustration-small.png 1x,
images/illustration-big.png 2x’

上面 srcset 里的 1x，2x 表示 像素密度描绘符，表示
当屏幕的 dpr = 1 时，运用 images/illustration-small.png 这张图
当屏幕的 dpr = 2 时，运用 images/illustration-big.png 这张图
假如不支持 srcset 语法，src=’illustration-small.png’ 将会是最终的兜底计划
计划五：srcset 属性配合 sizes 属性 w 宽度描绘符
上面 1x，2x 的写法比拟容易承受易于了解。
但是，上述 3 种计划都存在统一的问题，只思索了 DPR，但是疏忽了响应性规划的复杂性与屏幕的多样性。
因而，标准还推出了一种计划 — srcset 属性配合 sizes 属性 w 宽度描绘符。
srcset 属性还有一个 w 宽度描绘符，配合 sizes 属性一同运用，能够掩盖更多的面。
sizes 属性怎样了解呢？它定义图像元素在不同的视口宽度时，可能的大小值。
以下面这段代码为例子：

sizes = “(min-width: 600px) 600px, 300px”
src = “photo.png”
srcset = “photo@1x.png 300w,
photo@2x.png 600w,
photo@3x.png 1200w,
解析一下：
sizes = “(min-width: 600px) 600px, 300px” 的意义是：
假如屏幕当前的 CSS 像素宽度大于或者等于 600px，则图片的 CSS 宽度为 600px
反之，则图片的 CSS 宽度为 300px
也就是 sizes 属性声明了在不同宽度下图片的 CSS 宽度表现。这里能够了解为，大屏幕下图片宽度为 600px，小屏幕下图片宽度为 300px。
需求留意的是，这里大屏、小屏下图片详细的宽度表现，还是需求借助媒体查询代码，经由 CSS 完成的
srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w 里面的 300w，600w，900w 叫宽度描绘符。
那么，怎样肯定当前场景会选取哪张图片呢？
当前屏幕 dpr = 2 ，CSS 宽度为 375px。
当前屏幕 CSS 宽度为 375px，则图片 CSS 宽度为 300px。分别用上述 3 个宽度描绘符的数值除以 300。
300 / 300 = 1
600 / 300 = 2
1200 / 300 = 4
上面计算得到的 1、 2、 4 即是算出的有效的像素密度，换算成和 x 描绘符等价的值 。这里 600w 算出的 2 即满足 dpr = 2 的状况，选择此张图。
当前屏幕 dpr = 3 ，CSS 宽度为 414px。
当前屏幕 CSS 宽度为 414px，则图片 CSS 宽度仍为 300px。再计算一次：
300 / 300 = 1
600 / 300 = 2
1200 / 300 = 4
由于 dpr = 3，2 曾经不满足了，则此时会选择 1200w 这张图。
当前屏幕 dpr = 1 ，CSS 宽度为 1920px。
当前屏幕 CSS 宽度为 1920px，则图片 CSS 宽度变为了 600px。再计算一次：
300 / 600 = .5
600 / 600 = 1
1200 / 600 = 2
由于 dpr = 1，所以此时会选择 600w 对应的图片。
此计划的意义在于思索到了响应性规划的复杂性与屏幕的多样性，应用上述规则，能够一次适配 PC 端大屏幕和挪动端高清屏，一箭多雕。

嗯，总结一下，在完成响应式图像时，我们同时运用 srcset 和 sizes 属性。它们的作用是：
srcset：定义多个不同宽度的图像源，让阅读器在 HTML 解析期间选择最适宜的图像源
sizes：定义图像元素在不同的视口宽度时，可能的大小值
有了这些属性后，阅读器就会依据 srcset/size 来创立一个分辨率切换器的响应式图片，能够在不同的分辨率的状况下，提供相同尺寸的图像，或者在不同的视图大小的状况下，提供不同尺寸大小的图像。
模块总结
本章节一共罗列了 5 种完成响应式图片，适配不同屏幕大小，不同 DPR 的方式，它们分别是：
无脑多倍图的方式
DRP 媒体查询
CSS Background 中的运用 image-set
srcset 配合 1x 2x 像素密度描绘符
srcset 属性配合 sizes 属性 w 宽度描绘符
合理运用它们，能够有效的为不同屏幕，提供最为恰当的图片资源，在保证用户体验的同时，尽可能俭省带宽。
它们各有优缺陷，能够依据本人实践的业务场景，选取适宜相对本钱最低的计划，并且恰当的配合 Autoprefixer 以及一些 PostCSS 等工具，简化代码量。
图片的宽高比、裁剪与缩放
OK，下面进入到我们的第三个模块，图片的宽高比、裁剪与缩放。我们会引见 4 个新的特性：
aspect-ratio
object-fit
object-position
image-rendering
运用 aspect-ratio 防止规划偏移
很多时分，只能运用固定尺寸大小的图片，我们的规划可能是这样：
对应的规划：

• 图片描绘

ul li img {
width: 150px;
当然，万一假定后端接口呈现一张非正常大小的图片，上述不加维护的规划就会出问题：
所以关于图片，我们总是倡议同时写上高和宽，防止由于图片尺寸错误带来的规划问题：
ul li img {
width: 150px;
height: 100px;
同时，给 标签同时写上高宽，能够在图片未加载之前提早占住位置，防止图片从未加载状态到渲染完成状态高宽变化惹起的重排问题。
当然，到今天，我们还能够运用 aspect-ratio 设定图片的高宽比。
aspect-ratio CSS 属性为容器规则了一个等待的宽高比，这个宽高比能够用来计算自动尺寸以及为其他规划函数效劳。
像是上面的代码，我们就能够交换成：
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
当然，有的时分，我们的规划是响应式动态在变化的，容器的宽度也是不肯定的，因而，有了 aspect-ratio 之后，我们的写法就能够更佳的舒适。
ul li img {
width: 100%;
aspect-ratio: 3 / 2;
这里，容器基于 Flex 弹性规划或者响应式规划，其宽度是不固定的，但是图片的宽高比是固定的，运用 aspect-ratio: 3 / 2 就能十分好的适配这种状况。
我们借助了这个 CSS 中较新的属性来一直自动取得正确的宽高比，无论其父元素的宽度如何变化。
当然，aspect-ratio 不只仅只是能运用在这里，在 aspect-ratio 呈现之前，我们只能经过一些其它的 Hack 方式，譬如设置 padding-top 等方式模仿固定的宽高比。在 aspect-ratio 之后，我们终于有了设定容器固定宽高比的才能。
object-fit 防止图片拉伸
当然，限制高宽也会呈现问题，譬如图片被拉伸了，十分的难看：
这个时分，我们能够借助 object-fit，它可以指定可交换元素的内容（也就是图片）该如何顺应它的父容器的高宽。
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
object-fit: cover;
应用 object-fit: cover，使图片内容在坚持其宽高比的同时填充元素的整个内容框。
object-fit 的取值有 fill、none、contain、cover，与 background-size 相似，能够类比记忆。
也能够看看这张图，很易于了解：
object-fit 还有一个配套属性 object-position，它能够控制图片在其内容框中的位置。（相似于 background-position），默许是 object-position: 50% 50%，假如你不希望图片居中展现，能够运用它去改动图片实践展现的 position。
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: 50% 100%;
像是这样，object-position: 100% 50% 指明从底部开端展现图片。这里有一个很好的 Demo 能够协助你了解 object-position。
运用 image-rendering 设置图片缩放算法
相关于上面几个新特性，image-rendering 会更为冷门。
很多时分，我们设置一个图片在页面上的展现大小为 200px x 200px，但是图片的原始尺寸可能是 800px x 800px，也可能是 50px x 50px。
这个时分，我们就能够应用 image-rendering，设置图片在缩放状态下的展现算法。
image-rendering 在特定的场景下，可以起到奇效。
来看这样一个有意义的 DEMO，假定我们有这样一个原图效果，它是一个二维码，大小为 100px x 100px：
假如我们将它放大，放到很大，明显，这个二维码会失真，像是这样：
OK，在这种放大失真的状况想，能够运用 image-rendering 改动图片缩放算法，这里我们试一下 image-rendering: pixelated：
.img {
image-rendering: pixelated;
效果变化，如下图所示：
能够看到，image-rendering: pixelated 处置过的图像，居然变得如此明晰！
image-rendering: auto：自 Gecko 1.9（Firefox 3.0）起，Gecko 运用双线性（bilinear）算法停止重新采样（高质量）。
image-rendering: smooth：运用能最大化图像客观观感的算法来缩放图像
image-rendering: high-quality：与 smooth 相同，但更倾向于高质量的缩放。
image-rendering: crisp-edges：必需运用可有效保存比照度和图像中的边缘的算法来对图像停止缩放，并且，该算法既不会平滑颜色，又不会在处置过程中为图像引入含糊。适宜的算法包括最近邻居（nearest-neighbor）算法和其他非平滑缩放算法，比方 2×SaI 和 hqx-* 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。
image-rendering: pixelated：放大图像时，运用最近邻居算法，因而，图像看着像是由大块像素组成的。减少图像时，算法与 auto 相同。
固然标准定义了挺多值，但是实践上，现代阅读器根本暂时只支持：auto、pixelated、以及 -webkit-optimize-contrast（Chrome 下的 smooth）。
看描绘都会挺懵逼的，实践运用的时分，最好每个都试一下考证一下效果。总结而言，image-rendering 的作用是在图像缩放时，提供不一样的渲染方式，让图片的展现形态更为多样化，或者说是尽可能的去减少图片的失真带来的信息损耗。
我们再看一个 DEMO，原图如下（例子来源于 W3C 标准文档）：
当然，看上去 pixelated 的效果挺好，这是由于这是一张倾向于矢量的图片，细节不多，关于高精度的人物图，就不太适用于 pixelated，容易把图片马赛克化。
真正轨范希望的在放大后让图片尽可能不失真的 crisp-edges 效果，目前暂时没有得到阅读器的完成。后面能够等待一下。
模块总结
这一章，我们引见了 4 个较新的 CSS 特性：
aspect-ratio：控制容器的宽高比，防止产生规划偏移及颤动
object-fit：设定内容应该如何顺应到其运用高度和宽度肯定的框，防止图片拉伸
object-position：基于 object-fit，设置图片实践展现的 position 范围
image-rendering：控制图片在缩放状态下的展现算法
合理应用它们，能够给用户在图片上以更好的体验。
懒加载/异步图像解码计划
继续下一个章节。本章节，我们来讨论下图片的懒加载与异步图像解码计划。
图片的懒加载
懒加载是一种网页性能优化的常见方式，它能极大的提升用户体验。到今天，如今一张图片超越几 M 曾经是常见事了。假如每次进入页面都需求恳求页面上的一切的图片资源，会较大的影响用户体验，对用户的带宽也是一种极大的损耗。
所以，图片懒加载的意义即是，当页面未滚动到相应区域，该区域内的图片资源（网络恳求）不会被加载。反之，当页面滚动到相应区域，相关图片资源的恳求才会被发起。
在过去，我们通常都是运用 JavaScript 计划停止图片的懒加载。而今天，我们在图片的懒加载完成上，有了更多不一样的选择。
JavaScript 计划完成图片的懒加载
首先，回忆一下过往最常见的，运用 JavaScript 计划完成图片的懒加载。
经过 JavaScript 完成的懒加载，主要是两种方式：
监听 onscroll 事情，经过 getBoundingClientRect API 获取元素图片间隔视口顶部的间隔，配合当前可视区域的位置完成图片的懒加载
经过 HTML5 的 IntersectionObserver API 配合监听元素的 isIntersecting 属性，判别元素能否在可视区内，可以完成比监听 onscroll 性能更佳的图片懒加载计划
但是，JavaScript 计划的一个优势在于，不论如何，需求引入一定量的 JavaScript 代码，停止一定量的运算。
到今天，其实我们有更多的其他便利的方式去完成图片的懒加载。
运用 content-visibility: auto 完成图片内容的延迟渲染
首先，引见一个十分有用，但是相对较为冷门的属性 — content-visibility。
content-visibility：属性控制一个元素能否渲染其内容，它允许用户代理（阅读器）潜在地省略大量规划和渲染工作，直到需求它为止。
应用 content-visibility 的特性，我们能够完成假如该元素当前不在屏幕上，则不会渲染其后代元素。
假定我们有这样一个 DEMO：

// 模块 1

Lorem Start!

Lorem End!

// 模块 2

Lorem Start!

Lorem End!

// … 连续几十个上述相似的构造

只需求给需求延迟（实时）渲染的元素，设置简单的 CSS 款式：
.paragraph {
content-visibility: auto;
我们来看一下，设置了 content-visibility: auto 与没设置的区别。
假如，不添加上述的 content-visibility: auto 代码，页面的滚动条及滚动效果如下：
那么，在添加了 content-visibility: auto 之后，留意察看页面的滚动条及滚动效果：
能够看到滚动条在向下滚动在不时的抽搐，这是由于下面不在可视区域内的内容，一开端是没有被渲染的，在每次滚动的过程中，才逐步渲染，以此来提升性能。
content-visibility: auto VS 图片懒加载
当然，其实运用 content-visibility: auto 并不能真正意义上完成图片的懒加载。
这是由于，即使当前页面可视区域外的内容未被渲染，但是图片资源的 HTTP/HTTPS 恳求，仍然会在页面一开端被触发！
因而，这也得到了一个十分重要的结论：
content-visibility: auto 无法直接替代图片懒加载，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时分被全部加载。因而，它更像是一个虚拟列表的替代计划。
关于 content-visibility 本文限于篇幅，没有完整展开，但是它是一个十分有意义且对渲染性能有协助的属性
运用 loading=lazy HTML 属性完成图片懒加载
OK，content-visibility 很不错，但是略有瑕疵。但是，我们还有其他方式。
HTML5 新增了一个 loading 属性。
到今天，除了 IE 系列阅读器，目前都支持经过 loading 属性完成延迟加载。此属性能够添加到 元素中，也能够添加到
属性的值为 loading=lazy 会通知阅读器，假如图像位于可视区时，则立刻加载图像，并在用户滚动到它们左近时获取其他图像。
我们能够像是这样运用它：
这样，便能够十分便利的完成图片的懒加载，省去了添加繁琐的 JavaScript 代码的过程。
看看 loading=lazy 到今天（2023-02-26）的兼容性，还是十分不错的：
运用 decoding=async 完成图片的异步解码
除了 loading=lazy，HTML5 还新增了一个十分有意义的属性加强图片的用户体验。那就是 decoding 属性。
它的可选取值如下：
sync: 同步解码图像，保证与其他内容一同显现。
async: 异步解码图像，加快显现其他内容。
auto: 默许形式，表示不偏好解码形式。由阅读器决议哪种方式更合适用户。
上文其实也提及了，阅读器在停止图片渲染展现的过程中，是需求对图片文件停止解码的，这一个过程快慢与图片格式有关。
而假如我们不希望图片的渲染解码影响页面的其他内容的展现，能够运用 decoding=async 选项，像是这样：
这样，阅读器便会异步解码图像，加快显现其他内容。这是图片优化计划中可选的一环。
同样的，我们来看看到今天（2023-02-26），decoding=”async” 的兼容性，整体还是十分不错的，作为渐进加强计划运用，是十分好的选择。
实践检验 loading=lazy 与 decoding=async 效果
OK，下面我们制造一个简单的 DEMO，试一下 loading=lazy 与 decoding=async 的效果。
我们准备一个具有 339 个图片的 HTML 页面，每个图片文件的 src 大小不一。

// … 339 个

CSS 的设置也很重要，由于是纯图片页面，假如不给图片设置默许高宽，最页面刷新的一霎时， 元素的高宽都是 0，会招致一切 元素都在可视区内，所以，我们需求给 设置一个默许的高宽：
img {
margin: 8px;
width: 300px;
height: 200px;
object-fit: cover;
这样，再不添加 loading=lazy 与 decoding=async 的状态下，看看 Network 的表现：
我这里没有模仿弱网环境，网速十分快，能够看到，发送了 339 个图片资源恳求，也就是全部的图片资源在页面加载的过程中都恳求了，页面 Load 事情完成的时间为 1.28s。
好，我们给一切的图片元素，添加上 loading=lazy 与 decoding=async：

// … 339 个

看看效果：
能够看到，这一次只发送了 17 个图片资源恳求，页面 Load 事情完成的时间为 26ms。
当然，实践我测试的过程也，也单独试过 decoding=”async” 的作用，只是由于是纯图片页面，效果不那么明显。感兴味的同窗，能够自行尝试。1.28s 到 26ms，效果是十分明显的，假如是弱网环境，对首屏加载性能的提升，会更为明显！
模块总结
在本章节中，我们引见了不同的方式完成图片的懒加载、延迟渲染、异步解码，它们分别是：
经过 onscroll 事情与 getBoundingClientRect API 完成图片的懒加载计划
经过 Intersection Observer（穿插察看器）完成比监听 onscroll 性能更佳的图片懒加载计划
经过 content-visibility: auto 完成图片资源的延迟渲染
经过 loading=lazy HTML 属性完成图片懒加载
经过 decoding=async HTML 属性完成图片的异步解码
图片资源的容错及可访问性处置
OK，最后一个章节，我们简单聊一聊图片资源的容错及可访问性处置。
图片的可访问性处置
可访问性（A11Y），在我们的网站中，属于十分重要的一环，但是大局部同窗都容易无视它。
在一些重交互、重逻辑的网站中，我们需求思索用户的运用习气、运用场景，从高可访问性的角度思索，譬如假定用户没有鼠标，仅仅运用键盘，能否顺畅的运用我们的网站？
十分重要的一点是，进步可访问性也能让普通用户更容易了解 Web 内容。
关于图像信息，我们需求大致遵照如下可访问性准绳：
一切有意义的 img 元素必需有 alt 属性
提供替代 alt 属性的其他方式
运用辅助技术躲藏装饰图像
第一点十分好了解，一切的有意义的图片元素都必需要提供 alt 属性。
第二点比拟有意义，在 A11Y 中WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术标准。
简单来说，它提供了一些属性，加强标签的语义及行为：
能够运用 tabindex 属性控制元素能否能够聚焦，以及它能否/在何处参与次第键盘导航
能够运用 role 属性，来标识元素的语义及作用，譬如运用
Save
来模仿一个按钮
还有大量的 aria-* 属性，表示元素的属性或状态，协助我们进一步地辨认以及完成元素的语义化，优化无障碍体验
上述第二点，提供替代 alt 属性的其他方式 的含义就是运用 WAR-ARIA 标准提供的诸如 aria-label 和 aria-labelledby 属性为图像提供可访问的称号。
当存在这些属性时，辅助技术（屏幕阅读器）将疏忽图像的 alt 属性并读取 ARIA 标签。
而第三点，运用辅助技术躲藏装饰图像，又是什么意义呢？
上面第一点 一切有意义的 img 元素必需有 alt 属性，反过来说，页面上也会存在无意义的装饰性的图片，这些图片内容对辅助技术（屏幕阅读器）而言，其实是能够疏忽的。
关于没有任何功用或信息内容的装饰图像，能够经过多种方式对屏幕阅读器躲藏：
运用空的 alt 属性
运用 ARIA 属性 role=”presentation” 标明图片元素是装饰可疏忽图片
运用 CSS background 的方式呈现这些图片
alt 不要与 title 混杂
OK，下面来讲一些有意义的细节内容。
有一个十分根底的学问，简单过一下，也就是图片元素中，alt 与 title 的差别：
图片中的 alt 属性是在图片不能正常显现时呈现的文本提示。
图片中的 title 属性是在鼠标在挪动到元素上的文本提示。
正确运用 alt 属性
关于运用屏幕阅读器的用户而言，图片是无法正常展现或者被的阅读的，基于此，我们需求应用好 alt 属性，或者是上述的aria-label 和 aria-labelledby 属性。
那么，这些属性内的内容应该填充什么呢？我们需求基于图片的功用加以辨别
其实 alt 的学问是十分之多的，假如我们的页面能做到这一点，那真的算是从根上开端考虑，开端优化用户体验。
img 元素与 background 元素的取舍
OK，那么，讲到这里，还有一个有意义的点就很自然的应该被提及。
那就是我们应该什么时分运用 元素，什么时分运用 background 内嵌图片？
我们能够从性能及功用两个方面停止思索：
我们在思索选取 还是 backgroud-image 的时分，更多的还是从图片功用上停止思索。普通来说，作为修饰的且无语义的装饰性图片选择运用 background-image，而比拟重要的与网页内容相关的就运用 标签。其实性能上并不是中心思索的点，由于上文我们也讲到了在今天能够大范围运用是 loading=”lazy” 属性，图片能够停止原生支持的懒加载。
由于有语义的图片运用 展现，它的一个益处在于，当图片加载失败的时分，能够触发元素的 onerror 事情，我们能够有效的应用这一点，对图片停止异常处置。
图片的异常处置
当图片链接挂了，加载失败了，我们比拟好的处置方式应该是怎样样呢？
中心思绪为：
应用图片加载失败，触发 元素的 onerror 事情，给加载失败的 元素新增一个款式类
应用新增的款式类，配合 元素的伪元素，在展现默许兜底图的同时，还能一同展现 元素的 alt 信息
img.error {
position: relative;
display: inline-block;
img.error::before {
content: “”;
/** 定位代码 **/
background: url(error-default.png);
img.error::after {
content: attr(alt);
/** 定位代码 **/
我们应用伪元素 before ，加载默许错误兜底图，应用伪元素 after，展现图片的 alt 信息：
OK，到此，完好的对图片的处置就算完成了，这也比拟好的论述了为什么，对有语义，有 alt 信息的图片，我们应该运用 元从来完成。这是由于，我们能够在错误发作的时分，比拟好的对图片停止兜底展现，让用户直观的可以看到 alt 内容。
完好的 Demo 你能够戳这里看看：
当然，上述计划存在两个小问题：
关于每一个 元素，我们都需求写一段 onerror=”this.classList.add(‘error’);” 代码，有点反复。因而，这个工作也能够交给 JavaScript 全局性的完成，并且，我们可能需求判别 alt 的值能否为空，在为空时，运用默许图片 alt 兜底文案。
早年间， 等交换元素是没有伪元素的，后面 Chrome/Firefox 阅读器逐步支持了当， 的 src 拉取失败时，支持 元素的伪元素展现，这才有了上述的计划，但是，目前 Safari 仍不支持这个特性，所以，在 Safari 下，我们可能得到如下的结果：
效果依然还是 OK 的，只是没有了兜底图的展现，在实践运用过程中，需求晓得这一点。
总结一下
本章节，对图片资源的容错及可访问性处置停止了论述。中心内容在于：
关于图像信息，我们需求大致遵照如下可访问性准绳：
一切有意义的 img 元素必需有 alt 属性
提供替代 alt 属性的其他方式
运用辅助技术躲藏装饰图像
正确运用 alt 属性，理解不同场景下 alt 应该填充什么内容
img 元素与 background 元素的取舍
图片异常处置的最佳理论
至此，到此就圆满完毕，整个系列的文章包括了十分多的新的标准及特性，需求大家在理论中依据实践状况灵敏选取运用。
同时，我们也应该能看到，前端技术仅仅在这一小个范畴，都在不时的迭代创新。固然很难，还是需求不时充实本人跟上新的潮流。共勉。
最后
OK，本文到此完毕，希望本文对你有所协助

考研全年集训营(考研全年集训营一般多少钱)