富媒体资源元素1、深入图像元素1.1、了解svg元素1.1.1、命名空间1.1.2、viewBox视区盒子1.1.3、preserveAspectRatio属性与缩放规则1.1.4、SVG文件的内联与外链显示1.2、canvas元素的基本特性1.2.1、尺寸1.2.2、坐标系1.2.3、图像转换1.3、专为图像显示设计的figure元素和figcaption元素1.4、srcset、sizes等属性与响应式图片开发1.4.1、先从基础的srcset属性说起1.4.2、sizes属性和w描述符的使用场景1.5、实用却不常用的picture元素1.5.1、不同尺寸显示不同图片1.5.2、不同宽度、不同屏幕密度显示不同图片1.5.3、不同浏览器显示不同后缀图片1.6、聊聊loadinglazy懒加载1.6.1、懒加载的策略1.6.2、语法1.7、crossOrigin与跨域处理1.7.1、语法1.7.2、其他跨域处理方法1.8、使用elementtiming属性知晓图片的加载时长在前端开发中富媒体开发是有专门的前端岗位的主要负责图像、音频和视频的处理从表层到底层所需要的技术积累跨度特别大。以视频为例对于表层应用我们简简单单使用一个video元素就可以了对于深层应用如要对视频进行特效合成就需要了解视频的编解码、图像特效处理等那不仅需要精通JavaScript还需要众多其他富媒体相关的知识积累并非易事。相对地有门槛也就意味着有竞争力所以本章的内容还是很有价值的。富媒体开发一直是我专注且擅长的领域之一相信本章内容一定会让你受益颇丰。下面先从大家都一定使用过的图像元素说起。1、深入图像元素Web开发中常用的图像元素有三个svg、canvas和img。其中svg元素因为其矢量特性适合色彩简单的图形canvas元素是位图需要JavaScript代码参与绘制才能实现图像效果多用来实现特效或图像处理例如HTML转图像、图片前端压缩等img元素则用来显示头像、素材图等常规图片。这三个图像元素都非常重要各有各的使用场景涉及的知识也非常多且听我娓娓道来。1.1、了解svg元素按照渲染方式的不同图像可以分为两类一类是位图另一类是矢量图。位图的所有图形都是固定的像素点面积越大体积越大。矢量图的图形本质上是数学计算的结果是根据坐标和形状指令实时绘制的图形文件体积的大小和最终呈现的图像大小无关。SVG图形就是典型的矢量图SVG的全称是Scalable Vector Graphics即可缩放矢量图形。不仅形状就连矢量图的颜色也都是经过数学计算得到的这就注定矢量图的颜色只能以纯色或者渐变色为主所以SVG图形非常适合实现各类小图标效果。SVG是个独立的语言体系包含大量特有的元素例如path、circle、polyline、image等值得用单独一本书来讲述。本书并没有详细介绍这些元素的打算只会从实用的角度出发简单介绍SVG图形的使用注意事项。在SVG图形的常规使用中只要出现渲染问题无外乎下面两个原因svg元素的命名空间没有设置。svg元素的viewBox视区异常。1.1.1、命名空间命名空间是Web开发中一个比较重要的概念存在于任意的XML文档类型中例如在HTML 5普及之前XHTML文档的头部都会有这样的命名空间设置用来和传统的HTML 4文档进行区分在部分CSS样式的渲染细节上会有差异。为何需要命名空间呢除影响渲染规则以外还有一个作用那就是在同时使用不同类型的XML文档的时候可以对它们加以区分减少互相的干扰。例如在CSS中有个名为namespace的规则可以让一个文档中同样的标签元素应用不同的CSS选择器样式。假设页面中有如下所示的HTML代码那么下面这段CSS可以让页面中两个a元素呈现不同的文字颜色上面是蓝色的下面是红色的完全不冲突效果如图所示。你也可以通过在浏览器中输入地址https://www.htmlapi.cn/6/1-1.html访问来体验。不过namespace规则是个鸡肋属性除教学作用外没有任何实用价值。回到正题对于HTML文档而言命名空间就是摆设可有可无但是对于SVG图形而言却并非如此在很多场合svg元素的命名空间是必不可少的。如果SVG图形是使用svg元素直接内联在页面中的那么命名空间是可以省略的例如将下面的代码嵌入任意的HTML页面中都会渲染出一个圆形如图所示。但如果SVG图形需要内嵌在CSS代码中或者内联在img元素的src属性中那么命名空间就不能省略svg元素需要加上xmlns“http://www.w3.org/2000/svg”。例如下面这段HTML代码也能有下图所示的效果但是如果没有设置xmlns“http://www.w3.org/2000/svg”则图片加载异常无法显示圆形效果。如果大家在日常开发的时候发现内嵌的svg元素无法正常显示可以看看是不是命名空间没有设置。svg元素的命名空间不仅体现在XML书写上在DOM操作上有时候也会用到它例如创建一个普通的HTML元素并设置某个属性值我们直接使用setAttribute()方法就可以但是如果创建SVG中的image元素并设置某个属性值就不能使用setAttribute()方法而需要使用setAttributeNS()方法例如下面的代码1.1.2、viewBox视区盒子还是以上面的圆形SVG为例其设置的尺寸是100px×100px但在实际布局的时候我们需要其尺寸为48px×48px于是就会有如下所示的CSS代码设置但是这样设置之后只有部分圆形区域显示出来如图所示。出现这个问题是因为viewBox属性缺失viewBox可以指定哪部分区域的图形在当前尺寸渲染其语法如下所示其中x表示视区盒子的左上角横坐标y表示视区盒子的左上角纵坐标width和height分别表示视区盒子的高度和宽度。要理解这个属性需要参考一个比较极端的案例SVG代码如下所示此时的渲染效果如图所示。如果不看viewBox你一定会觉得诧异—SVG尺寸明明有400px×300px而rect元素设置的大小只有其1/20但是显示出来的却占据了半壁江山不科学啊小小矩形之所以大显神威就是这里的viewBox属性起了推波助澜的作用。用更形象的比喻解释就是SVG就像我们的显示器屏幕viewBox就像截屏工具选中的那个框最终的呈现就是把框中的截屏内容再次在显示器中全屏显示。更直观的解释如下首先假如没有viewBox属性那么SVG图形效果就会如图所示。随后viewBox0 0 40 30相当于在SVG的左上角画了个小小的框然后放大到整个SVG尺寸上如图所示于是就有了最终的渲染效果。为了便于大家理解viewBox属性是如何生效的我做了一个分步动画演示页面你可以通过在浏览器中输入https://www.htmlapi.cn/6/1-2.html访问来体验。回到一开始的案例如何让部分显示的圆形全部显示呢设置viewBox的大小和SVG图形的大小一致就可以了如下所示此时的渲染效果如图所示虽然圆形变小了但是显示完整了。如果你发现SVG图形在Chrome浏览器下显示良好但是在Safari下显示异常则要么没设置命名空间要么没设置viewBox。1.1.3、preserveAspectRatio属性与缩放规则svg元素还有一个非常重要的属性名为preserveAspectRatio可以设置SVG图形的缩放与排版规则。需要注意的是在正常情况下我们是用不到preserveAspectRatio属性的只有当CSS设置的SVG图形比例和原始SVG图形比例不一致或者viewBox设置的视区和SVG尺寸不一致时才会用到它。原因很简单如果SVG的高宽比以及视区大小和原始图形一致那么无论preserveAspectRatio设置怎样的属性值都不会看到任何渲染变化因为尺寸一致没有所谓的对齐说法比例一致也没有所谓的缩放规则。而这里的“对齐”和“缩放”正好对应preserveAspectRatio属性值的两个组成部分。其中第一部分的值又是由两部分组成的。前半部分表示x方向对齐后半部分表示y方向对齐如表所示。使用的时候x方向和y方向的值自由组合即可例如xMaxYMax表示viewBox沿着SVG的右下角对齐xMidYMid表示viewBox以水平居中位置对齐。例如如下所示的SVG代码viewBox设置的高度120小于SVG的高度150然后矩形居底渲染了效果如图所示。第二部分的值包括三个关键字分别是meet、slice和none如表所示。例如如下所示的SVG代码此时的渲染效果如图所示原本的圆形拉伸成了椭圆形。1.1.4、SVG文件的内联与外链显示在HTML文件中SVG有三种内联方式而在CSS文件中只有两种其中最常见的就是svg元素直接内联还有两种方式就是转义内联和Base64内联这里以圆形SVG为例内联引入的优点是使用方便但当多个SVG图形需要在多个地方同时使用时内联引用会有重复加载的问题。当然也是有解决方法的在SVG中可以使用symbol元素将图像抽象出来重复使用在CSS中可以使用CSS变量定义内联SVG资源。不过使用symbol元素的方法比较麻烦因此在HTML文件中就存在需要使用外链方式引用SVG图形的场景。这样做有两个好处首先外链的SVG文件是可以被浏览器缓存的因此可以提高网页的性能其次维护方便只要修改一处整站资源都可以替换。在HTML中可以实现外链SVG文件效果的元素非常多例如img、object、iframe和embed都可以外链SVG文件并在页面中显示对应的效果可以通过在浏览器中输入https://www.htmlapi.cn/6/1-3.html访问来体验。一般常用的是img和object这两个元素。最后再提醒一下外链的SVG文件必须要设置命名空间否则无法在网页中正常渲染。1.2、canvas元素的基本特性canvas是Web领域非常重要的元素之一和svg元素一样自成体系包含的知识非常多绝不是一两个章节就可以讲清楚的这里仅初步介绍canvas这个元素的一些特性。首先快速了解一下canvas元素是如何运作的。canvas元素又称画布元素默认情况下是一个透明的元素非闭合子元素均不会被渲染例如其中的文字是不会显示的但是如果使用DOM API获取还是可以获取到的例如回到正题要想让canvas元素发挥作用需要使用JavaScript代码在画布上绘制图形例如绘制一个圆形代码如下此时的渲染效果如图所示。除可以使用’2d’类型的上下文外还可以使用’webGL’类型的例如由此可见要想精通Canvas一定要熟悉JavaScript以及对应的上百个绘制API但通常的Web应用开发不会用到如此深入的Canvas技能更多的是一些简单的绘制和图像处理。本书会对相关知识做简单的介绍不过在此之前先要了解一下Canvas画布的尺寸、坐标等基本概念。1.2.1、尺寸很多新手搞不清楚Canvas中的绘制尺寸和显示尺寸其实很简单一句话Canvas绘制效果与CSS尺寸无关例如有如下的HTML代码其中出现了两个高度一个是height属性设置的150还有一个是style属性设置的视觉展示高度88现在若想以canvas元素中心点为圆心画一个圆则垂直坐标应该是75height属性值150的一半​而不是44最终视觉展示高度88的一半​代码如下所示此时的渲染效果如图所示。canvas是个位图元素按比例放大后Canvas图形会变模糊因此为适配高倍屏幕密度显示器往往会设置canvas元素的绘制尺寸是显示尺寸的2倍。例如需要绘制的图像的显示尺寸是800px×600px则canvas元素的width和height需要设置为1600和1200代码如下对应的CSS代码则是接下来所有Canvas绘制的数值和坐标都是基于1600px×1200px这个尺寸来的需要注意的是在Web网页中canvas画布的尺寸是有限制的并不是无穷大的例如Chrome浏览器的最大Canvas尺寸是16384px×16384pxSafari浏览器在桌面端的最大Canvas尺寸也是16384px×16384px但是在移动端最大Canvas尺寸是4096px×4096px。和svg元素一样如果不指定高度和宽度则canvas元素会按照300px×150px的尺寸渲染object和embed元素也采用了这个尺寸规则。1.2.2、坐标系Canvas的坐标起点是左上角例如一个矩形绘制代码如下其中的代码fillRect(0, 0, 100, 100)中的(0, 0)就是矩形的左上角坐标由于Canvas的坐标起点是画布的左上角因此上述矩形的绘制区域也就是Canvas画布的左上角如图所示边框为Canvas的边界​。正常绘制的时候还好一旦遇到需要使用Transform变换的场景很多人就搞不明白这种坐标系了。例如要实现Canvas画布居中旋转45°的效果需要有下面这么多步骤而如果使用CSS代码实现直接用rotate45deg就可以了要简单得多。其中context.translate(150, 75)把原本位于左上角的坐标中心点移动到画布的(150, 75)这个位置正好是画布默认尺寸的中心然后再旋转坐标接着将中心点恢复到(0, 0)此时绘制的图形才会以Canvas中心旋转。上述代码的渲染效果如图所示。1.2.3、图像转换HTML中的img元素和SVG中的image元素都可以直接绘制在Canvas画布上例如不过image元素转移到Canvas上仅在学习场景下才会用到生产环境遇到的需求往往是SVG图形转移到Canvas上此时需要使用img元素作为媒介来实现具体实现如下假设页面中有个svg元素是这样的​此时SVG的圆形就转移到Canvas画布上了效果如图所示。上图对应的效果可以通过在浏览器中输入https://www.htmlapi.cn/6/1-4.html访问来体验。1.3、专为图像显示设计的figure元素和figcaption元素页面中有个图像元素无论是svg、canvas还是img图像元素只要有描述信息就特别适合使用figure元素和figcaption元素。其中figcaption元素用来显示描述信息而figure元素用来包裹图像和文字信息。再配合简单的CSS代码例如下面这段就可以实现常见的图文排版效果了效果如图所示。由于img是最常用的HTML元素之一因此理论上figure元素也应该是高频使用的HTML元素如果你突然意识到figure元素用得并不多那就要注意了你的HTML代码还可以变得更好。由于figure元素语义特殊且专一因此不用担心直接使用figure标签作为选择器会有冲突问题从这一点来看figure元素还可以节约CSS类名相比你使用div元素​让代码变得更加简洁易读所以用它准没错谁用谁喜欢。可以通过在浏览器中输入https://www.htmlapi.cn/6/1-5.html访问来体验。另外figure元素在水平和垂直方向都有默认的margin外间距在文档类的排版中这些默认样式还是很有用的但是对于非文档类的Web开发就不适用了需要重置。1.4、srcset、sizes等属性与响应式图片开发本节介绍img元素的几个强大却生不逢时的HTML属性与描述符需要花点“理解成本”​大家在阅读本节时速度可以放慢一点。说明本节内容涉及响应式图片开发为了便于大家的学习特意准备了两套图片第一套图片仅尺寸不同并在图片的左上角标明了尺寸例如宽度是128px的图片图片名是w128.jpg在左上角会有数字128256px和512px的图片与之类似第二套图片呈现的信息一致不过布局不同一个是长图图片名是rect.png​一个是方图图片名是square.png​。1.4.1、先从基础的srcset属性说起先看一段HTML代码其中srcset属性值中出现的字符x是像素密度描述符因此整段HTML代码的含义是当浏览器的屏幕密度为1的时候显示w128.jpg这张图片。当浏览器的屏幕密度不小于2的时候显示w256.jpg这张图片。当浏览器的屏幕密度不小于3的时候显示w512.jpg这张图片。iPhone SE手机的屏幕密度是2因此会显示宽度为256px的图片而iPhone 12 Pro手机的屏幕密度是3因此会显示宽度为512px的图片详见下图。眼见为实可以通过在浏览器中输入https://www.htmlapi.cn/6/1-6.html访问来体验上述效果。srcset属性的作用不言而喻就是在保证最佳显示效果的同时尽可能调用尺寸最合适的资源以节约网络带宽和内存开销。乍一看这个srcset属性还是挺有用的然而我就没见过谁在实际项目中使用过它它的普及率极低。在前端技术领域一个不错的特性没有得到应有的关注无非有两个原因可替代。成本高。其中可替代是次要原因例如srcset属性的作用可以被CSS中的image-set()函数以及media媒体查询替代代码如下或者主要原因还是开发成本高因为准备多种规格的素材是需要耗费额外的开发精力的日后的维护成本也不容小觑所以业界普遍的做法都是直接使用2倍图即1倍屏用户也就浪费了点流量这个流量损耗不会被提bug也不会影响绩效所以开发人员多不在意而3倍屏用户看2倍图也算清晰以上原因造成了srcset属性无人问津只有那些有追求的开发人员才会尽可能使用最棒的前端特性让自己的代码尽善尽美。然而时代在变化工具在进步过去素材图需要设计师或者开发人员自己手动准备但是现在静态资源都开始走COS存储任意规格的图像素材都只要修改一个参数即可获得并没有所谓的开发成本。因此从现在开始不要再以麻烦为借口了只要接了COS对象存储所有img元素的srcset属性就都可以用起来例如然而图片的响应式渲染不仅与屏幕密度有关还与屏幕的宽度有关例如有一张宽度为600px的图片由于手机设备的宽度只有320px414px如果此时仅仅根据屏幕密度去加载2倍图反而会造成资源的浪费因为600px的图片按照300多px的宽度渲染其实就是2倍图显示。很显然仅用一个x描述符还不足以应对所有的响应式布局场景于是就有了sizes属性和w描述符。1.4.2、sizes属性和w描述符的使用场景img元素的sizes属性可以设置不同尺寸下图片应该渲染的宽度注意是应该渲染的宽度不是最终渲染的宽度最终渲染的图片宽度与w描述符密切相关尤其当w描述符设置的宽度和素材图的真实宽度不一致的时候。大家对这两句描述可能觉得有些云里雾里不急后面会详细解释。先看正常的sizes属性和w描述符的用法。w描述符的使用规则很简单图片原始宽度是多少px就将其设置为多少w本例中rect1x.png的图片宽度是600px因此后面跟着的是600wrect1.5x.png的图片宽度是900px因此后面跟着的就是900w而rect2x.png的图片宽度是1200px因此后面跟着的就是1200w。至于在哪种场景下渲染哪张图片是sizes属性及当前的显示设备共同决定的计算公式为将sizes属性指定的尺寸和当前的设备像素比屏幕密度相乘计算的结果如果不小于设置的w描述符则加载该图片。因此在以下设备中就会有如下所示的计算规则桌面浏览器屏幕密度为1此时匹配sizes属性中的600px宽度实际占据像素宽度是600×1600w因此加载的是rect1x.png。桌面浏览器屏幕密度为2此时匹配sizes属性中的600px宽度实际占据像素宽度是600×21200w因此加载的是rect2x.png。iPhone SE设备屏幕密度为2设备宽度是375px此时匹配sizes属性中的calc(100vw-20px)宽度其中100vw就是屏幕的宽度因此图片应用的宽度计算值就是355px实际占据像素宽度是355×2710w超过600w小于900w因此加载的是rect1.5x.png。iPhone 13 Pro Max设备屏幕宽度是428px小于480px加上屏幕密度是3根据计算可得(428-20)×31224w显然加载的是rect2x.png。可以看到相比单纯地基于x描述符确定加载哪张图片使用sizes属性和w描述符加载的图片规格更为精准。例如在移动端由于图片显示尺寸变小了因而没有必要加载2倍图就能够清晰显示。图模拟了在iPhone SE设备下的加载效果可以看到加载的是1.5倍图。而在iPhone 13 Pro Max设备下加载的是2倍图效果如图所示。眼见为实可以通过在浏览器中输入https://www.htmlapi.cn/6/1-7.html访问来体验上述效果。需要注意的是上面的加载效果属于理论结果实际加载的图片有时候会有差异比如如果浏览器已经加载并缓存了2倍图那么哪怕理论上匹配的是1倍图渲染的依然是2倍图。前文提到w描述符的值需要和图片的原始宽度匹配可如果不匹配会如何呢那么实际渲染的尺寸和sizes中设置的值可能就会有明显出入例如w描述符的尺寸明显小于图片的原始尺寸且渲染的是最大规格的图片则实际渲染的图片尺寸会比sizes中指定的尺寸大。w描述符的尺寸明显大于图片的原始尺寸且渲染的是最小规格的图片那么实际渲染的图片尺寸会比sizes中指定的尺寸小。尺寸偏差的倍数和w描述符与图片的原始尺寸的倍数呈线性关系因此在实际开发中我们没有任何理由设置和图片原始尺寸不一样的w描述符。1.5、实用却不常用的picture元素HTML中的picture元素还是挺实用的往往和source元素可以多个​、img元素最多一个一同使用。渲染的时候浏览器优先使用source元素而用img元素兜底。所以当我们需要在不同场景显示不同图片的时候picture元素就特别实用。1.5.1、不同尺寸显示不同图片这个功能常使用HTML的media属性实现。例如有如下HTML代码当浏览器的宽度小于640px时显示的是正方形图片当浏览器的宽度大于640px时则会显示长方形图片效果如图所示。你可以通过在浏览器中输入https://www.htmlapi.cn/6/1-8.html访问来体验上述效果。这段HTML代码特别适合用在响应式广告图的显示上。1.5.2、不同宽度、不同屏幕密度显示不同图片这其实是前面介绍的srcset属性的另外一种使用形式可读性要更好一些通常需要匹配图像尺寸w描述符或者设备相似比x描述符来显示不同的图像元素例如此时1倍屏显示128px.jpg2倍屏显示256px.jpg3倍屏显示512px.jpg效果如图所示。1.5.3、不同浏览器显示不同后缀图片浏览器会层出不穷地支持各种新的图片格式的渲染例如早些年受关注较多的WEBP格式近些年开始慢慢使用的AVIF格式。然而这些格式存在兼容性问题仅有部分浏览器支持可有时开发人员又想使用它们怎么办呢picture元素可以帮忙使用source元素将你最希望使用的图片格式放在最前面即可最好通过type属性指定图片格式例如如果浏览器支持AVIF格式就加载体积最小的AVIF格式如果浏览器不支持AVIF格式但是支持WEBP格式则加载example.webp如果浏览器都不支持则会加载用img元素兜底的example.jpg。你可以通过在浏览器中输入https://www.htmlapi.cn/6/1-9.html访问来体验。Chrome浏览器加载的就是example.avif大小仅为6.96KB同质量的JPG图片大小高达57.2KB​而Edge浏览器加载的是example.webp大小为34.9KB​效果如图所示。使用这种渐进增强策略可以保证绝大多数用户可以享受到最好的用户体验因为加载的图片大小变小了加载的速度自然也就快了。在实际开发中我们往往会使用工具自动进行格式转换保证永远使用最佳的图片格式使用极低的开发成本获得更好的产品收益。由于picture和source元素默认都是内联元素不占据任何尺寸因此在参与布局实现的时候就和使用单个img元素一样所以其实picture元素的上手成本是极低的。再结合上面三个案例可以看出picture元素确实挺实用然而由于目前前端社区对HTML普遍不重视对此知之甚少加上有CSS和JavaScript的替代实现方案所以导致在实际项目中很少有人使用picture元素这是很可惜的事情希望本书的出版可以改变这个现状。1.6、聊聊loading“lazy”懒加载在默认情况下一个img元素只要设置了src图片地址哪怕这个img元素是隐藏的浏览器也会请求对应的图片资源。这会造成很大的资源浪费因为很多网页用户仅停留几秒看看首屏的内容就离开了屏幕外的图片资源显然就会白加载。所以就有了“图片懒加载”​也就是图片在用户不可见的地方就不加载当用户真正浏览的时候才去加载。过去图片懒加载都是使用JavaScript代码实现的而如今非常简单给元素设置loadinglazy就可以了就是这么简单没有任何“副作用”​可以这么说所有的img元素都值得拥有一个loading“lazy”。1.6.1、懒加载的策略大家需要明确一点即设置了懒加载的图片资源何时加载是有一套比较复杂的执行策略的不同浏览器的策略在细节上会有差异甚至不同版本的浏览器在执行细节上也会有差异。但是下面所说的这些大致策略都是一致的。懒加载图片并不是在屏幕外就不会加载通常要两屏或三屏开外的图片才会不加载至于具体的缓冲高度是多少是由屏幕尺寸、网速等众多条件共同决定的。如果网速很快那么默认加载的图片资源就会少如果网速慢则浏览器会一次性加载比较多的图片保证用户浏览的时候不会出现长时间等待图片加载的不好的体验。图片懒加载的时机及数量与屏幕高度密切相关屏幕高度越小则加载数量越少同时当浏览器窗口的尺寸发生变化的时候尤其是从小窗口变成大窗口的时候往往会触发更多的图片资源的加载。并非隐藏的懒加载图片都不会执行加载例如连续三个隐藏的div元素内都有懒加载图片很有可能第一个div元素里面的图片依然会加载。页面中有20个懒加载图片有可能率先加载的是后面10张图片。例如非强制刷新的网页会自动记住上一次的滚动高度此时首先映入用户眼帘的是页面底部内容势必优先加载这部分区域的图片。懒加载图片的加载优先级通常是Low如图所示因此那些重要的图片素材可以考虑不使用懒加载或者设置loading“eager”。即使图片已经被缓存懒加载也不会提前执行。1.6.2、语法loading属性支持两个属性值lazy和eager。lazy图片或框架懒加载也就是在元素资源快要被看到的时候加载。eagereager是急切的意思即图片或框架资源正常加载。上面的语法示意提到了“框架”​此框架指的正是iframe元素即懒加载不仅适用于img元素也适用于iframe元素例如很多内嵌的广告就是用iframe元素实现的非常有必要设置loading“lazy”。1.7、crossOrigin与跨域处理支持crossOrigin属性的元素非常多例如audio、img、link、script、video元素由于crossOrigin属性多用在img元素上因此放在这里介绍。Web截图、图像特效处理、PDF导出等需求都需要将img元素绘制到Canvas上并转换可若图片元素跨域了那么无论是getImageData()方法还是toDataURL()方法在执行的时候都会报错。例如使用下面的代码获取GitHub上自己头像的图片信息结果在Chrome浏览器下显示如下错误Uncaught DOMException:Failed to execute’getImageData’ on ‘CanvasRendering Context2D’:Thecanvas has been tainted by cross-origin data.如果使用的是canvas.toDataURL()方法则会报错Failed to execute ‘toDataURL’ on’HTMLCanvasElement’:Tainted canvased may not beexported.那么有没有什么办法可以解决这个跨域限制的问题呢可以试试crossOrigin属性。代码如下所示新增了一句img.crossOrigin‘’此时getImageData()方法就能正常运行了对此我专门做了个演示页面分别对比设置了crossOrigin属性和没有设置crossOrigin属性的效果可以通过在浏览器中输入https://www.htmlapi.cn/6/1-10.html访问来体验。运行结果如图所示左侧的图片设置了crossOrigin“”成功执行了getImageData()方法而右侧的图片没有设置结果抛出了运行错误。1.7.1、语法crossOrigin属性支持下面两个值。anonymous元素的跨域资源请求不需要凭证标志设置。use-credentials元素的跨域资源请求需要凭证标志设置意味着该请求需要提供凭证。其中只要crossOrigin的属性值不是use-credentials则都会解析为anonymous包括空字符串’以及类似’abc’这样的字符。例如运行结果参见下图。use-credentials这个值日常开发中很少用到除非是那些对JavaScript运行安全要求比较高的场景。1.7.2、其他跨域处理方法如果你发现设置图片的crossOriginanonymous后依然无法运行可以试试下面的方法无论用哪种方法都需要提前于服务侧设置运行跨域访问也就是设置Access-Control-Allow-Origin头信息。1.8、使用elementtiming属性知晓图片的加载时长相比文本内容媒体资源的流量消耗非常惊人很多时候会成为页面加载的性能瓶颈。传统的做法是开发人员打开浏览器的开发者工具去查看网络请求资源的加载时长和流量开销如果发现一张图片动辄好几MB就会知道这里的图片资源需要优化。然而这种人工监控的方式非常低效最好使用自动化识别的方法。例如检测到图片加载时长频繁超出某个阈值说明这张图片可能会是低效资源可以优化。目前浏览器提供了原生的API可以对页面中的图文内容元素进行性能监控其被称为PerformanceObserverAPI一看就是个JavaScript API但统计元素的渲染和加载时长靠的却是一个HTML属性—elementtiming。elementtiming属性可以设置在任何有图文内容的元素上包括background-image背景图​以及视频元素相当于告诉浏览器​“喂浏览器这几个人本人很感兴趣你帮我看紧多多关注”此时浏览器就会记住这些元素的加载时长、渲染时长等 各种信息。配合PerformanceObserver API我们就可以获得这些信息了。假设页面上有下面两个HTML元素此时浏览器就会重点关注标志量为image和text的两个元素的时长相关信息。这些信息可以通过执行下面的代码进行获取。下图就是Chrome控制台的输出结果可以看到不仅显示了元素的尺寸和位置信息还显示了什么时候开始渲染以及加载时长图片元素才有​。于是如果想要监控页面中所有图片素材的加载时长只需要给对应的img元素设置elementtiming属性配合几行简单的JavaScript代码就可以了这是浏览器原生特性不影响业务开发性能优异。当然elementtiming属性也适用于接下来要介绍的音视频资源。