前端性能优化实践之js 图片 字体优化（4）

1、资源压缩合并

• 为什么需要做这件事情 ？

1、html 压缩

• webpack 中集成了这个工具 在线地址www.willpeavy.com/tools/minif…

2、css 压缩

3、js 压缩

• 合并部分

2、图片优化 ？

• 先说1 格式

1、jpg 格式  可使用 imagemin 测试

优点：体积小，可以压缩 色彩多 24位
    缺点：边角处理 不细腻，有锯齿感
    场景：轮播图和大的图片
复制代码

2、png格式  可使用 imagemin-png

优点：可以压缩 色彩多 24位, 边角没有锯齿感
    缺点：体积大
    场景：logo 和 其他小的图片
复制代码

3、webp

优点：可以压缩 色彩多 24位, 边角没有锯齿感，而且体积小
    缺点：浏览器兼容性有问题 
    场景：如果解决了兼容，或者 用户群体不需要兼容，非常nice
复制代码

• 再说 2 懒加载方式

1、原生图片懒加载 img 上添加 loading="lazy" 但兼容可能不好 所以常使用第三方
      2、第三方工具  verlok/lazyload https://github.com/verlok/vanilla-lazyload     
      yall.js
      Blazy
复制代码

• 将项目更改为懒加载 方式 加载图片
  

• 使用这个组件 加载 图片  effect='blur' 指的是没加载出来时模糊感

• 此时 页面往下翻 才会展示出 图片  非常nice ～

再说3 渐进式 加载 方式

• 好处是 起码可以始终看到 轮廓，即使开始有点模糊

• 解决方案

• ImageMagick 这个点赞蛮多 github.com/ImageMagick…

再说4 响应式 加载 方式

• 目的是实现不要尺寸下加载不同大小的图片
  
• 这是一个实际例子
  

• 更多可看Google developers.google.com/web/fundame…

3、字体优化 ？

• 字体加载的 问题

• 如何解决问题 ？

• 每个值都是 什么意思  ？

• 结合自己这个项目 敲一下

• 另外一种方式 并不建议
  网络异常，图片无法展示

  |