前端性能——图片文字资源优化

图片资源优化

选择正确格式

• 常用图片格式

• svg

svg在前端使用中还有一个优势，那就是他可以导出为svg标签形成文件icon，他的好处是可以继承父类的颜色，这样就无需对仅因为颜色的不同下载多张图片

示例： 使用内联svg代码

1 已知一张svg图片，可在浏览器上产查看对应的svg的样式
2 svg代码比较简短，导出为svg代码，path中需要增加属性： fill=“currentColor”，这样才能继承父级颜色；可以根据实际情况修改svg的width、height、viewBox、还可额外设置style。

export const AppSvg = () => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="15.170013427734375" height="14.100006103515625" viewBox="0 0 15.170013427734375 14.100006103515625">
        <defs></defs>
        <g  transform="matrix(1,0,0,1,-0.00000858306884765625,0.0000030994415283203125)">
            <path 
            	d="M4.339 1.667L4.339 4.168L1.839 4.168L1.839 1.667L4.339 1.667L4.339 1.667ZM0.173 0L0.173 5.835L6.005 5.835L6.005 0L0.173 0L0.173 0ZM8.504 0L15.17 0L15.17 1.667L8.504 1.667L8.504 0L8.504 0ZM8.504 5.835L15.17 5.835L15.17 7.503L8.504 7.503L8.504 5.835L8.504 5.835ZM8.504 11.671L15.17 11.671L15.17 13.338L8.504 13.338L8.504 11.671L8.504 11.671ZM6.594 10.176L5.416 8.997L2.672 11.742L1.178 10.248L0 11.427L2.672 14.1L6.594 10.176L6.594 10.176Z" 
            	fill="currentColor"
            />
        </g>
    </svg>
    );
  };

 import { AppSvg } from "./svg"
...

// 使用 
 <AppSvg />

3 效果

• svg代码比较简短，方便直接引入，也可借助插件或者svg组件库导入

图片加载优化

图片懒加载

浏览器会延迟加载带有 loading="lazy" 的图片，直到用户滚动到距离视口（viewport）一定范围内。以减少初始页面加载时间，提升用户体验。

<img src="lazy-load.jpg" loading="lazy" alt="延迟加载">

• 打印一：定时器中的箭头函数使它内部执行时跳出当前作用域，效果就与第一个打印相同了
• 打印二：箭头函数跳出zhangsan这个对象，找到了window对象

其他插件，如verlok/lazyload、yall.js、Blazy等，实现不同模式的懒加载效果

响应式图片

• img标签 srcset + sizes 属性

在img标签中，通过sizes属性结合屏幕尺寸计算分段基准，再根据srcset 属性中的区间选择距离最近的基准对应的图片

<img 
  src="fallback.jpg" 
  srcset="
    small.jpg 480w, // 单位w代表px
    medium.jpg 800w,
    large.jpg 1200w
  " 
  sizes="
    (max-width: 600px) 480px, // 屏幕尺寸小于600px 基准为480px
    (max-width: 1024px) 800px, // 屏幕尺寸介于600px与1024px 基准为800px
    1200px // 屏幕尺寸大于1024px 基准为1200px
  " 
  alt="响应式图片"
>
屏幕宽度 500px → 加载 small.jpg（因为 480px 最接近）。
屏幕宽度 900px → 加载 medium.jpg。（因为 800px 最接近）。
屏幕宽度 1300px → 加载 large.jpg。 （因为 1200px 最接近）。

• picture + source 元素

picture+source元素也可实现响应式，但是要注意浏览器兼容性

<picture>

  <source 
    srcset="image-large.png" 
    type="image/webp" 
    media="(min-width: 1200px)"
  >
  <source 
    srcset="image-medium.png" 
    type="image/webp" 
    media="(min-width: 768px)"
  >
  <!-- 回退到 JPEG 格式 -->
  <img 
    src="image-small.png" 
    srcset="
      image-medium.jpg 800w,
      image-large.jpg 1200w
    " 
    alt="响应式图片"
  >
</picture>

字体资源优化

font-display

当使用外部字体时，浏览器由于需要加载字体文件，在未下载完成时，浏览器的延迟加载或者字体默认降级，导致字体闪烁，为了优化这种情况，使用css中的font-display属性

• 引入外部字体文件

 @font-face {
    font-family: 'langzheng';
    src: url('xxx.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }

.font {
    font-family: langzheng;
    color: red;
}